JavaScript实现随机点名小程序
时间：2022-06-02 10:03:35|栏目：JavaScript代码|点击： 次
本文实例为大家分享了JavaScript实现随机点名小程序的具体代码，供大家参考，具体内容如下
导入jar包
将jquery-3.3.1.min.js包导入到web目录下的js包
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点名器</title>
<style>
body{
background-color: gray;
}
.box{
width: 1000px;
height: 280px;
margin: 0 auto;
margin-top: 100px;
clear: both;
}
#btn,#btn2,#btn3,#btnStop{
width: 150px;
height: 50px;
margin-top: 50px;
font-size: 18px;
}
.name{
width: 100px;
height: 30px;
float: left;
background-color: antiquewhite;
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 30px;
}
#span{
float: right;
position: relative;
top: 55px;
right: 185px;
}
h1{
text-align: center;
}
.high{
background-color: #FFDEAD;
font-weight:500;
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<span id="span"></span>
<div class="box" id="box"></div>
<div style="text-align: center">
<input type="button" id="btn" value="点名"/>
<input type="button" id="btnStop" value="停止"/>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arr = [ "张恒",
"李伟",
"文子昂",
"李彦松",
"廖彬",
"金鑫",
"夏华伶",
"邓洪",
"陈紫桥",
"罗继财",
"陈治豪",
"李坤耀",
"母天鑫",
"冯思皓",
"谷康杰",
"李辉",
"李先进",
"米俊杰",
"彭小平",
"唐旭",
"万云松",
"向星宇",
"张全鑫",
"邬建科",
"徐江涛",
"李连辉",
"肖云龙",
"徐浪",
"马俊杰",
"欧阳平",
"周雨凡"];
//生成数组中的名单div并添加到box中
let boxNode = document.getElementById("box");
boxNode.innerHTML = "";
//循环遍历数组
for(let i = 0;i< arr.length;i++){
//创建div元素
let divNode = document.createElement("div");
//设置div内容
divNode.innerHTML = arr[i];
//设置div样式
divNode.className = "name";
//添加到box元素中
boxNode.appendChild(divNode);
}
let time = null
//点击开始点名,开启一个循环定时器,绑定鼠标单击事件
$("#btn").click(function () {
time = setInterval(function () {
//随机被选中的div设置背景颜色为红色
let index = Math.floor(Math.random()*arr.length);
//清除之前的颜色
$("#box div").css("background-color","");
//找到生成的名单div
let mySelector = "#box div:eq("+ index+")";
$(mySelector).css("background-color","red");
},50);
});
//点击停止按钮清除定时器
$("#btnStop").click(function () {
clearInterval(time);
})
</script>
</html>
小结
1.div元素使用循环动态生成,循环长度是名单数组的长度
2.div生成后要添加box到父元素中
3.Math.random()随机数为0-10以内的小数.随机范围为数组的长度
4.在生成名单颜色时需要清除之前的颜色
