这一篇博客老有意思了！，喜欢玩游戏的有福了！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格抽奖</title> <style> .jpd{ width: 345px; height: 340px; border: 1px solid crimson; position: relative; margin-left: 20%; margin-top: 5%; } .jp{ width: 100px; height: 100px; background-color: palegreen; text-align: center; line-height: 100px; font-size: 10px; } #jpone{ position: absolute; left: 10px; top: 5px; } #jptwo{ position: absolute; left: 120px; top: 5px; } #jpthree{ position: absolute; left: 230px; top: 5px; } #jpfo{ position: absolute; left: 230px; top: 115px; } #jpfive{ position: absolute; left: 230px; top: 225px; } #jpsix{ position: absolute; left: 120px; top: 225px; } #jpseven{ position: absolute; left: 10px; top: 225px; } #jpeight{ position: absolute; left: 10px; top: 115px; } #but{ width: 100px; height: 100px; background-color: rebeccapurple; position: absolute; top: 115px; left: 120px; } </style> </head> <body> <div class="jpd"> <div class="jp" id="jpone">空气</div> <div class="jp" id="jptwo">野生奥特曼</div> <div class="jp" id="jpthree">苹果15Promax</div> <div class="jp" id="jpfo">华为Mate 60Pro</div> <div class="jp" id="jpfive">大G一辆</div> <div class="jp" id="jpsix">贵洲茅台一瓶</div> <div class="jp" id="jpseven">王者全皮肤全英雄账号</div> <div class="jp" id="jpeight">梅西亲签球衣</div> <button id="but" onclick="fn()">抽奖</button> </div> <script src="九宫格抽奖.js"></script> </body> </html>
这是九宫格的基本样式；
//通过元素class jpd命名来查找hyml里的元素 let jpd = document.getElementsByClassName('jpd') //通过元素class jp命名来查找hyml里的元素 let jp = document.getElementsByClassName('jp'); console.log(jp) //通过元素id but命名来查找hyml里的元素 let but = document.getElementById('but'); let newb = 0; //时间为500 let time = 500; let newm = 0; //从0开始记数 let count = 0; let int; let end = 0 //给每个jp都加上一个背景色 function fn() { jp[end].style.backgroundColor = "palegreen"; //rang1变色 jp[newb].style.backgroundColor = "pink"; //定时器 int = setInterval(zh, time)//代表时间 //确定中奖号 newm = Math.floor(Math.random() * jp.length); console.log(newm) but.onclick = null; } function zh() { if (newb < jp.length - 1) {//判断到最后了吗 newb++; jp[newb - 1].style.backgroundColor = "palegreen"; jp[newb].style.backgroundColor = "pink"; } else { newb = 0; count++; jp[jp.length - 1].style.backgroundColor = "palegreen"; jp[newb].style.backgroundColor = "pink"; } if (count <= 5) { if (time <= 100) { time = 100; } else { //圈数小于五圈时开始加速 time -= 20; } } else { if (time >= 500) { time = 500; } else { //圈数大于五圈时开始减速 time += 20; } } if (count > 7 && newm == newb) { clearInterval(int); count = 0; rom = 0; time = 500; end = newb newb = 0 but.onclick = fn; let text = jp[end].innerHTML; setTimeout(function() { alert("恭喜您获得：" + text); jp[newm].style.backgroundColor = "palegreen"; }, 300) } else { clearInterval(int); int = setInterval(zh, time) } }
这是js里的是用来草空数据的！
大家可以把自己喜欢的东西弄成奖品，快动手吧铁子！
这里面用到了定时器！
等我下篇给大家讲讲！
