這篇文章主要介紹了JS實現簡單的抽獎轉盤效果,涉及javascript數值計算與頁面元素屬性動態操作相關實現技巧,需要的朋友可以參考下
本文實例講述了JS實現簡單的抽獎轉盤效果。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS抽獎轉盤</title> <style> *{ margin:0; padding:0; list-style: none; } .big{ width: 318px; height: 318px; margin:100px auto; } .big>div{ width: 100px; height: 100px; background: pink; float: left; line-height: 100px; text-align: center; border: solid; } .big>div:nth-of-type(5){ background: yellow; cursor: pointer; } #act{ background: red; } </style> </head> <body> <div class="big"> <div class="small" id="act">1</div> <div class="small">2</div> <div class="small">3</div> <div class="small">8</div> <div id="cj">點擊抽獎</div> <div class="small">4</div> <div class="small">7</div> <div class="small">6</div> <div class="small">5</div> </div> <script> var arrDiv=document.getElementsByClassName("small"); var oCj=document.getElementById("cj"); var num=0; var shijian=Math.random()*5000+3200; oCj.onclick=function(){ oTime=setInterval(dianji,200); } function dianji() { num=num+1; if (num>arrDiv.length-1){ num=0 } for(j=0;j<arrDiv.length;j++){ arrDiv[j].id=""; } arrDiv[num].id="act"; setTimeout(tingzhi,shijian); function tingzhi() { clearInterval(oTime) } } </script> </body> </html>
使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼,可得如下運行效果:
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。