js實現簡單的抽獎系統
一個用js編寫的簡單的抽獎系統,供大傢參考,具體內容如下
效果圖如圖所示:字節帶閃動,點擊開始,可進行抽獎,並且按鈕變為結束按鈕,然後點擊結束按鈕,可以結束,並抽獎成功。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>抽獎</title> <style type="text/css"> table { width: 400px; height: 400px; border: gray solid 1px; border-collapse: collapse; text-align: center; margin: 0 auto; margin-top: 100px; } .td { border: gray solid 1px; background-color: lightskyblue; } .td1 { border: gray solid 1px; background-color: red; } td:hover { background-color: cornflowerblue; } div { width: 100px; height: 40px; margin-left: auto; margin-right: auto; margin-top: 20px; } #btn { width: 100px; height: 40px; } #blink{ width: 300px; height: 90px; margin-left: auto; margin-right: auto; margin-top: 20px; font-size: 70px; font: "微軟雅黑"; text-align: center; font-weight: bold; } </style> </head> <body> <div id="blink"> 抽 獎 瞭 </div> <table> </table> <div> <input type="button" id="btn" value="開始" onclick="click1()" /> </div> </body> <script type="text/javascript"> /*利用二維數據+dom操作*/ var interval = 0; var table = document.querySelector("table"); var arr = [ [1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25] ] for(var i in arr) { var tr = table.insertRow(); for(var j in arr[i]) { var td = tr.insertCell(); td.setAttribute("class", "td"); td.innerHTML = arr[i][j]; } } //獲取所有的td標簽數組 var count = document.querySelectorAll("td"); function click1() { //找到當前按鈕 var btn = document.querySelector("#btn"); //判斷按鈕狀態 if(btn.value == '開始') { //點解後修改背景顏色 btn.style.backgroundColor = "red"; //修改按鈕文字 btn.value = "結束"; //停止繼續調用setInterval函數進行抽獎 clearInterval(interval); interval = setInterval(function() { var rad = Math.floor(Math.random() * 25); for(var i = 0; i < count.length; i++) { //通過遍歷來重新給表設置樣式 count[i].setAttribute("class", "td"); if(rad === i) { //給抽到的人改變樣式 count[i].setAttribute('class', 'td1'); } } }, 100) } else { //設置背景顏色 btn.style.backgroundColor = "gainsboro"; //修改按鈕文字 btn.value = "開始"; clearInterval(interval); } } function changeColor() { var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color = color.split("|"); document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)]; } setInterval("changeColor()", 200); </script> </html>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。