JavaScript实现效果——随机点名

1、效果如下：

2、代码如下：

（1）CSS

body{
	background-color: hotpink;
}
.all{
	width: 1000px;
	height: 600px;
	margin: 0 auto;
	text-align: center;
}
#btn{
	width: 120px;
	height: 40px;
	font-size: 18px;
	font-weight: bold;
	background-color: #00FFFF;
	margin-top: 40px;
	cursor: pointer; /* 鼠标悬停样式 */
}
.name{
	width: 100px;
	height: 30px;
	float: left;
	background-color: antiquewhite;
	margin-left: 10px;
	margin-top: 10px;
	text-align: center;
	line-height: 30px;
}

（2）HTML

<div class="all">
	<h1>王者荣耀随机点名系统</h1>
	<div class="box" id="box"></div>
	<input type="button" id="btn" value="开始点名"/>
</div>

（3）JavaScript

<script type="text/javascript">
	// 创造虚拟后台数据
	var arrs = ["白起","宫本武藏","关羽","韩信","露娜","鬼谷子","亚瑟","妲己","狄仁杰","王昭君","公孙离","孙悟空","吕布",
	"娜可露露","赵云","钟馗","橘右京","貂蝉","刘备","阿轲","诸葛亮","孙尚香","铠","达摩","兰陵王","后羿","杨戬","雅典娜",
	"百里玄策","墨子","庄周","干将莫邪","李元芳","老夫子","明世隐","甄姬","高渐离","马可波罗","安琪拉","米莱狄","百里守约",
	"刘禅","鲁班七号","钟无艳","孙膑","虞姬","孙策","蔡文姬","盾山","张良","典韦","李信","小乔","张飞","瑶","曹操","黄忠",
	"花木兰","夏侯惇","云中君","周瑜","不知火舞","狂铁","太乙真人","扁鹊","伽罗","项羽","芈月","马超","牛魔","大乔","曜",
	"姜子牙","程咬金","女娲","司马懿","廉颇","嬴政","沈梦溪","哪吒","嫦娥","成吉思汗","东皇太一","李白","刘邦","鲁班大师",
	"蒙犽","梦奇","盘古","斐擒虎","上官婉儿","杨玉环","苏烈","西施","奕星","元歌","猪八戒","武则天","艾琳"];
	// 获取父节点元素
	var boxNode = document.getElementById("box");
	for (var i = 0; i < arrs.length; i++) {				// 循环遍历数组元素
		var divNode = document.createElement("div");	// 创建一个新的div
		divNode.innerHTML=arrs[i];						// 把arrs[i]中的数据放入创建的div中
		divNode.className="name";						// 给创建的div添加class="name"
		boxNode.appendChild(divNode);					// 把创建好的div放到列结尾
	}
	document.getElementById("btn").onclick = function(){
		if(this.value === "开始点名"){
			// 设置定时器
			timeId=setInterval(function () {
				// 清空所有颜色
				for (var j = 0; j < arrs.length; j++) {
					boxNode.children[j].style.background="";
				}
				// 留下当前颜色
				var random = parseInt(Math.random()*arrs.length);
				// 将父节点数组中的随机被选中元素的背景颜色设置为红
				boxNode.children[random].style.background="red";
			},10);
			this.value="结束点名";
		}
		else{
			clearInterval(timeId);	// 清除计时器
			this.value="开始点名";
		}
	}
</script>

本文参考：https://www.cnblogs.com/xiaoxiao5016/p/8889476.html