基于javascript實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng),供大家參考,具體內(nèi)容如下
<!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>抽獎(jiǎng)活動(dòng)</title> <style> *{ margin:0;padding:0; } #title{ color:red;text-align:center;margin:0 auto;width:240px;height:70px;padding-top:10px;background:opacity(0); } .btns{ width:190px;height:30px;margin:0px auto; } .btns span{ display:block;float:left;width:80px;height:28px;text-align:center;background:#036;color:#fff;cursor:pointer;border:1px solid #eee;border-radius:8px;font-family:"微軟雅黑";font-size:14px;line-height:28px;margin-right:10px; } #txt{ font-size:14px;color:#ccc999;text-align:center;margin:0 auto;width:190px;height:50px;padding-top:10px; } </style> <script> var mytype=["iPhone6s","iPad Air2","DELL外星人","鍵鼠套裝","1000元超市購(gòu)物卡","200元話費(fèi)充值卡","謝謝參與","品牌耳機(jī)","港澳臺(tái)7日游","50元優(yōu)惠券"],//定義獎(jiǎng)品池 timer=null, count=0; //加載時(shí)觸發(fā) window.onload=function(){ var start = document.getElementById("start"); var stop = document.getElementById("stop"); start.onclick=startFun;//這個(gè)函數(shù)后面加括號(hào),就直接調(diào)用了該函數(shù),所以不要加 stop.onclick=stopFun; //綁定鍵盤事件 document.onkeyup=function(e){ e = e || window.event; if(e.keyCode==13){ if(count==0){ startFun(); count=1; } else{ stopFun(); count=0; } } } } //點(diǎn)擊開始,標(biāo)題欄開始輪動(dòng) function startFun(){ clearInterval(timer);//開始時(shí),清除計(jì)時(shí)器,避免二次觸發(fā) var title = document.getElementById("title"); var start = document.getElementById("start"); timer = setInterval(function(){ var num= Math.floor(Math.random()*mytype.length); title.innerHTML=mytype[num]; },50); start.style.background="#ccc"; } //點(diǎn)擊停止,標(biāo)題欄停止輪動(dòng)并輸出輪動(dòng)結(jié)果 function stopFun(){ var start = document.getElementById("start"), txt = document.getElementById("txt"), title = document.getElementById("title"); clearInterval(timer);//清除計(jì)時(shí)器,停止計(jì)時(shí)器 start.style.background="#036"; } </script> <body> <div> <h2 id="title">開始抽獎(jiǎng)!</h2> </div> <div class="btns"> <span id="start">開始</span> <span id="stop">停止</span> </div> <div id="txt">支持回車鍵(Enter)開始/停止。</div> </body> </html>
效果圖:
想要學(xué)習(xí)更多關(guān)于javascript抽獎(jiǎng)功能,請(qǐng)參考此專題:javascript實(shí)現(xiàn)抽獎(jiǎng)功能
實(shí)現(xiàn)的功能就是這么簡(jiǎn)單,希望大家可以中大獎(jiǎng)哦!
- 原生js實(shí)現(xiàn)簡(jiǎn)易抽獎(jiǎng)系統(tǒng)
- 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ǎng)系統(tǒng)
- 用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
- js實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
相關(guān)文章
layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法
今天小編就為大家分享一篇layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09ExtJs中g(shù)ridpanel分組后組名排序?qū)嵗a
這篇文章主要介紹了ExtJs中g(shù)ridpanel分組后組名排序?qū)嵗a,有需要的朋友可以參考一下2013-12-12JavaScript獲取當(dāng)前網(wǎng)頁(yè)標(biāo)題(title)的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁(yè)標(biāo)題(title)的方法,涉及javascript中document.title方法的使用,需要的朋友可以參考下2015-04-04JS實(shí)現(xiàn)超過(guò)長(zhǎng)度限制后自動(dòng)跳轉(zhuǎn)下一款文本框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)超過(guò)長(zhǎng)度限制后自動(dòng)跳轉(zhuǎn)下一款文本框的方法,涉及javascript操作字符及本文框的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02解決layui的table插件無(wú)法多層級(jí)獲取json數(shù)據(jù)的問(wèn)題
今天小編就為大家分享一篇解決layui的table插件無(wú)法多層級(jí)獲取json數(shù)據(jù)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JavaScript數(shù)據(jù)庫(kù)TaffyDB用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫(kù)TaffyDB用法,實(shí)例分析了TaffyDB數(shù)據(jù)庫(kù)的定義、查詢、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本)
這篇文章主要介紹了D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本) ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05詳解webpack中的hash、chunkhash、contenthash區(qū)別
這篇文章主要介紹了詳解webpack中的hash、chunkhash、contenthash區(qū)別,詳細(xì)的介紹了hash、chunkhash、contenthash的用法和區(qū)別,有興趣的可以了解一下2018-01-01