如何使用原生Js實現隨機點名詳解
阿新 • • 發佈：2021-01-08
使用原生Js實現隨機點名
最近學了一點前端內容，老師讓用js設計一個班裡的隨機點名器。就嘗試寫了一個，具體實現效果如圖：
實現程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>點名</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 ： 事件會在頁面或影象載入完成後立即發生。 -->
<body onload="A()">
<div class="wai" align="center">
<table>
<button class="start" onclick="start()">開始</button>
<button class="end" onclick="end()">結束</button>
</table>
<div id="names"></div>
</div>
<script type="text/javascript">
var nameArr = [
"空","張家家","許雪雪","王橘橘","陳韻","馬本本","張志志","唐豪豪","高洋洋","朱陽陽","王山山","空","尹方方","王零零","李遠遠","吳傑","李玉玉","李雯雯","步一一","崔明明","肖金金","陳晴晴","趙飛飛","李英英","李洋陽","劉俊郡","王泊","廉云云","王子俊","康三三","李浩浩","張藝藝","徐葉葉","李巨集巨集","雷康康","張青青","王樂樂","楊童童","張君君","孫明","何龍龍","鄭軒軒","任平平","孫超超","賀濤濤","熊秀秀","薄嘉嘉","薛萬萬","尹飛","張傑","胡萬萬","馬文文"
];
var index = 0;
var k = 1; // 記錄不為空的座位
// 生成作為表
function A() {
for (var i = 0; i < nameArr.length; i++) {
if (nameArr[i].length > 1) {
// 建立div標籤（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，新增一個換行符
if ((i + 1) % 12 == 0) {
var br = document.createElement("br");
document.getElementById("names").appendChild(br);
}
k++; // 新增一個學生，k自增1，記錄學生（不為空的座位）個數
} else {
var div = document.createElement("div");
div.setAttribute("class","name");
// div.setAttribute("id",index++ + "");
// 如果當前元素長度小於等於1時，則代表當前座位為空，所以不給當前div新增id屬性，方便後續隨機選人時，避開空座位
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);
}
}
}
}
// 定義一個id標誌
var index2 = -1;
function restore() {
// 還原顏色
if (index2 != -1) {
document.getElementById(index2 + "").style.cssText = "background: mistyrose";
}
// 生成隨機數，用K生成隨機數，此時K代表不為空的作為個數
var num = Math.floor(Math.random() * k);
document.getElementById(num + "").style.cssText = "background-color:red";
index2 = num; // 記錄當前被選中的id，在下次執行該函式時，將顏色還原
}
var time; // 用於接收計時器，方便關計時器時操作
var n = 1; // 定義狀態正在執行 n=0,已經結束 n=1
function start() {
if (n == 1) {
// DOM setInterval()方法 計時器
time = setInterval("restore()",80);
n = 0;
}
}
function end() {
if (n == 0) {
clearInterval(time);
alert("請" + document.getElementById(index2 + "").innerHTML + "同學回答問題");
n = 1;
}
}
</script>
</body>
</html>
在這裡對計時器做一下介紹：
setInterval(code，millisec)，這兩個引數都是必須的； 第一個引數是要呼叫的函式或要執行的程式碼串。 第二個引數是毫秒值，表示的是隔多久執行一次code(引數一)。 clearInterval(id_of_setinterval)，引數是必須的； 這個引數表示setInterval返回的ID值，即在程式碼中我設定的time
（本人是小白一個，所以寫的有什麼問題也請各位指出，可以讓我及時改正，謝謝）
總結
到此這篇關於如何使用原生Js實現隨機點名的文章就介紹到這了,更多相關原生Js實現隨機點名內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！