JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器實(shí)例詳解
你是公司的程序員,年會(huì)的時(shí)候公司要給員工抽獎(jiǎng)發(fā)福利,要求你寫(xiě)一個(gè)頁(yè)面小程序,用來(lái)隨機(jī)選出幸運(yùn)員工,分設(shè)一二三等獎(jiǎng)大致如下圖示例:
以下是點(diǎn)名器的一種思路,頁(yè)面比較簡(jiǎn)陋,只給出了滿足最基本要求的代碼戶要用到計(jì)時(shí)器,隨機(jī)數(shù)函數(shù)等
本抽獎(jiǎng)一二三等獎(jiǎng)都只設(shè)一名幸運(yùn)員工,開(kāi)始結(jié)束功能用一個(gè)按鈕實(shí)現(xiàn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>點(diǎn)名器</title> <style> .title{ font-size:50px; font-family: 800; color:red; margin:50px 430px; } #Uname{ width: 300px; height: 200px; border:3px solid green; margin-left:300px; margin-top: 0px; font-size:50px; font-weight: 800; text-align: center; line-height: 200px; float:left; } .result{ width: 300px; height: 200px; font-size: 16px; border:3px solid red; color:orange; margin-left: 100px; float:left; } .result p{ color:blue; font-size: 12px; } .btn{ width: 60px; height: 200px; margin:0 auto; margin-top: 20px; } .btn button{ width: 50px; } #prize_3,#prize_2,#prize_1{ color:red; font-size: 16px; } </style> </head> <body> <div class="title">XX公司年會(huì)抽獎(jiǎng)活動(dòng)</div> <div id="Uname" >祝君好運(yùn) </div> <div class="result"> <p>三等獎(jiǎng):</p> <div id="prize_3"></div> <p>二等獎(jiǎng):</p> <div id="prize_2"></div> <p>一等獎(jiǎng):</p> <div id="prize_1"></div> </div> <div class="btn"> <button onclick="demo()" id="bt">開(kāi)始</button> <!-- <button onclick="stop()">結(jié)束</button> --> </div> <script> //獲取顯示框的內(nèi)容 var Uname=document.getElementById('Uname'); //要隨機(jī)的員工名單 var arr=['劉備','曹操','孫權(quán)','趙云','大喬','小喬','周瑜','尚香']; //獲取按鈕信息 var btn=document.getElementById('bt'); //定義變量存放計(jì)時(shí)器 var clock=0; //定義變量存放索引值 var inde=null; var prize_3=document.getElementById('prize_3'); var prize_2=document.getElementById('prize_2'); var prize_1=document.getElementById('prize_1'); // 定義是否開(kāi)啟計(jì)時(shí)器的標(biāo)志,如果為真開(kāi)始執(zhí)行 如果為假則停止 var st=true; // 存放幸運(yùn)員工名單 prizes=[]; function demo(){ if(st){ start(); btn.innerHTML="結(jié)束"; st=false; }else{ stop(); btn.innerHTML="開(kāi)始"; st=true; } } // 開(kāi)始函數(shù) function start(){ clock=setInterval(function(){ var inde=rand(0,arr.length-1); Uname.innerHTML=arr[inde]; },50);//設(shè)置每50毫秒實(shí)行一次 } // 結(jié)束點(diǎn)名 function stop(){ //從列表最后添加元素 prizes.push(Uname.innerHTML); //關(guān)閉定時(shí)器 clearInterval(clock); //獲取員工名字對(duì)應(yīng)的索引值 arr.splice(arr.indexOf(Uname.innerHTML),1); //當(dāng)抽獎(jiǎng)次數(shù)達(dá)到三次時(shí),在屏幕上顯示幸運(yùn)員工名單 if(prizes.length>=3){ prize_3.innerHTML=prizes[0]; prize_2.innerHTML=prizes[1]; prize_1.innerHTML=prizes[2]; } } // 封裝獲取隨機(jī)數(shù) 函數(shù) function rand(m,n){ return Math.floor(Math.random()*(n-m+1)+m); } </script> </body> </html>
以上所述是小編給大家介紹的JavaScript隨機(jī)點(diǎn)名器詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- javascript實(shí)現(xiàn)的一個(gè)隨機(jī)點(diǎn)名功能
- 使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序
- JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
- JS+CSS實(shí)現(xiàn)隨機(jī)點(diǎn)名(實(shí)例代碼)
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名小功能
- JS實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- JavaScript實(shí)現(xiàn)班級(jí)隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名網(wǎng)頁(yè)
相關(guān)文章
前端實(shí)現(xiàn)列表多條件查詢/搜索功能兩種實(shí)現(xiàn)方法
我們?cè)陂_(kāi)發(fā)過(guò)程中,特別是數(shù)據(jù)庫(kù)系統(tǒng)的開(kāi)發(fā)中經(jīng)常會(huì)遇到多條件的查詢狀況這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)列表多條件查詢/搜索功能的兩種實(shí)現(xiàn)方法,需要的朋友可以參考下2024-08-08js中匿名函數(shù)的創(chuàng)建與調(diào)用方法分析
這篇文章主要介紹了js中匿名函數(shù)的創(chuàng)建與調(diào)用方法,詳細(xì)分析了匿名函數(shù)的原理與用法,以及閉包的原理分析,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12JavaScript利用時(shí)間分片實(shí)現(xiàn)高性能渲染數(shù)據(jù)詳解
為了豐富我們的知識(shí)體系,我們有必要了解并清楚當(dāng)遇到大量數(shù)據(jù)時(shí),如何才能在不卡主頁(yè)面的情況下渲染數(shù)據(jù),以及其中背后的原理,本文介紹了如何使用時(shí)間分片的方式來(lái)渲染大量數(shù)據(jù),感興趣的可以了解下2023-05-05Autocomplete Textbox Example javascript實(shí)現(xiàn)自動(dòng)完成成功
Autocomplete Textbox Example javascript實(shí)現(xiàn)自動(dòng)完成成功...2007-08-08JavaScript實(shí)現(xiàn)顯示函數(shù)調(diào)用堆棧的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)顯示函數(shù)調(diào)用堆棧的方法,實(shí)例分析了JavaScript顯示函數(shù)調(diào)用堆棧的具體作用與使用方法,需要的朋友可以參考下2016-04-04JavaScript實(shí)現(xiàn)音樂(lè)導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)音樂(lè)導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11純JS打造網(wǎng)頁(yè)中checkbox和radio的美化效果
這篇文章主要介紹了純JS打造網(wǎng)頁(yè)中checkbox和radio的美化效果,代碼簡(jiǎn)單易懂,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10