盲盒抽奖小程序怎么弄-JavaScript实践小案例：九宫格抽奖
看到一个彩票案例，我觉得还不错。 自己做了一个简单的版本。 。
点击中间的开始按钮，抽奖就会开始运行，速度由慢到快，再到慢盲盒抽奖小程序怎么弄，最后停止。 停止的网格就是获胜奖品。
主要观点：
1、用一个类来控制抽奖的高亮色块。
2、要控制色块旋转的速度，可以使用定时器setTimeout来控制旋转的速度。
3. 抽奖过程中，无法点击开始按钮。 所以用一个变量来判断当前是否正在轮询。
4、循环的次数是随机数，因此每次循环的结果都是随机的。
超文本标记语言
- 0
- 1
- 2
- 3
- 开始
- 5
- 6
- 7
- 8
开始菜单在中间，所以循环赛的奖金实际上是0-3和5-8。
CSS
.box{
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.box li{
width: 98px;
height: 98px;
float: left;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-top: 1px;
background: #b2967d;
}
.box .show{
background: #ffb8af;
}色块高亮显示，用一个类来控制。 所以，班秀要写得有风格。
JavaScript 代码
let box = document.getElementById("box");
let start = document.getElementById("start");
let li = box.querySelectorAll("li");
let indexArr = [0,1,2,5,8,7,6,3];因为这里的 li 是直接浮动的卡通人物，并且循环标签是在 start 周围的，并且顺序不是从 0-8 依次递增。 因此，使用数组indexArr来控制循环标签的索引顺序。
方块的突出显示和删除利用两个实用函数：
// 查找兄弟标签
let findeSibling = (tag)=>{
let arr = [];
for(let i=0; i<= li.length-1 ; i++){
if( li[i] === tag ){
continue ;
}
arr.push( li[i] );
}
return arr ;
};
// 当前标签添加类名 cName，兄弟标签去掉类名 cName。
let tagAddClass = function( tag,cName ){
let siblings = findeSibling(tag);
for(let i=0 ; i<= siblings.length-1 ; i++ ){
siblings[i].classList.remove(cName );
}
tag.classList.add( cName );
};一些要设置的变量：
let speed = 250 ;
let myset = null;
let index = 0 ;
let times = 0 ; // 轮循的次数
let isGoing = 0 ; // 判断是否正在轮循，默认 否。
let startEndTimes = 10 ; // 开头和结束的缓冲次数
let startTimes =times-startEndTimes ; // 开头, 轮循环次数
let endTimes = startEndTimes ; // 结束, 轮循环次数speed 循环的速度。
index表示当前索引，默认为0。 从索引 0 处的标签开始。
times 用于表示每次的轮数，默认为0。这个数据，点击start后，会生成一个随机数来代替它的值。
isGoing 正在进行循环赛。 如果是，则为1； 如果不是盲盒抽奖小程序怎么弄，则为 0（默认）。 用于判断是否循环，防止多次点击启动。 如果是循环赛表情包设计，则不允许点击开始。
startTimes、endTimes，因为循环开始和结束时速度会发生变化，所以需要判断是否进入开始和结束状态。
startEndTimes，设置开始和结束缓冲时间为10次。
点击按钮开始循环赛~
tagAddClass( li[index], "show"); // 默认显示 0
let startFun = function(event){
if( isGoing ){ // 判断是否正在轮循, 是，就终止函数。
return ; // 防止重复点击
}
isGoing = 1 ;
times = Math.floor(Math.random()*20)+30;
startTimes = startEndTimes; // 开头, 轮循环次数
endTimes = times-startEndTimes ; // 结束, 轮循环次数
myset = setTimeout(goFun,speed);
};
start.addEventListener("click",startFun);goFun 的关键函数：
let goFun = function(){
index++;
if( index > indexArr.length-1 ){
index = 0;
}
tagAddClass( li[ indexArr[index] ], "show");
times -- ;
if( times>=startTimes ){ // 开始阶段，speed 加速，减少值
speed -= 20 ;
}
if( times <= endTimes ){ // 结束阶段，speed 减速，增加值
speed += 20
}
if( times<=0 ){ // 次数完毕，结束轮循
isGoing = 0 ;
clearTimeout(myset); // 停止计时器，释放资源
console.info( indexArr[index] ); // 弹出当前的标签，这个就是中奖的内容~！
return false; // 终止函数运行，结束循环。
}
myset = setTimeout(goFun,speed);
};完整的JS代码：
{
let box = document.getElementById("box");
let start = document.getElementById("start");
let li = box.querySelectorAll("li");
let indexArr = [0,1,2,5,8,7,6,3];
// 查找兄弟标签
let findeSibling = (tag)=>{
let arr = [];
for(let i=0; i<= li.length-1 ; i++){
if( li[i] === tag ){
continue ;
}
arr.push( li[i] );
}
return arr ;
};
// 当前标签添加类名 cName，兄弟标签去掉类名 cName。
let tagAddClass = function( tag,cName ){
let siblings = findeSibling(tag);
for(let i=0 ; i indexArr.length-1 ){
index = 0;
}
tagAddClass( li[ indexArr[index] ], "show");
times -- ;
if( times>=startTimes ){ // 开始阶段，speed 加速，减少值
speed -= 20 ;
}
if( times <= endTimes ){ // 结束阶段，speed 减速，增加值
speed += 20
}
if( times<=0 ){ // 次数完毕，结束轮循
isGoing = 0 ;
clearTimeout(myset); // 停止计时器，释放资源
console.info( indexArr[index] ); // 弹出当前的标签，这个就是中奖的内容~！
return false; // 终止函数运行，结束循环。
}
myset = setTimeout(goFun,speed);
};
tagAddClass( li[index], "show"); // 默认显示 0
let startFun = function(event){
if( isGoing ){ // 判断是否正在轮循, 是，就终止函数。
return ; // 防止重复点击
}
isGoing = 1 ;
times = Math.floor(Math.random()*20)+30;
startTimes =times-startEndTimes ; // 开头, 轮循环次数
endTimes = startEndTimes ; // 结束, 轮循环次数
console.info( times, startTimes, endTimes);
myset = setTimeout(goFun,speed);
};
start.addEventListener("click",startFun);
}样式很简单，基本原理就是这样~！
大家可以自行拓展~
