适合老师使用的随机点名

通过html+css+js制作一个随机点名功能

背景色会一直动态改变，点击开始姓名随机滚动，点击停止后姓名停止滚动。

首先是html代码

    <div class="box">
      <div class="inner">
        <h2>汤圆点名</h2>
        <div id="nameBox">姓名</div>
        <button id="btnBox" onclick="btnClick()">开始</button>
      </div>
    </div>

主要代码结构就是顶部的标题、中间的姓名、下方的按钮。

其次是css代码

    *{
      margin:0;
      height:0;
    }
    .box{
      width:100%;
      height:100vh;
      background: linear-gradient(45deg,#6fc7b5 0%,#13bdce 20%,#0094d9 40%,#5a3694 60%,#ee4d74 80%,#f58c58 100%);
      background-size: 600%;
      background-position: 0% 100%;
      animation: gradient 8s ease-in-out infinite;
      transition: 0.3s linear all;
    }
    @keyframes gradient{
      50% {
        background-position: 100% 0%;
      }
    }
    .inner{
      position: absolute;
      top:30vh;
      left:50%;
      transform: translate(-50%,-50%);
      text-align: center;
      color:white;
    }
    h2{
      font-size: 72px;
    }
    #nameBox{
      font-size: 42px;
      margin-top: 150px;
    }
    #btnBox{
      display: inline-block;
      margin-top: 150px;
      width:180px;
      height:47px;
      cursor: pointer;
      outline: none;
      background: white;
      border: none;
      border-radius: 10px;
    }

最后是js代码

    // 获取标签dom
    let nameBox=document.getElementById('nameBox')
    let btnBox=document.getElementById('btnBox')
    // 姓名数组
    let nameArr=[
      '汤圆',
      '张三',
      '李四',
      '王五',
      '张六',
      '小刘',
      '小杨'
    ]
    // 时间
    let time=null
    let flag=true
   //创建一个随机数字 
    function getranDom(max){
      return Math.floor(Math.random()*max)
    }
    function clock(){
      // 通过随机的方法获取数组里面的值，并将获取到的值赋值给需要展示姓名的dom上
      let random=nameArr[getranDom(nameArr.length)]
      nameBox.innerHTML=random
    }
    // 点击按钮
    function btnClick(){
      // 如果为点击开始，则开始刷新姓名
      if(flag){
        time=setInterval('clock()',30)
        btnBox.innerHTML='停止'
        flag=false
      }else{
        time=clearInterval(time)
        btnBox.innerHTML='开始'
        flag=true
      }
    }

可以通过抖音扫码、哔哩哔哩搜索  web-lyh 观看教学视频

源码下载地址：

https://pan.baidu.com/s/1ttkyjcZaFNnLZb24Ca094Q?pwd=1234