内容
分为上下两个部分,上方为显示区域,下方为控制区域。
显示区域显示基地所有成员的工号和姓名,控制区域由开始和结束两个按钮组成。
点击开始按钮,显示区域里的内容开始滚动,点击结束按钮,内容滚动停止,随机显示—位成员的工号和姓名。
原理
利用Math实现随机
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.body{
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid black;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.foot{
width: 1000px;
height: 200px;
margin: 0 auto;
border: 1px solid black;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.student{
width: 120px;
height: 30px;
background-color: rgb(40, 40, 40);
border: 1px solid rgb(40, 40, 40);
text-align: center;
color: white;
line-height: 30px;
margin: 20px 20px;
}
#start{
width: 120px;
height: 40px;
border: 1px solid rgb(0, 166, 255);
background-color: rgb(0, 166, 255);
color: rgb(255, 255, 0);
font-size: 25px;
}
#end{
width: 120px;
height: 40px;
border: 1px solid orangered;
background-color: orangered;
color: white;
font-size: 25px;
}
.active{
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<ul class="body" id="body"></ul>
<div class="foot">
<button id="start">开始</button>
<button id="end">停止</button>
</div>
</div>
<script>
var arr = [
'11451401刘一', '11451402陈二', '11451403张三', '11451404李四',
'11451405王五', '11451406赵六', '11451407赵六', '11451408周八',
'11451409吴九', '114514010郑十', '114514011侯某', '114514012答辩'
]
var body = document.getElementById('body')
var start = document.getElementById('start')
var end = document.getElementById('end')
var timer
for(var i=0;i<arr.length;i++){
var oli = document.createElement('li') //向ul里添加li标签
oli.innerHTML = arr[i]
oli.className = 'student' //对li追加class标签
body.appendChild(oli)
}
function cholose() {
var random=Math.round(Math.random()*(arr.length));//设置随机选中
for (var m = 0; m < arr.length; m++) {//为setInterval设置运行
body.children[m].style.background = ''//防止随机改变颜色时上一个颜色留下
}
body.children[random].style.background = 'blue'//改变当前背景色
}
start.onclick = function(){
timer = setInterval('cholose()', 300)//,执行'cholose',间隔100毫秒
}
end.onclick = function(){
clearInterval(timer)
}
</script>
</body>
</html>
效果