快捷導(dǎo)航

js實現(xiàn)隨機(jī)點名

更新時間：2021年01月19日 08:28:41 作者：搬磚大法

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

本文實例為大家分享了js實現(xiàn)隨機(jī)點名的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  div:nth-child(1) {
   width: 200px;
   height: 100px;
   background-color: burlywood;
   text-align: center;
   line-height: 100px;
  }
  
  div:nth-child(2) {
   width: 100px;
   height: 100px;
   background-color: pink;
   border-radius: 50%;
   text-align: center;
   line-height: 100px;
  }
 </style>
</head>
 
<body>
 <div>劉志遠(yuǎn)</div>
 <div>開始</div>
 <script>
  var div = document.getElementsByTagName('div');
  var btn = document.getElementsByTagName('button')[0];
  username()
 
  function username() {
   var flag = false;
   var timerId = null;
   // console.log(div);
   var arr = ['劉志遠(yuǎn)', '萬策', '李博文', '曹建瑩', '張佳祺', '趙瑞瑞', '陳全虎', '胡金朋', '耿建麗', '王如雪', '王振濤', '劉放', '張亞迪', '朱翔煜', '王奧', '薛澳飛', '劉志瑋', '胡高洋', '周暢', '趙英杰', '徐亞美', '鄭勇超', '聞吉祥', '王阿雨', '陳德帥', '申林益', '趙艷哲', ' 肖夢飛', '鮑爾欣', '代星澳', '汪青', '謝森成', '雷呂能', '丁康寧', '楊澤文', '王永杰', '侯振強(qiáng)',    '馬建成', '朱保森', '王皓圓', '孫秀婷', '靳丹丹', '李聰', '紀(jì)妍', '蘇文璇'];
 
   div[1].onclick = function() {
 
    if (flag) {
     clearInterval(timerId);
     div[1].innerHTML = '停止'
     flag = false;
    } else {
     timerId = setInterval(function() {
      var re = Math.floor(Math.random() * arr.length);
      console.log(re);
      div[0].innerHTML = arr[re];
     }, 60);
     div[1].innerHTML = '開始'
     flag = true;
    }
 
 
   }
  }
 </script>
</body>
 
</html>

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

您可能感興趣的文章:

js
點名

相關(guān)文章

微信小程序骨架屏的實現(xiàn)示例
本文主要介紹了微信小程序骨架屏的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
Javascript調(diào)用函數(shù)方法的幾種方式介紹
這篇文章主要介紹了Javascript調(diào)用函數(shù)方法的幾種方式介紹,本文講解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5種方式,需要的朋友可以參考下
2015-03-03
運用js實現(xiàn)圖層拖拽的功能
js拖拽是常見的網(wǎng)頁效果,本文將從零開始實現(xiàn)一個簡單的js插件,下面和小編來一起學(xué)習(xí)一下吧
2019-05-05
如何使用JavaScript對圖像進(jìn)行壓縮
上傳圖片時候遇到要上傳很大的圖片,上傳的時候就會很慢,所以需要對圖片進(jìn)行壓縮處理來優(yōu)化上傳功能,這篇文章主要給大家介紹了關(guān)于如何使用JavaScript對圖像進(jìn)行壓縮的相關(guān)資料,需要的朋友可以參考下
2024-03-03
javascript中caller和callee詳解
有些小伙伴可能會問caller,callee 是什么?在javascript 中有什么樣的作用?那么本篇會對于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。
2015-08-08
基于zepto.js實現(xiàn)登錄界面
這篇文章主要為大家詳細(xì)介紹了使用zepto.js，純JS寫的登錄界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
JS實現(xiàn)表單驗證功能(驗證手機(jī)號是否存在，驗證碼倒計時)
js實現(xiàn)表單驗證功能，通過js代碼驗證手機(jī)號是否存在驗證碼倒計時功能，代碼簡單易懂非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-10-10
微信小程序webview和小程序通訊實際操作指南
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進(jìn)行開發(fā)實現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于微信小程序webview和小程序通訊實際操作的相關(guān)資料,需要的朋友可以參考下
2024-07-07
js實現(xiàn)從右向左緩緩浮出網(wǎng)頁浮動層廣告的方法
這篇文章主要介紹了js實現(xiàn)從右向左緩緩浮出網(wǎng)頁浮動層廣告的方法,可實現(xiàn)右側(cè)浮動廣告的定時彈出及點擊展開、折疊等功能,非常具有實用價值,需要的朋友可以參考下
2015-05-05
在js里怎么實現(xiàn)Xcode里的callFuncN方法(詳解)
下面小編就為大家?guī)硪黄趈s里怎么實現(xiàn)Xcode里的callFuncN方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11