如何用JavaScript编写一个长尾词相关的九宫格抽奖程序？

本文共计1742个文字，预计阅读时间需要7分钟。

原文：本文实例为大家分享了JavaScript实现九宫格抽奖的具体代码，供大家参考，具体内容如下+看到一个个抽奖案例，觉得还不错。就自己做一个简单版本。+点击中间的开始，抽奖就会跑起来”。

改写后：本文以实例形式，展示了如何使用JavaScript实现九宫格抽奖功能，并提供参考代码。案例展示后，觉得效果不错，于是制作了一个简易版。点击中间的开始按钮，即可启动抽奖。

本文实例为大家分享了JavaScript实现九宫格抽奖的具体代码，供大家参考，具体内容如下

看到个抽奖案例，觉得还不错。就自己做了一个简单版本。

点击中间的开始，抽奖就会跑起来，速度由慢到快，再到慢，最后停下。停下的格子就是中奖的奖品。

主要思路：

1、抽奖的高亮色块轮循，使用一个 class 去控制。

2、要控制色块轮循的速度快慢，要用到计时器 setTimeout，可以控制轮循速度。

3、正在抽奖轮循的时候，开始按钮是不能点击的。所以要用一个变量判断当前是否正在轮循。

4、轮循的次数是一个随机数，这样每次开始轮循的结果都是随机的。

HTML

<div class="box" id="box">     <ul>         <li>0</li>         <li>1</li>         <li>2</li>         <li>3</li>         <li id="start">开始</li>         <li>5</li>         <li>6</li>         <li>7</li>         <li>8</li>     </ul> </div>

开始菜单在中间，因此轮循环的奖品 li ，其实是 0 -3 ，5-8 这几个 li。

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; }

色块高亮，用的是一个类去控制。所以，要在样式里把类 show 写好。

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（默认）。用来判断是否轮循，防止多次点击 start。如果在轮循，是不允许点击 start 的。

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<= 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 ;   // 结束, 轮循环次数     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);     };     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); }

样式写的很简单，基本原理就是这样~！

大家可以自行扩展。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。