版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34804120/article/details/86500640
<!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>