JavaScript實現隨機點名器
本文實例為大家分享了JavaScript實現隨機點名器效果圖的具體代碼，供大家參考，具體內容如下
js實現隨機點名器的思路利用setTimeout()計時器實現隨機的效果，功能函數
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備