简易版：
<!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>demo</title> </head> <body> <button>开始</button> <button>停止</button> <p></p> </body> <script> var btn=document.querySelectorAll("button")[0]; var btn1 = document.querySelectorAll("button")[1]; var p=document.querySelector("p"); var timer=null; var arrs = ["一等奖", "二等奖", "三等奖", "谢谢", "特等奖"]; btn.onclick=()=>{ timer = setInterval(() => { clearInterval(timer); var arr = arrs[Math.floor(Math.random() * arrs.length)]; p.innerHTML = arr; }, 10); } btn1.onclick=()=>{ clearInterval(timer) } </script> </html>
升级版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .title { font-size: 24px; font-weight: bold; width: 400px; height: 70px; margin: 0 auto; padding-top: 30px; text-align: center; color: #f00; } .btns { width: 190px; height: 30px; margin: 0 auto; } .btns span { font-family: '微软雅黑'; font-size: 14px; line-height: 27px; display: block; float: left; width: 80px; height: 27px; margin-right: 10px; cursor: pointer; text-align: center; color: #fff; border: 1px solid #eee; border-radius: 7px; background: #036; } </style> </head> <body> <div id="title" class="title">开始抽奖啦！</div> <div class="btns"> <span id="play">开 始</span> <span id="stop">停 止</span> </div> </body> <script type="text/javascript"> var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'], timer = null, //定时器 flag = 0; //用于键盘事件状态标记 window.onload = function() { var play = document.getElementById('play'), stop = document.getElementById('stop'); // 开始抽奖 play.onclick = playFun; stop.onclick = stopFun; // 键盘事件 document.onkeyup = function(event) { event = event || window.event; if (event.keyCode == 13) { if (flag == 0) { playFun(); flag = 1; } else { stopFun(); flag = 0; } } } } // 开始抽奖 function playFun() { var title = document.getElementById('title'); var play = document.getElementById('play'); //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快 clearInterval(timer); timer = setInterval(function() { var random = Math.floor(Math.random() * data.length); title.innerHTML = data[random]; }, 50); play.style.background = '#999'; } //停止抽奖 function stopFun() { clearInterval(timer); var play = document.getElementById('play'); play.style.background = '#036'; } </script> </html>
