原生JS实现九宫格抽奖

  

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

  

上代码:

        & lt; div类=鞍捌鳌北?   & lt; div>谢谢惠顾& lt;/div>   & lt; div>十万元现金& lt;/div>   & lt; div>谢谢惠顾& lt;/div>   & lt; div> iphone11
  & lt; div>抽奖& lt;/div>   & lt; div>美的冰箱& lt;/div>   & lt; div>谢谢惠顾& lt;/div>   & lt; div> 50元红包& lt;/div>   & lt; div>谢谢惠顾& lt;/div>   & lt;/div>   & lt; div类="结果"祝辞& lt;/div>      

CSS样式代码:

        & lt; style>   .wrapper {   宽度:300 px;   身高:300 px;   显示:flex;   flex-flow:行包装;   位置:绝对的;   上图:0;   左:0;   右:0;   底部:0;   保证金:汽车;   边界:1 px固体红;   }      .wrapper div {   flex:没有;   宽度:100 px;   身高:100 px;   box-sizing: border-box;   边界:1 px固体红;   显示:flex;   对齐项目:中心;   justify-content:中心;   }      .active {   背景颜色:红色;   }      .wrapper div: nth-child (5) {   光标:指针;   }      .result {   身高:100 px;   显示:inline-block;   位置:绝对的;   上图:50 px;   左:0;   右:0;   保证金:汽车;   text-align:中心;   行高:100 px;   字体大小:40像素;   粗细:700;   颜色:# ff4400;   }   & lt;/style>      

JS代码:

        & lt; script>   var t m, num、时间、指标、目标,当前;//以索引值为0,1,2,5,8、7、6、3的div元素为循环目标,//因为以num总数递减的方式进行循环,故将数组倒序定义   var arr=(3、6、7、8、5、2、1、0];   var div=document.querySelectorAll (”。包装器div ');   var=document.querySelector结果(“.result”);   div [4]。onclick=function () {   clearInterval(时间);   div [4]。innerHTML='抽奖中……”;   结果。innerHTML=";//中奖目标设为0到7的随机整数   目标=Math.floor (math . random () * 8);//起始位置设为随机,且以num为总的循环数   num=Math.floor (math . random () * 8) + 40;//将总循环数的2/3保存,方便调整速率峰值出现的时间//若m为总循环的1/2,则速度峰值会在总时长的中间出现   m=数学。地板(num * 2/3);//此处如果语句可限制中奖,从第一个开始外圈顺时针分别对应7、6、5、4、3、2、1、0//如设置目标==6即限制中十万元现金,以下代码为100%不中奖   如果(目标==6 | |目标==4 | | 2目标==| |目标==0){   目标+ +;   }   速度();      函数速度(){//将循环目标div的索引值转换为循环总数的表达式   指数=arr (num % 8);//给当前循环元素添加样式,并移除之前的样式   如果(当前){   current.remove(“活跃的”);   }   div(指数).classList.add(“活跃的”);   当前=div(指数).classList;//速度函数,可调试速率   t=Math.floor(数学。战俘((num - m), 2) + 250);//一次性定时器,嵌套递归循环控制速度   时间=setTimeout(函数(){   速度()   },t)//判断中奖结果   如果(num==目标){   clearTimeout(时间);   div [4]。innerHTML='抽奖”;   开关(目标){   例6:   结果。innerHTML='恭喜您抽中' + div [arr % 8][目标]。innerHTML + '大奖”;   打破;   案例4:   结果。innerHTML='恭喜您抽中' + div [arr % 8][目标].innerHTML;   打破;   案例2:   结果。innerHTML='恭喜您抽中' + div [arr % 8][目标].innerHTML;   打破;   例0:   结果。innerHTML='恭喜您抽中' + div [arr % 8][目标].innerHTML;   打破;   默认值:   结果。innerHTML=div [arr % 8][目标].innerHTML;   }   }   num -;   }   }         & lt;/script>      

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

原生JS实现九宫格抽奖