博主最近有点忙哈 一直在搞项目 看到粉丝私信一直在催更 我这边也是一有空就会开始分享啦 希望大家多多海涵~
接下来就是大家喜闻乐见的代码环节
首先是HTML部分：
<div class="biggest_box"> <div class="smaller_box"> <p>商品一</p> </div> <div class="smaller_box_two"> <p>商品二</p> </div> <div class="smaller_box_three"> <p>商品三</p> </div> <div class="smaller_box_four"> <p>商品四</p> </div> <div class="smaller_box_five"> <p>商品五</p> </div> <div class="smaller_box_six"> <p>商品六</p> </div> <div class="smaller_box_seven"> <p>商品七</p> </div> <div class="smaller_box_eight"> <p>没抽到</p> </div> <button class="smaller_box_nine" style="border: none;"> <p>点击开冲</p> </button> </div>
其次是css样式
这里需要注意的是 因为代码都是从上往下解析的 所以按顺序写的格式如果开始执行抽奖的话顺序会乱掉 所以这里就要用到浮动的方法就可以很简单的解决掉这个问题
按照顺序分别定位到合适位置 例如：
1 2 3
8 4
7 6 5
* { margin: 0; padding: 0; } .biggest_box { width: 500px; height: 500px; border: 2px pink solid; margin-left: 20%; margin-top: 10%; position: relative; color: #ffffff; } .smaller_box { width: 30%; height: 30%; position: absolute; top: 2%; background-color: #0000ff; left: 2%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_two { width: 30%; height: 30%; position: absolute; top: 2%; background-color: #0000ff; left: 35%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_three { width: 30%; height: 30%; position: absolute; top: 2%; background-color: #0000ff; left: 68%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_four { width: 30%; height: 30%; position: absolute; top: 35%; background-color: #0000ff; left: 68%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_five { width: 30%; height: 30%; position: absolute; top: 68%; background-color: #0000ff; left: 68%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_six { width: 30%; height: 30%; position: absolute; top: 68%; background-color: #0000ff; left: 35%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_seven { width: 30%; height: 30%; position: absolute; top: 68%; background-color: #0000ff; left: 2%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_eight { width: 30%; height: 30%; position: absolute; top: 35%; background-color: #0000ff; left: 2%; font-size: 30px; display: flex; align-items: center; justify-content: center; } .smaller_box_nine { width: 30%; height: 30%; position: absolute; top: 35%; background-color: #ff00ff; left: 35%; font-size: 30px; display: flex; align-items: center; justify-content: center; }
最后就是实现JS的功能咯：
创建全局变量 time 初始为 300 ，
获取奖品列表，创建函数，在函数内判断 a 是否小于 7 (奖品的数量 - 1)
如果小于7，执行 k++ 让上一个奖品也就是 k - 1 下标对应的奖品颜色再回归为蓝色
让当前选中的奖品也就是 k 下标对应的奖品背景颜色为红色
如果不小于7，表示 k 不能再自增了，需要重新初始为 0 ，
让最后一件奖品 (奖品的数量 - 1 的下标对应的奖品)的背景颜色为蓝色，
let biggestBox = document.getElementsByClassName('biggest_box')[0]; let but = document.getElementsByClassName('smaller_box_nine')[0]; let arr = biggestBox.getElementsByTagName('div'); // let smaller_box_nine = document.getElementsByClassName('smaller_box_nine')[0]; // console.log(arr); let b; let a = 0; let num = 0; //圈数 let time = 300; let randNum = 0; but.onclick = on; function on() { // for (let i = 0; i < arr.length; i++) { // arr[i].style.backgroundColor = '#0000ff'; // } but.onclick = null; randNum = Math.floor(Math.random() * 8); //随机整数 arr[a].style.backgroundColor = '#ff0000'; b = setInterval(fn, time); } function fn() { if (a < arr.length - 1) { a++; arr[a - 1].style.backgroundColor = '#0000ff'; } else { a = 0; num++; arr[arr.length - 1].style.backgroundColor = '#0000ff'; } arr[a].style.backgroundColor = '#ff0000'; if (num <= 2) { if (time <= 100) { time = 100; } else { time -= 20; } } else { if (time >= 300) { time = 300; } else { time += 20; } } // console.log(num); if (num > 6 && a == randNum) { clearInterval(b); num = 0; time = 100; randNum = 0; setTimeout(function() { alert('哟，运气可以啊') but.onclick = on; }); } else { clearInterval(b); b = setInterval(fn, time); } }
