HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #wrap{ text-align: center; width:500px; margin: 100px auto; position: relative; } #ul1{ width: 303px; height: 303px; margin: 50px auto; padding:0; border-top:1px solid black; border-left: 1px solid black; } #ul1 li{ float: left; border-right: 1px solid black; border-bottom: 1px solid black; list-style: none; width: 100px; height: 100px; line-height: 100px; text-align: center; } #tooltips{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; z-index: 999; display: none; } #info{ width: 400px; height: 200px; background-color: white; margin: 150px auto; } #info .title{ width: 100%; height: 40px; background-color: #009f95; line-height: 40px; color: white; padding-left: 20px; box-sizing: border-box; } #info .btn button{ background-color: #009f95; color: white; outline: none; font-size: 10px; width:60px; height: 30px; margin-left: 300px; } #info .content { height: 120px; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div id="wrap"> <button id="btn">开始抽奖</button> <button id="btn2">停止</button> <ul id="ul1"> <li>鼠标</li> <li>1000万</li> <li>100优惠券</li> <li>很遗憾</li> <li>键盘</li> <li>iphoneX</li> <li>很遗憾</li> <li>迪拜10日游</li> <li>很遗憾</li> </ul> </div> <!-- 提示信息 --> <div id="tooltips"> <div id="info"> <div class="title">信息</div> <div class="content" id="content-z">恭喜你，中奖了</div> <div class="btn"> <button id="confirm">确定</button> </div> </div> </div> <script type="text/javascript"> //思路： 1 实现红色背景切换 2 当运动停止，弹出对话框--用js去修改tooltips的display 变为block var oStart = document.getElementById("btn") var aLi = document.getElementsByTagName("li") var oStop = document.getElementById("btn2") var oTooltips = document.getElementById("tooltips") var oConfirm = document.getElementById("confirm") var oContentz = document.getElementById("content-z") var nowIndex = 0 var timer = null oStart.onclick = function(){ clearInterval(timer) timer = setInterval(function(){ for(var i = 0;i<aLi.length;i++){ aLi[i].style.backgroundColor = "white" } aLi[nowIndex].style.backgroundColor = "red" nowIndex = (nowIndex+1) % (aLi.length) },10) } oStop.onclick = function(){ clearInterval(timer) oTooltips.style.display = "block" var zhong_jiang = aLi[nowIndex].innerText console.log(zhong_jiang) if(zhong_jiang == "很遗憾"){ oContentz.innerText = "很遗憾，没有中奖" }else{ oContentz.innerText = "恭喜你，抽中了" + zhong_jiang + "!" } } oConfirm.onclick = function(){ oTooltips.style.display = "none" for(var i = 0;i<aLi.length;i++){ aLi[i].style.backgroundColor = "white" } } </script> </body> </html>