js：九宮格抽獎
阿新 • • 發佈：2019-01-26
專案需要實現一個九宮格抽獎的模板，當然是微信小程式版本的，但是現在有點時間，就整理了個js版本的（相容性，使用jq的dom操作）
當然，不喜歡用jq的同學可以直接使用document來操作，如果不喜歡dom操作的，就移步下一篇部落格的微信小程式版本的
程式碼如下：
沒有多大的麻煩。而且有備註，就不多解釋了<!DOCTYPE html> <html> <style> li { width: 200px; height: 200px; } .ul { width: 606px; height: 606px; } .ul li { float: left; border: 1px solid #000000; list-style: none; line-height: 200px; text-align: center; font-size: 50px; } </style> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="ul"> <li class="li1">1</li> <li class="li2">2</li> <li class="li3">3</li> <li class="li8">8</li> <li class="listart">開始</li> <li class="li4">4</li> <li class="li7">7</li> <li class="li6">6</li> <li class="li5">5</li> </div> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> var last_index = 0, //上一回滾動的位置 amplification_index = 0, //輪盤的當前滾動位置,0表示為第一次 roll_flag = true, //是否允許滾動 max_number = 8, //輪盤的全部數量 speed = 300, //速度，速度值越大，則越慢 初始化為300 finalindex = 3, //最終的獎勵 myInterval = "", //定時器 max_speed = 40, //滾盤的最大速度 minturns = 8, //最小的圈數為2 runs_now = 0; //當前已跑步數 $(".listart").bind("click", function() { //初始化步數 runs_now = 0; //當前可以點選的狀態下 if(roll_flag) { roll_flag = false; //啟動滾盤，注，若是最終後臺無返回就不好意思裡 rolling(); } }); //滾動輪盤的動畫效果 function rolling() { myInterval = setTimeout(function() { rolling(); }, speed); runs_now++; //已經跑步數加一 amplification_index++; //當前的加一 //獲取總步數，介面延遲問題，所以最後還是設定成1s以上 var count_num = minturns * max_number + finalindex - last_index; console.log(count_num); //上升期間 if(runs_now <= (count_num / 3) * 2) { speed -= 30; //加速 if(speed <= max_speed) { speed = max_speed; //最高速度為40； } } //抽獎結束 else if(runs_now >= count_num) { clearInterval(myInterval); last_index = amplification_index; roll_flag = true; } //下降期間 else if(count_num - runs_now <= 10) { speed += 20; } //緩衝區間 else { speed += 10; if(speed >= 100) { speed = 100; //最低速度為100； } } if(amplification_index > max_number) { //判定！是否大於最大數 amplification_index = 1; } //重新整理頁面 var strli = ".li"; strli += amplification_index; //全部清除 $("li").each(function() { $(this).css("background", "#ffffff"); }) //畫顏色 $(strli).css("background", "red"); } </script> </body> </html>
效果圖如下：
