原生js實現(xiàn)簡易抽獎系統(tǒng)
本文實例為大家分享了js實現(xiàn)簡易抽獎系統(tǒng)的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
原理:
其實這里的原理就是通過按鈕的狀態(tài)是開始抽獎還是停止 如果i=ture 那就觸發(fā)定時器 每50毫秒更換一次中獎的內(nèi)容。如果i=false,那就清除定時器,顯示最后的抽獎結(jié)果
下面我給大家畫了個更直觀的圖
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>簡易抽獎系統(tǒng)</h2> ?? ??? ?</div> ?? ??? ?<div class="body"> ?? ??? ??? ?<div> ?? ??? ??? ??? ?<span id="tip">恭喜你!獲得:</span> ?? ??? ??? ??? ?<span id="put"></span> ?? ??? ??? ?</div> ?? ??? ?</div> ?? ??? ?<div class="footer"> ?? ??? ??? ?點擊抽獎 ?? ??? ?</div> </div>
js代碼
<script> ?? ??? ?/* 獲取按鈕 */ ?? ??? ?var btn = document.querySelector('.footer'); ?? ??? ?/* 獲取提示的標簽 */ ?? ??? ?var tip = document.querySelector('#tip'); ?? ??? ?/* 獲取要輸出的標簽 */ ?? ??? ?var put = document.querySelector('#put'); ?? ??? ?/* 定義中獎的項目 */ ?? ??? ?var gift = ['QQ會員','黃鉆','綠鉆','黑鉆','紫鉆','紅鉆','藍鉆','鉆皇']; ?? ??? ?/* 定義i==true 用于判斷 */ ?? ??? ?var i = true; ?? ??? ?/* 定義定時器 */ ?? ??? ?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 = '開始抽獎'; ?? ??? ??? ??? ?i = true; ?? ??? ??? ?} ?? ??? ?} </script>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實現(xiàn)代碼
這篇文章主要介紹了javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實現(xiàn)代碼,需要的朋友可以參考下2014-05-05JS實現(xiàn)兩表格里數(shù)據(jù)來回轉(zhuǎn)移的方法
這篇文章主要介紹了JS實現(xiàn)兩表格里數(shù)據(jù)來回轉(zhuǎn)移的方法,涉及javascript鼠標事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交
在前端開發(fā)中ajax,formdata和js實現(xiàn)無刷新表單信息提交非常棒,接下來通過本文給大家介紹Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交的相關(guān)資料,需要的朋友可以參考下2016-10-10