<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS實現隨機點名</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
width: 800px;
margin: 100px auto;
border: 1px solid #ddd;
text-align: center;
}
.box li {
vertical-align: top;
display: inline-block;
width: 100px;
height: 50px;
border: 2px solid #ddd;
border-radius: 15px;
text-align: center;
line-height: 50px;
margin: 5px;
}
.box li.change {
background-color: red;
color:#fff;
font-weight:bolder;
}
.wrapper button {
display: inline-block;
}
.wrapper button {
border: none;
width: 100px;
height: 50px;
border-radius: 10px;
cursor: pointer;
outline: none;
margin-top: 20px;
font-weight: bolder;
color: #333;
background-color: #eee;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="box"></ul>
<button class="start">開始點名</button>
<button class="stop">停止</button>
<div>
<span>幸運的的你:</span>
<span class="name"></span>
</div>
</div>
<script>
// 原生js取出元素
var boxUl = document.getElementsByClassName('box')[0];
var start = document.getElementsByClassName('start')[0];
var stop = document.getElementsByClassName('stop')[0]
var oLi = document.getElementsByTagName('li');
// 將插入名字存入數組
var arr = ["郭強", "諸澤涵", "張利宏", "高海波",
"張東昇", "高英偉", "秦超蒙", "麥騰陽", "吳金正", "馬方巖",
"尚義鵬", "趙建龍", "李旭斌", "張豐", "金豪", "王銀鵬", "溫壯",
"田利明", "邱國軍", "姚志強", "黎怡志", "張崇如", "高帥帥", "谷世龍",
"陳娜", "常勇", "楊明豪", "段春林", "叢紹謹", "曾佑坤", "洪洋",
"王永琪", "王陽", "陳宇"]
// html進行 字符串拼接
var str = '';
// 通過for循環進行拼接
for (var i = 0; i < arr.length; i++) {
// 利用字符串拼接
str += "<li>" + arr[i] + "</li>";
}
// 將拼接後的html字符串插入到dom結構中
boxUl.innerHTML = str;
// 聲明timer
var timer = null;
// 點擊開始進行選擇
start.onclick = function () {
// 每次運行前清除timer
clearInterval(timer);
// 設置定時器
timer = setInterval(function () {
// 根據數組長度範圍生成隨機數
var i = Math.floor(Math.random() * arr.length);
// 先通過for循環清空所有class名
for (var j = 0; j < oLi.length; j++) {
oLi[j].className = "";
}
// 爲隨機選擇的li設置選中的class名
oLi[i].className = "change";
}, 10);
};
// 點擊停止
stop.onclick = function () {
// 清空定時器
clearInterval(timer);
// 找到選中的元素
var choise = document.getElementsByClassName('change')[0];
// 找到選中元素的內容
var name = choise.innerText;
// 同時爲選中位置添加內容
var nameSpan = document.getElementsByClassName('name')[0];
nameSpan.innerText = name;
}
</script>
</body>
</html>
![點名前]()
![點名後]()
