快捷導(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)文章

JavaScript判斷FileUpload控件上傳文件類(lèi)型
在CS后臺(tái)代碼中獲取FileUpload控件上傳文件的類(lèi)型是比較容易的！那么，能否在客戶端通過(guò)JavaScript腳本判斷FileUpload上傳文件類(lèi)型呢？答案是可以的，下面通過(guò)一個(gè)小例子為大家展示
2015-09-09
一文搞懂JavaScript如何實(shí)現(xiàn)圖片懶加載
圖片懶加載，往往作為減少首頁(yè)白屏?xí)r間的一個(gè)解決方案而出現(xiàn)。本文將通過(guò)示例帶大家一起探究一下JavaScript是如何實(shí)現(xiàn)圖片懶加載的，感興趣的可以了解一下
2022-06-06
使用typeof方法判斷undefined類(lèi)型
使用typeof方法，typeof 返回的是字符串,其中就有一個(gè)是undefined，下面是示例代碼，大家可以看看
2014-09-09
js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果
這篇文章主要為大家詳細(xì)介紹了js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JavaScript獲取XML數(shù)據(jù)附示例截圖
這篇文章主要介紹了JavaScript獲取XML數(shù)據(jù)的方法,需要的朋友可以參考下
2014-03-03
javascript中mouseover、mouseout使用詳解
這篇文章主要介紹了javascript中mouseover、mouseout使用詳解的相關(guān)資料,需要的朋友可以參考下
2015-07-07
教你用幾十行js實(shí)現(xiàn)很炫的canvas交互特效
HTML5中的大部分動(dòng)畫(huà)都是通過(guò)Canvas實(shí)現(xiàn),因?yàn)镃anvas就像一塊畫(huà)布,我們可以通過(guò)調(diào)用腳本在Canvas上繪制任意形狀,甚至是制作動(dòng)畫(huà),這篇文章主要給大家介紹了關(guān)于用幾十行js實(shí)現(xiàn)很炫的canvas交互特效的相關(guān)資料,需要的朋友可以參考下
2021-11-11
只有 20 行的 JavaScript 模板引擎實(shí)例詳解
這篇文章主要介紹了只有 20 行的 JavaScript 模板引擎,結(jié)合實(shí)例形式分析了JavaScript 模板引擎實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2020-05-05
前端判斷節(jié)假日的詳細(xì)代碼舉例
因?yàn)橐鲆粋€(gè)日歷控件,遇到國(guó)家法定節(jié)假日,怎么實(shí)現(xiàn)此功能呢?這篇文章主要給大家介紹了關(guān)于前端判斷節(jié)假日的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2024-01-01