一、JS九宮格抽獎 案例1
注：此案例，來着同行整理，jquery版本效果
<!DOCTYPE html> <html> <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <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> var last_index = 0, //上一回滾動的位置 amplification_index = 0, //輪盤的當前滾動位置,0表示為第一次 roll_flag = true, //是否允許滾動 max_number = 8, //輪盤的全部數量 speed = 300, //速度，速度值越大，則越慢 初始化為300 finalindex = 2, //最終的獎勵 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>
二、微信小程序九宮格 案例2
wxml
<view class="list"> <view class="flex"> <view class="item {{activeNum==1?'active':''}}">1</view> <view class="item {{activeNum==2?'active':''}}">2</view> <view class="item {{activeNum==3?'active':''}}">3</view> </view> <view class="flex"> <view class="item {{activeNum==8?'active':''}}">8</view> <view class="item" bindtap="startClick">開始</view> <view class="item {{activeNum==4?'active':''}}">4</view> </view> <view class="flex"> <view class="item {{activeNum==7?'active':''}}">7</view> <view class="item {{activeNum==6?'active':''}}">6</view> <view class="item {{activeNum==5?'active':''}}">5</view> </view> </view>
wxss
.list { border: 0px solid red; width: 300px; height: 300px; border-left: 1px solid gray; border-top: 1px solid gray; } .flex { display: flex; width: 100%; height: 33.33%; } .list .item { flex: 1; border-right: 1px solid gray; border-bottom: 1px solid gray; display: flex; align-items: center; /*垂直方向居中*/ justify-content: center; /*水平居中*/ } .list .item.active{ background-color: red; color: white; }
js
/**
* 頁面的初始數據
*/
data: {
activeNum: 0 //選中編號
},
startClick: function () { var _this = this; var roll = require('../../../utils/rollHelper.js'); //指定結果，和處理頁面狀態 roll.start(3, function (index) { //刷新頁面 _this.setData({ activeNum: index }); }); },
roolHelper.js
var last_index = 0, //上一回滾動的位置 amplification_index = 0, //輪盤的當前滾動位置,0表示為第一次 roll_flag = true, //是否允許滾動 max_number = 8, //輪盤的全部數量 speed = 300, //速度，速度值越大，則越慢 初始化為300 finalindex = 2, //最終的獎勵 myInterval = "", //定時器 max_speed = 40, //滾盤的最大速度 minturns = 8, //最小的圈數為2 runs_now = 0; //當前已跑步數 var roll = { //開始執行 start: function (value, onChange) { finalindex = value; //初始化步數 runs_now = 0; //當前可以點擊的狀態下 if (roll_flag) { roll_flag = false; //啟動滾盤，注，若是最終后台無返回就不好意思里 this.rolling(onChange); } }, rolling: function (onChange) { var _this = this; myInterval = setTimeout(function () { _this.rolling(onChange); }, speed); runs_now++; //已經跑步數加一 amplification_index++; //當前的加一 //獲取總步數，接口延遲問題，所以最后還是設置成1s以上 var count_num = minturns * max_number + finalindex - last_index; //上升期間 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; } if (onChange) onChange(amplification_index); } } module.exports = roll;
更多：