一、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;
更多：