接下来我会以三大步用三个部分来给大家讲述一下用JavaScript如何实现九宫格抽奖，一，首先是要写好HTML中的结构的代码,二，之后就是创建一个CSS文件，在HTML当中用link标签来引入CSS在包底之上，CSS样式是丰富了HTML标签的样式三，是需要创建一个js文件，在最好是在body的最下面进行引入，用script来进行引入js文件，要把它放到body，放在最下面，js它是从逐行来实现的，让页面先加载完成再js引入不容易崩掉
<div class="box"> <div class="div1">0.01</div> <div class="divv">0.02</div> <div class="div2">0.03</div> <div class="div3">0.04</div> <div class="div4">0.05</div> <button id="bun">点击抽取</button> <div class="div5">0.06</div> <div class="div6">0.07</div> <div class="div7">0.08</div> </div>
*{margin: 0;padding: 0;} .box{width: 350px; height: 200px; border: 1px solid black; position: relative; margin: auto; margin-top: 130px; } .box div{ background-color: plum; text-align: center; line-height: 50px; width: 90px; height: 50px; } .div1{ position: absolute; margin-left: 10px; margin-top: 10px; }
嗯，那么接下来就该gs的部分首先是要获取他们div，然后要初始一个变量，初始五个变量，第一个初始为零是循环的零，第二个变量是旋转几圈，第三个声明的变量是随机数，第四个是泰姆，泰姆是时间速度，第五个是清除的变量声明
let boxs = document.getElementsByClassName("box")[0] let da = boxs.getElementsByTagName("div") let bun = document.getElementById("bun") let k = 0; let l = 0; let om = 0; let ti; let time = 500 bun.onclick = hs; function hs() { da[k].style.backgroundColor = "red" om = Math.floor(Math.random() * da.length) ti = setInterval(zua, time) bun.onclick = null }
那么写完这些之后就要给中间这个立即抽奖添加一个事件，添加一个点击事件，当点一次时，第一个抽奖格为一个颜色，下面就写随机数是随机，它的长度九宫格抽奖为九循环它的长度，之后再声明一个函数，这个函数里面需要判断第一个被点击时，如果小于九宫格的长度时需要减1k加加，需要再往当前的- 1，后面的颜色要变成原始的颜色，当前的这一格继续为刚设置的第一个格的颜色，之后，艾尔斯等于零圈数加加转为转第二圈，第三圈还是如此小于它的长度时就减一，检疫后后面的颜色就为原始的颜色style but ground color，我前颜色为红色，就是在转动的颜色，判断圈数小于两圈，那么如果时间小于等于100，那么它的时间就等于100，否则else就减等于50，接下来再else if判断时间大于等于500，那么它的时间就等于500，否则否则时间加等于50，意思就是当他初始值是500时，需要50，50的减当速度，他的时间，他的速度减到100时，那么就五十五十的往上加加到500，在判断圈数大于四圈的时候，并且到随机数的时候就要初始随机数为零圈数等于零时间等于500给button按钮加一个点击事件是为了不让这个点击事件连续执行 ，声明，一个变量tan x等于当前的当前的赚的数量，就是停止抽奖，抽到奖的这个方格的内容，那么就弹窗警告获得里面的内容text的内容
