快捷導(dǎo)航

如何使用原生Js實(shí)現(xiàn)隨機(jī)點(diǎn)名詳解

更新時(shí)間：2021年01月06日 14:12:29 作者：CV_Di

這篇文章主要給大家介紹了關(guān)于如何使用原生Js實(shí)現(xiàn)隨機(jī)點(diǎn)名的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

使用原生Js實(shí)現(xiàn)隨機(jī)點(diǎn)名

最近學(xué)了一點(diǎn)前端內(nèi)容，老師讓用js設(shè)計(jì)一個(gè)班里的隨機(jī)點(diǎn)名器。就嘗試寫了一個(gè)，具體實(shí)現(xiàn)效果如圖：

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>點(diǎn)名</title>
  <link href="../callTheRoll/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">

</head>
<style>
  div {
    float: left;
  }
  
  button {
    background-color: moccasin;
    margin: 30px;
    height: 50px;
    width: 150px;
    border: rgb(245, 165, 165) 1px solid;
    font-size: 18px;
  }
  
  .wai {
    margin-left: 200px;
    width: 1300px;
  }
  
  .name {
    height: 40px;
    width: 100px;
    margin: 4px;
    padding: 10px;
    font-size: 18px;
    background-color: mistyrose;
  }
</style>

<!-- onload ： 事件會(huì)在頁(yè)面或圖像加載完成后立即發(fā)生。 -->
<body onload="A()">
  <div class="wai" align="center">
    <table>
      <button class="start" onclick="start()">開始</button>
      <button class="end" onclick="end()">結(jié)束</button>
    </table>
    <div id="names"></div>
  </div>

  <script type="text/javascript">
    var nameArr = [
      "空", "張家家", "許雪雪", "王橘橘", "陳韻", "馬本本", "張志志", "唐豪豪", "高洋洋", "朱陽(yáng)陽(yáng)", "王山山", "空",
      "尹方方", "王零零", "李遠(yuǎn)遠(yuǎn)", "吳杰", "李玉玉", "李雯雯", "步一一", "崔明明", "肖金金", "陳晴晴", "趙飛飛", "空",
      "李英英", "李洋陽(yáng)", "劉俊郡", "王泊", "廉云云", "王子俊", "康三三", "李浩浩", "張藝藝", "徐葉葉", "李宏宏", "雷康康",
      "張青青", "王樂樂", "空", "楊童童", "張君君", "孫明", "何龍龍", "鄭軒軒", "任平平", "孫超超", "空", "賀濤濤",
      "空", "空", "空", "空", "熊秀秀", "薄嘉嘉", "薛萬(wàn)萬(wàn)", "尹飛", "張杰", "胡萬(wàn)萬(wàn)", "空", "馬文文"
    ];
    var index = 0;
    var k = 1; // 記錄不為空的座位

    // 生成作為表
    function A() {
      for (var i = 0; i < nameArr.length; i++) {
        if (nameArr[i].length > 1) {
          // 創(chuàng)建div標(biāo)簽（html元素）
          var div = document.createElement("div");
          div.setAttribute("class", "name");
          div.setAttribute("id", index++ + "");
          var text = document.createTextNode(nameArr[i]);
          div.appendChild(text);
          // 添加元素
          document.getElementById("names").appendChild(div);

          // 每排12人，所以每隔12，添加一個(gè)換行符
          if ((i + 1) % 12 == 0) {
            var br = document.createElement("br");
            document.getElementById("names").appendChild(br);
          }
          k++; // 添加一個(gè)學(xué)生，k自增1，記錄學(xué)生（不為空的座位）個(gè)數(shù)
        } else {
          var div = document.createElement("div");
          div.setAttribute("class", "name");

          // div.setAttribute("id", index++ + "");
          // 如果當(dāng)前元素長(zhǎng)度小于等于1時(shí)，則代表當(dāng)前座位為空，所以不給當(dāng)前div添加id屬性，方便后續(xù)隨機(jī)選人時(shí)，避開空座位

          var text = document.createTextNode(nameArr[i]);
          div.appendChild(text);
          // 添加元素
          document.getElementById("names").appendChild(div);
          if ((i + 1) % 12 == 0) {
            var br = document.createElement("br");
            document.getElementById("names").appendChild(br);
          }
        }

      }
    }

    // 定義一個(gè)id標(biāo)志
    var index2 = -1;

    function restore() {
      // 還原顏色
      if (index2 != -1) {
        document.getElementById(index2 + "").style.cssText = "background: mistyrose";
      }
      // 生成隨機(jī)數(shù)，用K生成隨機(jī)數(shù)，此時(shí)K代表不為空的作為個(gè)數(shù)
      var num = Math.floor(Math.random() * k);
      document.getElementById(num + "").style.cssText = "background-color:red";
      index2 = num; // 記錄當(dāng)前被選中的id，在下次執(zhí)行該函數(shù)時(shí)，將顏色還原
    }

    var time; // 用于接收計(jì)時(shí)器，方便關(guān)計(jì)時(shí)器時(shí)操作
    var n = 1; // 定義狀態(tài)正在執(zhí)行 n=0 , 已經(jīng)結(jié)束 n=1

    function start() {
      if (n == 1) {
        // DOM setInterval()方法 計(jì)時(shí)器
        time = setInterval("restore()", 80);
        n = 0;
      }
    }

    function end() {
      if (n == 0) {
        clearInterval(time);
        alert("請(qǐng)" + document.getElementById(index2 + "").innerHTML + "同學(xué)回答問題");
        n = 1;
      }
    }
  </script>
</body>

</html>

在這里對(duì)計(jì)時(shí)器做一下介紹：

	setInterval(code，millisec)，這兩個(gè)參數(shù)都是必須的；
			第一個(gè)參數(shù)是要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
			第二個(gè)參數(shù)是毫秒值，表示的是隔多久執(zhí)行一次code(參數(shù)一)。
	clearInterval(id_of_setinterval)，參數(shù)是必須的；
			這個(gè)參數(shù)表示setInterval返回的ID值，即在代碼中我設(shè)置的time

（本人是小白一個(gè)，所以寫的有什么問題也請(qǐng)各位指出，可以讓我及時(shí)改正，謝謝）

總結(jié)

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

您可能感興趣的文章: