阅读量:0
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>抽奖</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { width: 800px; height: 800px; border: 1px dashed red; position: absolute; left: 50%; margin-left: -400px; text-align: center; line-height: 100px; } .container .box, .box2 { width: 300px; height: 300px; background: red; border-radius: 50%; margin: auto; margin-top: 50px; text-align: center; line-height: 300px; } .box2 { background: deepskyblue; } #show { font-size: 30px; color: white; font-weight: bold; } #start { width: 300px; height: 50px; background: palevioletred; } </style> </head> <body> <div class="container"> <div class="box" id="box"> <span id="show"> 奖品 </span> </div> <button id="start" onclick="start()">开始抽奖</button> </div> <script type="text/javascript"> var flag = false; var goods = ["香蕉", "地狱火", "八宝粥", "宝马五元代金券", "联想电脑", "iPhoneX", "1QB", "黄钻",'练习册','谢谢惠顾']; var show = document.getElementById("show"); var _start = document.getElementById("start"); var _box = document.getElementById("box") var timer; function start() { if (!flag) { flag = true; _start.innerHTML = "停止抽奖" timer = setInterval(function() { var index = Math.floor(Math.random()*goods.length); var good = goods[index] show.innerText = good; _box.className = "box2"; }, 10) } else { flag = false; _start.innerHTML = "开始抽奖"; clearInterval(timer); // _box["className"] = "box"; _box.setAttribute("class", "box"); } } </script> </body> </html>可以根据自己的喜好设计抽奖内容，或者修改颜色。
