第js實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)一個(gè)用js編寫的簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)，供大家參考，具體內(nèi)容如下

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

代碼如下：

!DOCTYPEhtml

html

head

metacharset="UTF-8"

title抽獎(jiǎng)/title

styletype="text/css"

table{

width:400px;

height:400px;

border:graysolid1px;

border-collapse:collapse;

text-align:center;

margin:0auto;

margin-top:100px;

}

.td{

border:graysolid1px;

background-color:lightskyblue;

}

.td1{

border:graysolid1px;

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

divid="blink"

抽

獎(jiǎng)了

/div

table

/table

div

inputtype="button"id="btn"value="開始"/

/div

/body

scripttype="text/javascript"

/*利用二維數(shù)據(jù)+dom操作*/

varinterval=0;

vartable=document.querySelector("table");

vararr=[

[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(variinarr){

vartr=table.insertRow();

for(varjinarr[i]){

vartd=tr.insertCell();

td.setAttribute("class","td");

td.innerHTML=arr[i][j];

}

}

//獲取所有的td標(biāo)簽數(shù)組

varcount=document.querySelectorAll("td");

functionclick1(){

//找到當(dāng)前按鈕

varbtn=document.querySelector("#btn");

//判斷按鈕狀態(tài)

if(btn.value=='開始'){

//點(diǎn)解后修改背景顏色

btn.style.backgroundColor="red";

//修改按鈕文字

btn.value="結(jié)束";

//停止繼續(xù)調(diào)用setInterval函數(shù)進(jìn)行抽獎(jiǎng)

clearInterval(interval);

interval=setInterval(function(){

varrad=Math.floor(Math.random()*25);

for(vari=0;icount.length;i++){

//通過遍歷來重新給表設(shè)置樣式

count[i].setAttribute("class","td");

if(rad===i){

//給抽到的人改變樣式

count[i].setAttribute('class','td1');

}

}

},100)

}else{

//設(shè)置背景顏色

btn.style.backgroundColor="gainsboro";

//修改按鈕文字

btn.value="開始";

clearInterval(interval);

}

}

functionchangeColor(){

varcolor="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";

color=color.split("|");

document.getE