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.在生成名单颜色时需要清除之前的颜色

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

以上是 JavaScript实现随机点名小程序 的全部内容, 来源链接: utcz.com/p/218432.html

回到顶部