<style>
#wrapper {
width: 300px;
height: 300px;
background-color: rgb(241, 241, 241);
border: 1px solid red;
color: red;
font-size: 20px;
font-weight: bolder;
border-radius: 50%;
line-height: 300px;
text-align: center;
margin: 0 auto;
}
button {
width: 100px;
height: 50px;
background-color: rgb(241, 241, 241);
outline: none;
}
.inner {
width: 200px;
text-align: center;
margin-top: 20px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">等待抽取学员</div>
<div class="inner">
<button id="app" onclick="strat()">开始</button>
</div>
<script>
let _wrapper=document.getElementById('wrapper');
let _app=document.getElementById('app');
let id//计时器唯一标识
function strat(){
if(_app.innerHTML=='开始'){
_app.innerHTML='结束';
id=setInterval(function(){
let num=Math.floor(Math.random()*50);
num=(num+'').padStart(2,0);
_wrapper.innerHTML='学号为21021605020'+num;
},100)
}else if(_app.innerHTML=='结束'){
_app.innerHTML='开始';
clearInterval(id);
id=null;//结束后将置空
}
}
</script>
</body>
如何使用计时器和数字对象实现随机抽取学生学号
最新推荐文章于 2024-08-08 10:33:11 发布