當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS抽奖器（JS基础）
生活随笔
收集整理的這篇文章主要介紹了
JS抽奖器（JS基础）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? ? ? js抽獎(jiǎng)器考察的是對(duì)js基礎(chǔ)知識(shí)的掌握以及是否能夠熟練的運(yùn)用，代碼里注釋對(duì)每一步的講解比較詳細(xì)，跟著代碼一點(diǎn)點(diǎn)進(jìn)行下去就能自己掌握
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js抽獎(jiǎng)器</title><style>.contain{width: 620px;height: 620px;}.contain div{width: 200px;height: 200px;background-color: aqua;float: left;border: 1px solid black;}#start{background-color: white;}.ob span{position: relative;left: 78px;line-height: 200px;}#start span{position: relative;left: 78px;line-height: 200px;}#start{display: block;cursor: pointer;}</style> </head> <body><div class="contain"><div class="ob"><span>五毛錢</span></div><div class="ob"><span>五分錢</span></div><div class="ob"><span>五塊錢</span></div><div class="ob"><span>五十</span></div><div id="start" onclick="st()"><span>開始</span></div><div class="ob"><span>一百</span></div><div class="ob"><span>兩百</span></div><div class="ob"><span>五百</span></div><div class="ob"><span>一千</span></div></div><!-- 最后讓抽獎(jiǎng)器抽到的結(jié)果顯示的地方 --><span id="s"></span><button id="pay">支付</button><script>var strat = document.getElementById("start");//html中有八個(gè)class為ob的元素，所以獲取的就是長(zhǎng)度為八的一個(gè)數(shù)組var ob = document.getElementsByClassName("ob");var timer = null;var num = 0;var st = function(){//防止出現(xiàn)多個(gè)定時(shí)器if(timer == null){timer = setInterval(() => {num++;//循環(huán)一遍先將所有的元素都變?yōu)樵荚?/如果不在下一次循環(huán)之前將所有顏色清空則會(huì)出現(xiàn)多個(gè)被選中的顏色for(let i = 0;i<ob.length;i++){ob[i].style.background = 'aqua';}//隨機(jī)數(shù)并將其作為下標(biāo)作為被選中的元素更改顏色var res = Math.round(Math.random()*8+0);ob[res].style.background = 'green';//限制循環(huán)次數(shù)，清空定時(shí)器，并將最后結(jié)果賦值在結(jié)果顯示的地方if(num>8){window.clearInterval(timer);timer = null;console.log(ob[res].textContent);var s = document.getElementById("s");s.innerText = ob[res].textContent;}}, 1000);}}</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的JS抽奖器（JS基础）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序电商直播有什么优势？
- 下一篇： gradle idea java ssm