使用原生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>
<!-- onl oad ： 事件會在頁面或影像加載完成后立即發生， -->
<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
（本人是小白一個，所以寫的有什么問題也請各位指出，可以讓我及時改正，謝謝）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245229.html
標籤：其他