js代码实现随机抽取学号

蜡笔小馨馨馨馨馨

于 2023-03-28 21:13:28 发布

阅读量408

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/happyxiaoxinxin/article/details/129825281

版权

效果图：

代码如下：

 <style>
        .wrapper {
            width: 250px;
            box-shadow: 2px 3px 3px lightblue;
            text-align: center;
            padding-bottom: 10px;
        }

        #inner {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid red;
            background-color: #e6eee9;
            color: red;
            text-align: center;
            font-size: 18px;
            line-height: 200px;
            font-weight: 700;
            margin: 0 auto;
            margin-bottom: 10px;
        }

        button {
            width: 80px;
            height: 30px;
        }
    </style>
<body>
    <div class="wrapper">
        <div id="inner">等待抽取学员</div>
        <button id="rd" onclick="start()">开始</button>
    </div>
    <script>
         let _inner=document.getElementById('inner');
         let _rd = document.getElementById('rd');
         let times;
         function start(){
            let  info=_rd.innerText ; //获取button内容
            if(info =='开始'){
                _rd.innerHTML = '结束';
                    times = setInterval(function(){
                 let random =Math.floor(Math.random()*100)  //生成[0,100)随机数
                     random = (random+'').padStart(2,0);  //补0
                 _inner.innerHTML = '全栈1809'+random ;
            },100)
            }else{
                _rd.innerHTML = '开始';
                clearInterval(times);
            }
           
         }
    </script>
</body>