学如逆水行舟，不进则退
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#box{
width: 200px;
height: 200px;
border: 1px solid red;
margin-bottom: 20px;
text-align: center;
line-height: 200px;
font-size: 40px;
}
button{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div id="box">开始抽奖</div>
<button id="start">开始</button>
<button id="end">停止</button>
<script type="text/javascript">
//让停止按钮显示灰色
$('#end').attr('disabled',true);
var startID;
// 点开始按钮，生成随机数
$('#start').click(function(){
// 定时器生成随机数
startID=setInterval(function(){
// 生成随机数，box的文本内容显示数字
var num=Math.floor(Math.random()*100);
$("#box").text(num);
},100);
// 让开始按钮不可点击，停止按钮可以点击
$('#end').attr('disabled',false);
$('#start').attr('disabled',true);
})
// 停止按钮，停止定时器
$('#end').click(function(){
// 清理定时器
clearInterval(startID);
// 让停止按钮不可点击，开始按钮可以点击
$('#end').attr('disabled',true);
$('#start').attr('disabled',false);
})
</script>
</body>
</html>