快捷導(dǎo)航

JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器

更新時(shí)間：2020年03月25日 11:34:37 作者：披風(fēng)超人

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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 id="bodybj" style="background-color: black;">
  <div id="box">親，準(zhǔn)備好點(diǎn)名了嗎？</div>
  <div id="bt" onclick="doit()">開始點(diǎn)名</div>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript設(shè)計(jì)模式手寫示例講解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式手寫示例，設(shè)計(jì)模式（Design pattern）是解決軟件開發(fā)某些特定問題而提出的一些解決方案也可以理解成解決問題的一些思路。通過設(shè)計(jì)模式可以幫助我們?cè)鰪?qiáng)代碼的可重用性、可擴(kuò)充性、可維護(hù)性、靈活性好
2022-12-12
淺談js中子頁面父頁面方法變量相互調(diào)用
下面小編就為大家?guī)硪黄獪\談js中子頁面父頁面方法變量相互調(diào)用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript中保留兩位小數(shù)的方法總結(jié)
這篇文章主要把相關(guān)保留兩位小數(shù)的方法總結(jié)了一下，不同的場(chǎng)景用不同的方法，即用即取，文中的示例代碼講解詳細(xì)，?感興趣的小伙伴可以了解一下
2023-06-06
正則表達(dá)式基本語法及表單驗(yàn)證操作詳解【基于JS】
這篇文章主要介紹了正則表達(dá)式基本語法及表單驗(yàn)證操作,較為詳細(xì)的分析了正則表達(dá)式的基本語法以及基于JS實(shí)現(xiàn)的表單正則驗(yàn)證操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
JavaScript?原始包裝類型匯總
這篇文章主要介紹了JavaScript?原始包裝類型匯總，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-05-05
js實(shí)現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法
這篇文章主要介紹了js實(shí)現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法,涉及javascript鼠標(biāo)操作及css修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
JavaScript中?.?和??分別是什么詳解
在項(xiàng)目中我們往往要做很多很多的空值判斷進(jìn)行容錯(cuò)處理,往往伴隨著三目運(yùn)算、與或、if else來使用,下面這篇文章主要給大家介紹了關(guān)于JavaScript中?.?和??分別是什么的相關(guān)資料,需要的朋友可以參考下
2023-02-02
向大師們學(xué)習(xí)Javascript（視頻與PPT）
在開始之前，先與大家一起認(rèn)識(shí)下這篇文章的主角，世界級(jí)的javascript大牛們：Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas?？疵忠苍S挺陌生，但是如果你對(duì)javascript還算熟悉，一定不會(huì)對(duì)他們的作品陌生。
2009-12-12
JS中跳轉(zhuǎn)傳參的幾種常用方法總結(jié)
在前端開發(fā)中我們常常需要從一個(gè)跳到另一個(gè)頁面,并且將當(dāng)前頁面的數(shù)據(jù)傳遞過去,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JS中跳轉(zhuǎn)傳參的幾種常用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存實(shí)例詳解
這篇文章主要介紹了uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-11-11