JavaScript實現(xiàn)隨機點名器
本文實例為大家分享了JavaScript實現(xiàn)隨機點名器效果圖的具體代碼，供大家參考，具體內(nèi)容如下
js實現(xiàn)隨機點名器的思路利用setTimeout()計時器實現(xiàn)隨機的效果，功能函數(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>點擊按鈕隨機點名-樣式布局參考</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='開始點名'; 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'>親，準備好點名了嗎？</div> <div onclick='doit()'>開始點名</div> </body></html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. 利用CSS3新特性創(chuàng)建透明邊框三角2. html清除浮動的6種方法示例3. CSS代碼檢查工具stylelint的使用方法詳解4. Vue3使用JSX的方法實例(筆記自用)5. vue實現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細教程6. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)7. 詳解CSS偽元素的妙用單標簽之美8. 使用css實現(xiàn)全兼容tooltip提示框9. JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析10. 不要在HTML中濫用div
網(wǎng)公網(wǎng)安備