用jquary實現抽獎功能
阿新 • • 發佈：2018-12-19
先把樣式用html加css寫出來
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://www.alixixi.com/script/jquery-1.8.3.min.js" type="text/javascript"></script> <style type="text/css"> body,ul,li{ margin:0; padding:0; border:0;//清除瀏覽器原始的8畫素 list-style:none;//把ul，li的格式清除 } body{ font-size:12px; font-family:Arial, Helvetica, sans-serif;//字型型別 text-align:center; //字型居中 margin:0 auto; background:#efefef; } .box{ padding:9px 0 0 11px; width:759px; height:611px; background:#ccc; margin:20px auto; } .inbox{ width:751px; height:596px; position:relative;//相對定位 } #random_box li{ position:absolute; //絕對定位 width:144px; overflow:hidden; //超出的部分隱藏 height:144px; border:3px solid #c7c5ca; background:#fff; } #random_box li img{ width:144px; display:block; height:144px; } .ok{ display:block; //行級元素變成塊級元素 width:442px; height:294px; background:#c00; color:#fff; font-size:48px; position:absolute; top:150px; left:150px; cursor:pointer; //滑鼠放在上面是小手 text-align:center; line-height:280px; } #random_1{ left:0; top:0;} #random_2{ left:148px;top:0;} #random_3{ left:296px;top:0;} #random_4{ left:444px;top:0;} #random_5{ left:592px;top:0; } #random_6{ left:592px;top:148px;} #random_7{ left:592px; top:298px;} #random_8{ left:592px; top:446px;} #random_9{ left:444px; top:446px;} #random_10{ left:296px; top:446px;} #random_11{ left:148px; top:446px;} #random_12{ left:0; top:446px;} #random_13{ left:0; top:298px;} #random_14{ left:0; top:148px;} #random_box li.random_current{border:2px solid red;} </style> </head> <body> <div class="box"> <div class="inbox"> <ul id="random_box"> <li id="random_1"><img src="apple.jpg"></li> <li id="random_2"><img src="dell燃7000.jpg"></li> <li id="random_3"><img src="ipad2018.jpg"></li> <li id="random_4"><img src="oppo r17.jpg"></li> <li id="random_5"><img src="p20.jpg"></li> <li id="random_6"><img src="vivo nex星跡版.jpg"></li> <li id="random_7"><img src="華為nova3.jpg"></li> <li id="random_8"><img src="堅果r1.jpg"></li> <li id="random_9"><img src="外星人.jpg"></li> <li id="random_10"><img src="小米6.jpg"></li> <li id="random_11"><img src="小米6x.jpg"></li> <li id="random_12"><img src="小米8.jpg"></li> <li id="random_13"><img src="小米充電寶.jpg"></li> <li id="random_14"><img src="小米手環3.jpg"></li> </ul> <b class="ok" onClick="StartGame()">抽獎</b> </div> </div> </body> </html>
這需要的注意的是，使用jquary必須先匯入包，這裡可以是網上的，也可以是本地的，本地的就在src後吧路徑換了就行了。接下來就是寫jquary裡面的內容了
jquary程式碼
<script> var index=1, //當前亮區位置，就是獎轉到哪個位置 prevIndex=14, //前一位置，記住當前亮區的前一個位置，消除前一個選中狀態 Speed=300, //初始速度，在定時器中用到，多少毫秒執行當前函式 Time, //定義物件 arr_length = 14; //GetSide(5,5) //初始化陣列，此程式碼沒用到陣列，大致是陣列的意思，就是14個抽獎塊 EndIndex=1, //決定在哪一格處變慢 cycle=0, //轉動圈數 EndCycle=3, //計算圈數 flag=false, //結束轉動標誌 random_num=1, //中獎數， quick=0; //加速 //這裡是物件的定義，可以定義多個變數 var isClick = true;//消除重複點選事件 function StartGame(){ if(isClick){ $("#random_box li").removeClass("random_current"); //取消選中，用jquary把亮的位置的樣式消除 //random_num = parseInt($("#txtnum").val()); random_num = Math.floor(Math.random()*14+1); //產出隨機中獎數1~14之間，這裡可以控制，如果不想讓那個獎選出來，（Math.random()是產生[0,1)的隨機數，永遠不會取到1。floor是向下取整） //console.log(random_num); index=1; //再來一次，從1開始 cycle=0; flag=false; //EndIndex=Math.floor(Math.random()*12); if(random_num>5) {//產生隨機數（就是中獎數字）的前五個讓它速度變慢，最後停止 EndIndex = random_num - 5; //前五格開始變慢 } else {//這是一個圈，一共14個數，當前中獎數字位置的前五個數變慢 EndIndex = random_num + 14 - 5; //前五格開始變慢 } //EndCycle=Math.floor(Math.random()*3); Time = setInterval(Star,Speed);//設定定時器，讓star函式為speed毫秒執行一次 isClick = false;//讓此標誌位變成false，防止重複點選事件，讓事件越來越快 } } function Star(){ //跑馬燈變速,開始，也就是沒有結束 if(flag==false){ //走五格開始加速 if(quick==5){//走到第五格時開始加速 clearInterval(Time);//清除上一個定時器 Speed=50; Time=setInterval(Star,Speed);//毫秒數變快，速度加快 } //跑n圈減速 if(cycle==EndCycle+1 && index-1==EndIndex){//當全速等於cycle圈時，並且噹噹前亮區等於要減速的數時 clearInterval(Time);//清除定時器 Speed=300; flag=true; //觸發結束 Time=setInterval(Star,Speed); } } if(index>arr_length){//如果當前亮區跟咱們的獎品個數相同）（也就是14個品），那就從頭開始 index=1; cycle++; } //結束轉動，並選中號碼 if(flag==true && index==parseInt(random_num)){ //當前轉到的數等於產生的隨機中獎數 quick=0; clearInterval(Time);//清除定時器，此時抽獎停下 isClick = true;//可以重新點選star，重新開始抽獎 } $("#random_"+index).addClass('random_current'); //設定當前選中樣式 //永遠將前一個樣式清掉 if(index>1) prevIndex=index-1; else{ prevIndex=arr_length; } $("#random_"+prevIndex).removeClass('random_current'); //取消上次選中樣式 index++; quick++; } </script>
在相應的位置插入圖片
清除重複點選事件bug
使用一個flag，在進行點選事件裡面的內容之前先判斷flag，當flag為true時執行以下程式碼。中間讓flag一直為flase。在停止轉動，這一次抽獎完畢時，讓flag為true。