js 实现点名系统
<!--html-->
<div id="box">
<div class="contentBox"><div id="content">幸运观众是</div></div>
<div class="btnBox">
<button class='btnStyle' id="start">开始</button>
<button class='btnStyle' id="end">结束</button>
</div>
</div>
<!--js-->
<script>
let timers = null
let start = document.getElementById('start')
let end = document.getElementById('end')
let content = document.getElementById('content')
let arr = ['钱一', '李二' , '张三', '李四', '王五', '赵六', '贺七']
function timerFn() {
if(timers) return
timers = setInterval(() => {
content.innerHTML = arr[Math.round(Math.random()*(arr.length - 1))]
}, 50)
}
start.onclick = function() {
timerFn()
}
end.onclick = function() {
clearInterval(timers)
timers = null
}
</script>
<!--css-->
<!--css-->
*{
margin:0;
padding:0;
}
#box{
text-align: center;
color: #fff;
}
#content{
width:100px;
height:100px;
line-height: 100px;
text-align: center;
background: rgba(0,0,0,.5);
border-radius: 50%;
}
.contentBox{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.btnBox{
margin-top: 20px;
}
.btnStyle{
border: none;
background: rgba(117, 212, 165, 0.5);
width:50px;
height:30px;
line-height: 30px;
text-align: center;
color:salmon;
cursor: pointer;
border: 1px solid #ccc;
}