快捷導(dǎo)航

javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解

更新時(shí)間：2020年07月28日 16:40:09 作者：正好00

這篇文章主要介紹了javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名

1.最初的樣子如下

2.點(diǎn)擊開(kāi)始點(diǎn)名，上面一行的文字變成名字，名字在不停的變化，開(kāi)始點(diǎn)名變成停止點(diǎn)名，如下

3.點(diǎn)擊停止點(diǎn)名，上面名字不動(dòng)，停止點(diǎn)名變成開(kāi)始點(diǎn)名，如下：李四同學(xué)回答老師問(wèn)題

代碼如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
  
   #d2{cursor:pointer;}/*讓鼠標(biāo)移到開(kāi)始點(diǎn)名的時(shí)候變成手型*/
  </style>
 </head>
 <body>
 <div id="d1">親，準(zhǔn)備好了嗎？</div> 
  <div id="d2" onclick="fun()">開(kāi)始點(diǎn)名</div><!--觸發(fā)事件句柄onlick，調(diào)用fun函數(shù)-->
  <script>
   
   var mytime=null;
   var d1=document.getElementById("d1");
   var d2=document.getElementById("d2");
   function fun()
   {if(mytime==null)
    {d2.innerHTML="停止點(diǎn)名";
    show();
    
    }
   else {
    
     clearTimeout(mytime);
     d2.innerHTML="開(kāi)始點(diǎn)名";
     mytime=null;
   }
  }
   function show()
   {var s=["張三","李四","王五","王二","小二"];
    var name=Math.floor(Math.random()*10%s.length);//讓name在下標(biāo)0-4之間取得
    d1.innerHTML=s[name];
    mytime=setTimeout("show()",1);
   
   }
   </script>
  </body>
</html>

注意：random是Math中的函數(shù)，所以要寫(xiě)成Math.random()

到此這篇關(guān)于javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解的文章就介紹到這了,更多相關(guān)javascript 使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

怎么引入(調(diào)用)一個(gè)JS文件
這篇文章主要介紹了引入(調(diào)用)一個(gè)JS文的方法，非常不錯(cuò)介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-05-05
JS實(shí)現(xiàn)pasteHTML兼容ie,firefox,chrome的方法
這篇文章主要介紹了JS實(shí)現(xiàn)pasteHTML兼容ie,firefox,chrome的方法,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06
js實(shí)現(xiàn)最短的XML格式化工具實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)最短的XML格式化工具,實(shí)例分析了基于jquery-latest.js實(shí)現(xiàn)XML代碼格式化的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JS實(shí)現(xiàn)獲取時(shí)間已經(jīng)時(shí)間與時(shí)間戳轉(zhuǎn)換
這篇文章主要為大家提供了用JavaScript編寫(xiě)的獲取時(shí)間的類(lèi)，以及時(shí)間戳轉(zhuǎn)時(shí)間的三種格式，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-03-03
總結(jié)分享10個(gè)JavaScript代碼優(yōu)化小tips
這篇文章主要介紹了總結(jié)分享10個(gè)JavaScript代碼優(yōu)化小tips，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-07-07
基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
利用babel將es6語(yǔ)法轉(zhuǎn)es5的簡(jiǎn)單示例
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器,babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以下面這篇文章就來(lái)給大家詳細(xì)介紹了關(guān)于利用babel將es6語(yǔ)法轉(zhuǎn)es5的相關(guān)資料，文章通過(guò)示例介紹的非常詳細(xì)，需要的朋友可以參考下。
2017-12-12
js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法,可實(shí)現(xiàn)js滾動(dòng)特效中的鼠標(biāo)懸停停止圖片滾動(dòng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動(dòng)態(tài)操作select中option節(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
網(wǎng)頁(yè)加載時(shí)頁(yè)面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁(yè)內(nèi)容
網(wǎng)頁(yè)加載時(shí)頁(yè)面顯示進(jìn)度條（加載完成時(shí)顯示網(wǎng)頁(yè)內(nèi)容）,這種效果在瀏覽網(wǎng)頁(yè)很常見(jiàn)，本文也介紹一種實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12