抽奖器功能
當(dāng)你想要吃一些東西時(shí)，很糾結(jié)吃什么時(shí)。這時(shí)你就可以選擇抽獎(jiǎng)器來(lái)決定
?詳細(xì)代碼
<!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>抽獎(jiǎng)器</title><style>#fa{width: 700px;height: 700px;border: 1px solid green;}#fa>div{width: 33%;height: 33%;border: 1px solid green;float: left;line-height: 200px;text-align: center;font-size: 30px;font-weight: bold;/*字體的粗細(xì)*/}#start{cursor: pointer; /* 光標(biāo)的形狀 */background-color: cadetblue;}</style> </head> <body><div id="fa"><div class="option">蘋果</div><div class="option">香蕉</div><div class="option">梨</div><div class="option">菠蘿</div><div id="start">開始抽獎(jiǎng)</div><div class="option">桃子</div><div class="option">西瓜</div><div class="option">荔枝</div><div class="option">杏</div></div><script>//點(diǎn)擊開始，觸發(fā)一個(gè)定時(shí)器//定時(shí)內(nèi)部隨機(jī)一個(gè)數(shù)，通過(guò)這個(gè)數(shù)來(lái)獲取商品所在元素。//必須設(shè)置一個(gè)時(shí)間點(diǎn)，停止定時(shí)器let but = document.getElementById('start');let options = document.getElementsByClassName('option');let timer = null;but.onclick = function(){let num = 0;//觸發(fā)一個(gè)定時(shí)器if(timer==null){timer = setInterval(() => {num++;//通過(guò)數(shù)組下標(biāo)隨機(jī)獲取具體選中元素let ran = Math.round(Math.random()*(7-0)+0);//把所有元素恢復(fù)成原樣for(let i=0;i<options.length;i++){options[i].style.backgroundColor = '#fff';}//選中元素的背景顏色options[ran].style.backgroundColor = 'orange';//設(shè)置定時(shí)器的有效時(shí)間if(num>=50){clearInterval(timer);timer = null;}}, 100);}}</script> </body> </html>總結(jié)
- 上一篇： 自己动手做网线
- 下一篇： wpsmac和pc版的区别_毕业季才发现