本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下
上代码:
& lt; div类=鞍捌鳌北? & lt; div>谢谢惠顾& lt;/div> & lt; div>十万元现金& lt;/div> & lt; div>谢谢惠顾& lt;/div> & lt; div> iphone11
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。