JavaScript实现随机点名小程序
更新时间：2020年10月29日 12:04:13 作者：xm_hello
这篇文章主要介绍了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.在生成名单颜色时需要清除之前的颜色
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇解决layui调用自定义方法提示未定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS实现兼容各浏览器解析XML文档数据的方法,涉及javascript对XML文件的解析技巧,并根据各浏览器进行了相关调整,具有良好的兼容性,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JavaScript的执行机制，对此感兴趣的同学，可以参考下2021-04-04
这篇文章主要为大家详细介绍了网页中JS函数自动执行常用三种方法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了JS+CSS实现的经典圆角下拉菜单效果代码,可实现非常经典的圆角下拉菜单效果,涉及JavaScript动态操作页面元素css样式的相关技巧,需要的朋友可以参考下2015-10-10
下面小编就为大家带来一篇原生js实现class的添加和删除简单代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了利用Webpack实现小程序多项目管理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
JavaScript获取GridView中用户点击控件的行号，列号
GridView中的某几列有按钮，需要获取用户当前点的按钮的行号（捎带的得到列号）2009-04-04
鼠标右键大家都经常操作，但是鼠标的内容是不是符合大家的“口味”？这篇文章就是教大家如何定制自己专属鼠标右键,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了javascript如何判断是否按回车键并解决浏览器之间的差异问题,需要的朋友可以参考下2014-05-05
最新评论