JavaScript 使用简单Dom写一个随机抽取学号（js）

css：

    <style>
        .wrapper{
            width: 200px;
            text-align: center;
            margin: 0 auto;
        }
        #app{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: rgb(220, 220, 220);
            text-align: center;
            line-height: 200px;
            color: red;
            margin-bottom: 20px;
        }
        #btn{
            width:60px;
            height: 30px;
        }
    </style>

 html：

    <div class="wrapper">
        <div id="app">等待抽取学员</div>
        <button id="btn" onclick="chouqu()">开始</button>
    </div>

 js：

<script>
        var _app=document.getElementById("app");
        var _btn=document.getElementById("btn");
        let id;//计时器唯一标识
        function chouqu(){
            let info = _btn.innerText;//获取btn内容
            if(info=="开始"){
                _btn .innerHTML="结束";
                //计时生成随机数
                id=setInterval(function(){
                    let random=Math.floor(Math.random()*100);
                    //补0操作
                    random=(random+"").padStart(2,0);
                    let str ="全栈1809"+random;
                    //放到app中
                    _app.innerHTML=str;
                },100);
            }else{
                // 如果点击的是结束改为开始
                _btn.innerHTML="开始";
                clearInterval(id);
                id=null;  //结束后将id置空
                }
            }
            
    </script>

 成品：