要求實現功能： 1.點擊左側按鍵，開始抽獎，點擊右側按鍵，停止抽獎； 2.敲擊回車鍵，開始抽獎，再次敲擊回車鍵，停止抽獎； 3.開始抽獎後，左側按鈕變色； html： css: JavaScript: ...
要求實現功能：
1.點擊左側按鍵，開始抽獎，點擊右側按鍵，停止抽獎；
2.敲擊回車鍵，開始抽獎，再次敲擊回車鍵，停止抽獎；
3.開始抽獎後，左側按鈕變色；
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽獎</title> <link rel="stylesheet" href="style.css"> <script src="eventUtil.js"></script> <script src="js.js"></script> </head> <body> <div class="box"> <div id="header">開始抽獎啦！</div> <div id="btn"> <span id="start">開始</span> <span id="stop">結束</span> </div> </div> </body> </html>
css:
body{ margin: 0; padding: 0; } .box{ width: 400px; height: 200px; border: 1px solid #0C4E7C; margin: 0 auto; } #header{ color:darkred; font-size: 24px; text-align: center; width: 400px; height: 60px; line-height: 60px; } #btn{ width: 200px; overflow: hidden; margin: 30px auto 0; } #btn span{ cursor: pointer; border: 2px solid #a09a09; border-radius: 7px; margin-right: 10px; color: #000; display: inline-block; height: 40px; width: 80px; background-color: #f2ec55; line-height: 40px; text-align: center; }
JavaScript:
var date = ["謝謝參與", "謝謝參與", "謝謝參與", "50元話費", "ipad", "佳能相機", "蘋果手機", "3DS", "switch", "1000元超市購物卡"]; var timer = null; var flag = 0; window.onload = function () { // var header = document.getElementById("header");優化前 var start = document.getElementById("start"); var stop = document.getElementById("stop"); //滑鼠抽獎 eventUtil.addHandler(start, "click", getStart); eventUtil.addHandler(stop, "click", getStop); //鍵盤抽獎； document.onkeyup = function (event) { var e = event || window.event; //檢測按鍵鍵值； // console.log(e.keyCode); if (e.keyCode === 13) { if (flag === 0) { getStart(); flag = 1; } else { getStop(); flag = 0; } } }; function getStart() { clearInterval(timer); var header = document.getElementById("header");//優化後 timer = setInterval(function () { //代碼優化前 //var x = parseInt(Math.random()*10); var random = Math.floor(Math.random() * date.length); header.innerHTML = date[random]; }, 50); start.style.backgroundColor = "#999"; flag = 1; } function getStop() { clearInterval(timer); start.style.backgroundColor = "#f2ec55"; flag = 0; } };
