js實現簡單的抽獎系統(tǒng)

更新時間：2022年03月09日 11:56:53 作者：か逸辰か

這篇文章主要為大家詳細介紹了js實現簡單的抽獎系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一個用js編寫的簡單的抽獎系統(tǒng)，供大家參考，具體內容如下

效果圖如圖所示：字節(jié)帶閃動，點擊開始，可進行抽獎，并且按鈕變?yōu)榻Y束按鈕，然后點擊結束按鈕，可以結束，并抽獎成功。

代碼如下：

<!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");
?? ??? ??? ?//判斷按鈕狀態(tài)
?? ??? ??? ?if(btn.value == '開始') {
?? ??? ??? ??? ?//點解后修改背景顏色
?? ??? ??? ??? ?btn.style.backgroundColor = "red";
?? ??? ??? ??? ?//修改按鈕文字
?? ??? ??? ??? ?btn.value = "結束";
?? ??? ??? ??? ?//停止繼續(xù)調用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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: