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