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-->

*{

　　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;

}