原生js實(shí)現(xiàn)簡(jiǎn)易抽獎(jiǎng)系統(tǒng)
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)易抽獎(jiǎng)系統(tǒng)的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
原理:
其實(shí)這里的原理就是通過(guò)按鈕的狀態(tài)是開(kāi)始抽獎(jiǎng)還是停止 如果i=ture 那就觸發(fā)定時(shí)器 每50毫秒更換一次中獎(jiǎng)的內(nèi)容。如果i=false,那就清除定時(shí)器,顯示最后的抽獎(jiǎng)結(jié)果
下面我給大家畫了個(gè)更直觀的圖
HTML結(jié)構(gòu)與樣式
<!doctype html> <html lang="en"> <head> ?? ?<meta charset="UTF-8"> ?? ?<title>Document</title> ?? ?<style> ?? ??? ?* { ?? ??? ??? ?margin: 0; ?? ??? ??? ?padding: 0; ?? ??? ?} ?? ??? ?h2 { ?? ??? ??? ?font-weight: normal; ?? ??? ?} ?? ??? ?.box { ?? ??? ??? ?width: 450px; ?? ??? ??? ?height: auto; ?? ??? ??? ?background: #fff; ?? ??? ??? ?border-radius: 3px; ?? ??? ??? ?margin: 50px auto; ?? ??? ??? ?padding-bottom: 1em; ?? ??? ??? ?box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 5px 15px 0 rgba(0, 0, 0, 0.19); ?? ??? ?} ?? ??? ?.header { ?? ??? ??? ?width: 100%; ?? ??? ??? ?height: auto; ?? ??? ??? ?padding: 0.5em 0.8em; ?? ??? ??? ?border-bottom: 1px solid #ccc; ?? ??? ??? ?box-sizing: border-box; ?? ??? ?} ?? ??? ?.body { ?? ??? ??? ?width: 100%; ?? ??? ??? ?height: auto; ?? ??? ??? ?text-align: center; ?? ??? ?} ?? ??? ?.body:after { ?? ??? ??? ?content: ""; ?? ??? ??? ?display: block; ?? ??? ??? ?clear: both; ?? ??? ?} ?? ??? ?.body > div { ?? ??? ??? ?width: 180px; ?? ??? ??? ?margin: 0 auto; ?? ??? ?} ?? ??? ?.body > div > span { ?? ??? ??? ?padding-top: 1em; ?? ??? ??? ?float: left; ?? ??? ?} ?? ??? ?#tip { ?? ??? ??? ?display: none; ?? ??? ?} ?? ??? ?.footer { ?? ??? ??? ?width: 180px; ?? ??? ??? ?height: 30px; ?? ??? ??? ?background: #2ab8ff; ?? ??? ??? ?line-height: 30px; ?? ??? ??? ?text-align: center; ?? ??? ??? ?margin: 1em auto; ?? ??? ??? ?color: #ccc; ?? ??? ??? ?border: 1px solid #2193cc; ?? ??? ??? ?border-radius: 3px; ?? ??? ??? ?cursor: pointer; ?? ??? ?} ?? ??? ?.footer:hover { ?? ??? ??? ?background: #4ec1fb; ?? ??? ?} ?? ?</style> </head> <body> ?? ?<div class="box"> ?? ??? ?<div class="header"> ?? ??? ??? ?<h2>簡(jiǎn)易抽獎(jiǎng)系統(tǒng)</h2> ?? ??? ?</div> ?? ??? ?<div class="body"> ?? ??? ??? ?<div> ?? ??? ??? ??? ?<span id="tip">恭喜你!獲得:</span> ?? ??? ??? ??? ?<span id="put"></span> ?? ??? ??? ?</div> ?? ??? ?</div> ?? ??? ?<div class="footer"> ?? ??? ??? ?點(diǎn)擊抽獎(jiǎng) ?? ??? ?</div> </div>
js代碼
<script> ?? ??? ?/* 獲取按鈕 */ ?? ??? ?var btn = document.querySelector('.footer'); ?? ??? ?/* 獲取提示的標(biāo)簽 */ ?? ??? ?var tip = document.querySelector('#tip'); ?? ??? ?/* 獲取要輸出的標(biāo)簽 */ ?? ??? ?var put = document.querySelector('#put'); ?? ??? ?/* 定義中獎(jiǎng)的項(xiàng)目 */ ?? ??? ?var gift = ['QQ會(huì)員','黃鉆','綠鉆','黑鉆','紫鉆','紅鉆','藍(lán)鉆','鉆皇']; ?? ??? ?/* 定義i==true 用于判斷 */ ?? ??? ?var i = true; ?? ??? ?/* 定義定時(shí)器 */ ?? ??? ?var Timer; ?? ??? ?var n = 0; ?? ??? ?btn.onclick=function() { ?? ??? ??? ?if (i == true) { ?? ??? ??? ??? ?btn.style.background = '#f1516c'; ?? ??? ??? ??? ?btn.style.borderColor = '#db2745'; ?? ??? ??? ??? ?tip.style.display = 'block'; ?? ??? ??? ??? ?Timer = setInterval(function() { ?? ??? ??? ??? ??? ?n++; ?? ??? ??? ??? ??? ?if (n == gift.length) { ?? ??? ??? ??? ??? ??? ?n = 0; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ?put.innerHTML = gift[n]; ?? ??? ??? ??? ?},50) ?? ??? ??? ??? ?btn.innerHTML = '停止'; ?? ??? ??? ??? ?i = false; ?? ??? ??? ?}else { ?? ??? ??? ??? ?btn.style.background = '#2ab8ff'; ?? ??? ??? ??? ?btn.style.borderColor = '#2193cc'; ?? ??? ??? ??? ?clearInterval(Timer); ?? ??? ??? ??? ?btn.innerHTML = '開(kāi)始抽獎(jiǎng)'; ?? ??? ??? ??? ?i = true; ?? ??? ??? ?} ?? ??? ?} </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)系統(tǒng)
- 基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)
- 慕課網(wǎng)題目之js實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)功能
- JavaScript-定時(shí)器0~9抽獎(jiǎng)系統(tǒng)詳解(代碼)
- js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)
- 基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
- javascript實(shí)現(xiàn)可鍵盤控制的抽獎(jiǎng)系統(tǒng)
- 用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
- js實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
相關(guān)文章
JavaScript實(shí)現(xiàn)學(xué)生在線做題計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)學(xué)生在線做題計(jì)時(shí)器功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12javascript制作的網(wǎng)頁(yè)側(cè)邊彈出框思路及實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript制作的網(wǎng)頁(yè)側(cè)邊彈出框思路及實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-05-05javascript實(shí)現(xiàn)緩動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)緩動(dòng)動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09js 鍵盤記錄實(shí)現(xiàn)(兼容FireFox和IE)
用js實(shí)現(xiàn)鍵盤記錄,要關(guān)注瀏覽器的三種按鍵事件類型,即keydown,keypress和keyup,它們分別對(duì)應(yīng)onkeydown、onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會(huì)產(chǎn)生所有這三種事件,依次是keydown,keypress,然后是按鍵釋放時(shí)候的keyup。2010-02-02JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法
這篇文章主要介紹了JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05Bootstrap每天必學(xué)之彈出框(Popover)插件
Bootstrap每天必學(xué)之彈出框(Popover)插件,彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API(Bootstrap Data API)來(lái)填充,如何實(shí)現(xiàn)請(qǐng)參考本文2016-04-04JavaScript中boolean類型之三種情景實(shí)例代碼
下面小編就為大家?guī)?lái)一篇JavaScript中boolean類型之三種情景實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11Ajax+FormData+javascript實(shí)現(xiàn)無(wú)刷新表單信息提交
在前端開(kāi)發(fā)中ajax,formdata和js實(shí)現(xiàn)無(wú)刷新表單信息提交非常棒,接下來(lái)通過(guò)本文給大家介紹Ajax+FormData+javascript實(shí)現(xiàn)無(wú)刷新表單信息提交的相關(guān)資料,需要的朋友可以參考下2016-10-10javascript數(shù)字驗(yàn)證的實(shí)例代碼(推薦)
下面小編就為大家?guī)?lái)一篇javascript數(shù)字驗(yàn)證的實(shí)例代碼(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08