JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器效果圖的具體代碼，供大家參考，具體內(nèi)容如下
js實(shí)現(xiàn)隨機(jī)點(diǎn)名器的思路利用setTimeout()計(jì)時(shí)器實(shí)現(xiàn)隨機(jī)的效果，功能函數(shù)
function show(){ var box=window.document.getElementById('box'); var num=Math.floor((Math.random()*100000))%namelist.length; box.innerHTML=namelist[num]; mytime=setTimeout('show()',1); }
完整代碼如下：
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>點(diǎn)擊按鈕隨機(jī)點(diǎn)名-樣式布局參考</title> <style type='text/css'> #box { margin: auto; width: 660px; font-size: 66px; height: 94px; color: #138eee; text-align: center; margin-top: 200px; } #bt { margin: auto; width: 200px; text-align: center; margin-top: 75px; color: #fff; font-size: 25px; cursor: pointer; } </style> <script type='text/javascript'> var namelist=['張三','李四','王五','趙六','孫七']; var mytime=null; function doit(){ var bt=window.document.getElementById('bt'); if(mytime==null){ bt.innerHTML='停止'; show(); } else{ bt.innerHTML='開(kāi)始點(diǎn)名'; clearTimeout(mytime); mytime=null; } } function show(){ var box=window.document.getElementById('box'); var num=Math.floor((Math.random()*100000))%namelist.length; box.innerHTML=namelist[num]; mytime=setTimeout('show()',1); } </script> </head> <body style='background-color: black;'> <div id='box'>親，準(zhǔn)備好點(diǎn)名了嗎？</div> <div onclick='doit()'>開(kāi)始點(diǎn)名</div> </body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Ajax實(shí)現(xiàn)文件上傳功能(Spring MVC)2. 基于javaweb+jsp實(shí)現(xiàn)學(xué)生宿舍管理系統(tǒng)3. idea設(shè)置代碼格式化的方法步驟4. asp createTextFile生成文本文件支持utf85. Java Synchronized的使用詳解6. Python 簡(jiǎn)介7. Vue發(fā)布訂閱模式實(shí)現(xiàn)過(guò)程圖解8. 使用EF Code First搭建簡(jiǎn)易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫(kù)遷移9. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條10. xml創(chuàng)建節(jié)點(diǎn)(根節(jié)點(diǎn)、子節(jié)點(diǎn))
網(wǎng)公網(wǎng)安備