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='開始點(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()'>開始點(diǎn)名</div> </body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 詳解Android studio 動(dòng)態(tài)fragment的用法2. Android如何加載Base64編碼格式圖片3. 解決Android studio xml界面無法預(yù)覽問題4. 圖文詳解vue中proto文件的函數(shù)調(diào)用5. 什么是python的自省6. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁效果(實(shí)例代碼)7. Vuex localStorage的具體使用8. php模擬實(shí)現(xiàn)斗地主發(fā)牌9. vue 使用localstorage實(shí)現(xiàn)面包屑的操作10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)
網(wǎng)公網(wǎng)安備