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;
}
posted @ 2021-12-10 14:33  有肌肉的小眼睛  阅读(333)  评论(0)    收藏  举报