JS 实例练习(随机数抽奖)-2021-10-12

学如逆水行舟,不进则退

<!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>

上一篇:微信小程序:样式,事件


下一篇:Vue时间轴 vue-light-timeline