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

2021/10/12 23:14:11

编程Tag： js 按钮 attr 随机数停止 10 end disabled 2021

本文主要是介绍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>

这篇关于JS 实例练习(随机数抽奖)-2021-10-12的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章