点名系统案例
一、要求
- 分为上下两个部分,上方为显示区域,下方为控制区域。
- 显示区域显示基地所有成员的工号和姓名,控制区域由开始和结束两个按钮组成。
- 点击开始按钮,显示区域里的内容开始滚动,点击结束按钮,内容滚动停止,随机显示一位成员的工号和姓名。
思路(原理)
- 先利用函数获取随机值
- 再利用获取到的随机值对应其数组的下标,以达到随机的效果
点名视频
html:
<div>
<h2>点名彩蛋</h2>
<span id="name">开始点名</span>
</div>
<button id="start">开始</button>
<button id="stop">结束</button>
css:
* {
padding: 0;
margin: 0;
}
body {
background-color: dimgrey;
}
div {
position: absolute;
top: 30%;
left: 45%;
color: aqua;
text-align: center;
}
span {
margin-top: 25px;
display: block;
font-size: 35px;
height: 35px;
}
h2 {
font-size: 50px;
}
#start {
left: 40%;
}
button {
position: absolute;
top: 60%;
width: 95px;
height: 35px;
cursor: pointer;
background-color: rgb(13, 222, 229);
border: transparent;
box-shadow: 0 0 5px #fff;
}
button:hover {
background-color: rgb(11, 243, 212);
color: rgb(0, 136, 255);
}
#stop {
left: 60%;
}
JavaScript
<script>
var nameText = document.getElementById('name');
var stopBtn = document.getElementById('stop');
var startBtn = document.getElementById('start');
var oname = [
'01000001吴昌平','01000002张学涛','02020002杨世成','01010002周思佟','01010103丁鸿飞','01020001张雨菡','02020001唐雨欣','02010125马德华','01010105谭耀','02010110佟冠衡','02010111李奥','01010107王荠','01010209蒋嘉麒','01020003杨嘉宁','01030001张雪','02010101王执聿','02010105廖玉洁','02010106张震宇','02010107李炫宇','02010108李舜禹','02010110佟冠衡','02010111李奥','02010115李俊达','02010117金昊','02010118宋文邦','02010120王昊健','02010122谢梓凡','02010127王立航','02010129张诗卉','02010201郭慧通','02010302田歆妍','02010401吴明浩','02020110陈妍稀'
]
function getRandom(min, max) {//制作一个随机整数函数
return Math.floor(Math.random() * (max - min + 1) + min)
}
var timer;
// 开始
startBtn.addEventListener('click', function () {
//防止多点
clearInterval(timer)
timer=setInterval(()=>{
//通过随机整数函数获取随机值,其随机值作为下标牵引,找到数组中的随机元素
let Random = oname[getRandom(0,oname.length-1)]
nameText.innerHTML = Random
},50)
})
// 结束
stopBtn.addEventListener('click', function () {
clearInterval(timer)
})
</script>
二、 总代码:
<!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>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: dimgrey;
}
div {
position: absolute;
top: 30%;
left: 45%;
color: aqua;
text-align: center;
}
span {
margin-top: 25px;
display: block;
font-size: 35px;
height: 35px;
}
h2 {
font-size: 50px;
}
#start {
left: 40%;
}
button {
position: absolute;
top: 60%;
width: 95px;
height: 35px;
cursor: pointer;
background-color: rgb(13, 222, 229);
border: transparent;
box-shadow: 0 0 5px #fff;
}
button:hover {
background-color: rgb(11, 243, 212);
color: rgb(0, 136, 255);
}
#stop {
left: 60%;
}
</style>
</head>
<body>
<div>
<h2>点名彩蛋</h2>
<span id="name">开始点名</span>
</div>
<button id="start">开始</button>
<button id="stop">结束</button>
<script>
var nameText = document.getElementById('name');
var stopBtn = document.getElementById('stop');
var startBtn = document.getElementById('start');
var oname = [
'01000001吴昌平','01000002张学涛','02020002杨世成','01010002周思佟','01010103丁鸿飞','01020001张雨菡','02020001唐雨欣','02010125马德华','01010105谭耀','02010110佟冠衡','02010111李奥','01010107王荠','01010209蒋嘉麒','01020003杨嘉宁','01030001张雪','02010101王执聿','02010105廖玉洁','02010106张震宇','02010107李炫宇','02010108李舜禹','02010110佟冠衡','02010111李奥','02010115李俊达','02010117金昊','02010118宋文邦','02010120王昊健','02010122谢梓凡','02010127王立航','02010129张诗卉','02010201郭慧通','02010302田歆妍','02010401吴明浩','02020110陈妍稀'
]
function getRandom(min, max) {//制作一个随机整数函数
return Math.floor(Math.random() * (max - min + 1) + min)
}
var timer;
// 开始
startBtn.addEventListener('click', function () {
//防止多点
clearInterval(timer)
timer=setInterval(()=>{
//通过随机整数函数获取随机值,其随机值作为下标牵引,找到数组中的随机元素
let Random = oname[getRandom(0,oname.length-1)]
nameText.innerHTML = Random
},50)
})
// 结束
stopBtn.addEventListener('click', function () {
clearInterval(timer)
})
</script>
</body>
</html>