使用JQuery完成的抽奖案例

碌碌111

已于 2023-05-23 11:22:53 修改

阅读量143

点赞数

文章标签： css css3 html

于 2023-05-23 11:02:52 首次发布

本文链接：https://blog.csdn.net/qq_66874942/article/details/130822957

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>抽奖案例</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#content{
				width: 180px;
				height: 120px;
				border: 5px darkcyan dotted;
				margin: 10px auto;
			}
			
			#content img{
				width: 180px;
				height: 120px;
			}
			
			#big{
				clear: both;
				width: 800px;
				height: 550px;
				margin: 10px auto;
				border: 5px darksalmon double;
			}
			#big img{
				width: 100%;
				height: 100%;
			}
			#ctrl{
				width: 300px;
				overflow: hidden;
				margin: 10px auto;
			}
			#start{
				display: block;
				width: 120px;
				height: 50px;
				float: left;
				border: none;
				background-color: green;
				font-size: 18px;
				color: white;
			}
			#stop{
				display: block;
				width: 120px;
				height: 50px;
				float: right;
				border: none;
				background-color: chocolate;
				font-size: 18px;
				color: white;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//定义图片地址
				var pic=["img/man00.jpg","img/man01.jpg","img/man02.jpg","img/man03.jpg",
				         "img/man04.jpg","img/man05.jpg","img/man06.jpg"]
				
				//定义定时器
				var interval;
				
				//开始按钮
				$("#start").click(function(){
					//让开始按钮不可用
					$(this).attr("disabled",true);
					//让结束按钮可用
					$("#stop").attr("disabled",false);
					
					//定义定时器，随机数组的索引，然后根据索引取出数组中的图片地址，显示到div中
					interval=setInterval(function(){
						//1.随机数组的索引值
						var n=Math.floor(Math.random()*pic.length);
						//2.更改图片的地址
						$("#content img").attr("src",pic[n]);
					},20);
				});
				
				
				//结束按钮
				$("#stop").click(function(){
					//让结束按钮不可用
					$(this).attr("disabled",true);
					//让开始按钮可用
					$("#start").attr("disabled",false);
					//把定时器关闭
					clearInterval(interval);
					//停止的时候把大图片的地址也进行替换，替换成当前停止的时候的小图片的地址
					var src=$("#content img").attr("src");
					$("#big img").attr("src",src).hide();
					$("#big img").slideDown(1000);
				});
			});
		</script>
	</head>
	<body>
		<div id="content">
			<img src="img/man00.jpg" />
		</div>
		<div id="ctrl">
			<button id="start">开始</button>
			<button id="stop" disabled=true>结束</button>
		</div>
		<div id="big">
			<img src="img/man00.jpg" />
		</div>
		
	</body>
</html>