亲宝软件园·资讯

展开

js九宫格抽奖

stones4zd 人气:1

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

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

主要思路:

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

样式写的很简单,基本原理就是这样~!

大家可以自行扩展。

加载全部内容

相关教程
猜你喜欢
用户评论