实现效果
先上运行结果：
源码
css部分
/* 页面css样式 */
.wrapper {
/* width: 800px; */
margin: 100px auto;
border: 1px solid #ddd;
text-align: center;
position: relative;
}
.box li {
vertical-align: top;
display: inline-block;
width: 100px;
height: 50px;
border: 2px solid #ddd;
border-radius: 15px;
text-align: center;
line-height: 50px;
margin: 5px;
}
.wrapper button {
border: none;
width: 100px;
height: 50px;
border-radius: 10px;
cursor: pointer;
outline: none;
margin-top: 20px;
font-weight: bolder;
color: #333;
background: #eee;
box-shadow: 0 15px 30px rgb(0 0 0 / 15%);
transition: all .5s;
}
.wrapper button {
display: inline-block;
}
.wrapper .click:hover button{
color: #ff6700;
}
body {
background-color: #eee;
}
/* 以下精灵图动画 美化而已，可有可无 */
.move {
width: 100px;
height: 100px;
background: url(./img/tlp2.png); //这里需要引用精灵图，可以自行制作
animation: move 1s infinite steps(5);
position: absolute;
top: 0;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: -500px 0;
}
}
html部分
<div class="wrapper">
<h1 align="center">方城一高1班专用点名系统</h2>
运行正常，请君放心食用
<h6 id="data" align="right"></h6>
<ul class="box"></ul>
<div class="click">
<button class="start">开始/停止</button>
</div>
<div class="move"> </div> //这个对应精灵图，可有可无
js部分
//获取需要的元素节点
var box = document.querySelector(".box");
//获取开始/停止的按钮
var start = document.querySelector(".start");
//数据准备
var nameString = new String("刘俊男,李正行,李钰壁,王新琪,张鸿颜,张文阳,刘璐菲,刘子玉,王夏玉,贾闯奇,张添帅,常智国,王心语,张艳银,王丙轩,贾咏琪,杜勇盛,王琳静,关璐怡,马志泽,薛玉顺,景长春,李春焕,周梦雅,申展鸣,刘安慰,陈春阳,徐一鸣,李红阳,苑佳鑫,杨瀚博,周帅兵,徐会敏,宗婷婷,杨梦婷,杜薇薇,杜梦茹,赵海举,柯林甫,杨佳音,朱家树,蒋贵宇,王婧一,杜秉州,王心月,孙晓孜,李雨润,薄项铭,王旋,王建坤,李思涵,李鹏程,高峰威,尚兴瑞,赵仪菲,杨俊颖,张静涵,韩嘉馨,李秉昱,张佳伟,梁雅萌,景其颖,余昊泓,栗守骏,李王优,郭鹏杰,丹晓洁,卫宝骏,郑权,韩东霞,吕帆,常宗乾,秦亚丽,高明飞,邸如平,薛晓琳,关星宝,芦若男,苏凯,周杭,赵蒙蒙,秦艺歌,袁建萍,杨帅");
//获取每个学生姓名添加到标签中，自动解析html标签
var arr = nameString.split(",");
//遍历数组，将数组中每一个元素前后加上li标签。
var str = "";
for (let i = 0; i < arr.length; i++) {
str += "<li >" + arr[i] + "</li>"
}
box.innerHTML = str;
//保存上一次幸运同学的下标。
var last_index = 0;
//添加开始按钮的点击事件
var timer = null;
start.onclick = function () {
//已经开启了定时器，则点击start按钮，表示关闭，反之，表示开启定时器。
//如何判断是否开启了定时器？ 判断是否有这个定时器的ID
if (timer) {
//定时器已经开启了，我们需要关闭
clearInterval(timer);
//将timer的值清空
timer = null;
} else {
//定时器没有开启，我们需要开启
timer = setInterval(function () {
// 根据数组长度范围生成随机数
var index = Math.floor(Math.random() * arr.length);
//获取所有的li标签。
var lis = document.querySelectorAll("ul.box>li");
//在生成新的幸运同学的时候，需要将之前的幸运同学的颜色去掉
lis[last_index].style.backgroundColor = "";
//给新的同学加上颜色
lis[index].style.backgroundColor = "pink";
//将新同学的下标赋值给 last_index
last_index = index;
}, 100);
}
};
//页面初始化时间设置
window.onload = function () {
datatime();
}
//页面时间动态刷新
setInterval(datatime, 1000);
function datatime() {
let data = new Date();
let dataString ="现在是北京时间：" + data.toLocaleString();
document.getElementById("data").innerHTML = dataString;
}
总结
1.准备数据和获取需要的元素节点
2.将数据字符串按照逗号分割成数组
3.遍历数组，将数组中每一个元素前后加上li标签。
4.将所有的元素拼接在一起，放入ul中。
5.给按钮添加点击事件，点击时判断是否需要开启定时器。
6.定时器已经开启，点击按钮为清除定时器，如果定时器没有开启，点击按钮为开启。
7.开启定时器，生成随机数。
8.根据随机数找到幸运同学，将他得颜色变成 pink。
9.在修改新的幸运同学的颜色之前，需要将之前的幸运同学的颜色变为空。
