html+css+js随机点名

css

.box{
            width: 400px;
            text-align: center;
            margin: 50px auto;
        }
        #active{
            width: 400px;
            height: 400px;
            border: 2px solid red;
            border-radius: 200px;
            text-align: center;
            line-height: 400px;
            font-size: 25px;
            color: red;
            background-color: rgb(238, 234, 234);
        }
        button{
            width: 120px;
            height: 50px;
            margin-top: 20px;
            font-size: 20px;
        }

html

 <div class="box">
    <div id="active">等待抽取学生</div>
    <button onclick="btn()" id="but">开始</button>
    </div>

js

let _active=document.getElementById('active')
        let _but=document.getElementById('but')
        let n=0
        function btn(){
            // 获取按钮
            let val=_but.innerText
            if(val=="开始"){
            // 更新按钮
                _but.innerText="暂停"
                n=setInterval(function(){
                // 生成随机数
                let sum=Math.ceil(Math.random()*99)
                if(sum<10){
                    sum=(sum+'').padStart(2,0)
                }else{
                    sum
                }
                _active.innerHTML='201903412'+sum
            },150)
            }else{
                _but.innerText="开始"
                clearInterval(n);
                n=null
            }
            
        }