JavaScript实现随机点名小程序

时间：2021-05-26

本文实例为大家分享了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.在生成名单颜色时需要清除之前的颜色

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章