一、实现效果图代码
为了让大家能够明白所写内容,下面将分步展示
1、页面body部分
<body>
<main>
<header>
<div>张1</div>
<div>张2</div>
<div>张3</div>
<div>张4</div>
<div>张5</div>
<div>张6</div>
<div>张7</div>
<div>张8</div>
<div>张9</div>
<div>张10</div>
<div>张11</div>
<div>张12</div>
<div>张13</div>
<div>张14</div>
<div>张15</div>
<div>张16</div>
<div>张17</div>
<div>张18</div>
<div>张19</div>
<div>张20</div>
<div>张21</div>
<div>张22</div>
<div>张23</div>
<div>张24</div>
<div>张25</div>
<div>张26</div>
<div>张27</div>
<div>张28</div>
<div>张29</div>
<div>张30</div>
<div>张31</div>
<div>张32</div>
<div>张33</div>
<div>张34</div>
<div>张35</div>
<div>张36</div>
<div>张37</div>
<div>张38</div>
<div>张39</div>
<div>张40</div>
</header>
<footer>
<input type="text" id="renshu" value="5">
<button id="start_stop">开始点名</button>
</footer>
</main>
</body>
2、页面内部样式代码
<style>
main {
background: url(./bg.gif);
}
header {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
div {
width: 140px;
height: 50px;
border: 1px solid blue;
font-size: 30px;
text-align: center;
line-height: 50px;
background-color: pink;
margin: 25px 20px;
}
footer {
display: flex;
justify-content: center;
}
footer input {
width: 100px;
height: 94px;
font-size: 50px;
margin-top: 40px;
text-align: center;
}
footer button {
width: 400px;
height: 100px;
font-size: 50px;
margin-top: 40px;
}
button:hover {
background-color: chartreuse;
}
</style>
3.页面JS部分核心代码
<script>
function $(id) { return document.getElementById(id); }
var lis = document.querySelectorAll("div");
var time = null;
var count = 0;
$("start_stop").onclick = function () {
++count;
if (count % 2 != 0) {
clearInterval(time)
$("start_stop").innerHTML = "正在点名中"
time = setInterval(function () {
for (var i = 0; i < 40; i++) { //40 为总人数
lis[i].style.backgroundColor = getColor()
lis[i].style.color = getColor()
}
}, 100)
} else {
var arr = []
$("start_stop").innerHTML = "开始点名"
//选择需要选中的人
while (true) {
num = parseInt(Math.random() * 40)
if (arr.indexOf(num) == -1) {
arr.push(num)
}
if (arr.length == $("renshu").value) {
break;
}
}
for (var j = 0; j < 40; j++) {
if (arr.indexOf(j) == -1) {
lis[j].style.backgroundColor = "#ff0000"
lis[j].style.color = "#ffffff"
} else {
lis[j].style.backgroundColor = "pink"
lis[j].style.color = "#00f"
}
}
clearInterval(time)
}
}
//功能:获取一个随机的颜色值
//参数:无
//返回值:随机颜色值
function getColor() {
var str3 = "abcdef0123456789";
var res = "#"
for (i = 1; i <= 6; i++) {
res += str3[parseInt(Math.random() * str3.length)]
}
return res;
}
</script>