當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS抽奖器（JS基础）

發(fā)布時間：2024/3/26 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS抽奖器（JS基础）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

? ? ? ? js抽獎器考察的是對js基礎知識的掌握以及是否能夠熟練的運用，代碼里注釋對每一步的講解比較詳細，跟著代碼一點點進行下去就能自己掌握

<!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抽獎器</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><span id="s"></span><button id="pay">支付</button><script>var strat = document.getElementById("start");//html中有八個class為ob的元素，所以獲取的就是長度為八的一個數(shù)組var ob = document.getElementsByClassName("ob");var timer = null;var num = 0;var st = function(){//防止出現(xiàn)多個定時器if(timer == null){timer = setInterval(() => {num++;//循環(huán)一遍先將所有的元素都變?yōu)樵荚?/如果不在下一次循環(huán)之前將所有顏色清空則會出現(xiàn)多個被選中的顏色for(let i = 0;i<ob.length;i++){ob[i].style.background = 'aqua';}//隨機數(shù)并將其作為下標作為被選中的元素更改顏色var res = Math.round(Math.random()*8+0);ob[res].style.background = 'green';//限制循環(huán)次數(shù)，清空定時器，并將最后結果賦值在結果顯示的地方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>

總結

以上是生活随笔為你收集整理的JS抽奖器（JS基础）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

js
基础