用jQuery实现随机点名

最新推荐文章于 2023-07-09 17:44:38 发布

煎蛋zai冒泡

最新推荐文章于 2023-07-09 17:44:38 发布

阅读量424

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_68266487/article/details/127589030

版权

当点击开始时，小相框图片随机播放，当点击暂停时小相框随机到哪个图片大相框就出现哪个

一：先写div布局

    <body>
		<!-- 小相框 -->
		<div id="small">
			<img id="img1" src="img/1.jpg">
		</div>
		<!-- 大相框 -->
		<div id="big">
			<img id="img2" src="img/1.jpg">
		</div>

		<!-- 开始按钮 -->
		<input id="start" type="button" value="点击开始">
		<!-- 停止按钮 -->
		<input id="stop" type="button" value="点击暂停">
	</body>

二：写出css样式

        <style type="text/css">
			#small{
				border: 1px solid;
				width: 90px;
				height: 150px;
			}
			#img1{
				width: 90px;
				height: 150px;
			}
			#big{
				border: 1px solid;
				width: 270px;
				height: 450px;
			}
			#img2{
				width: 270px;
				height: 450px;
			}
			#start{
				width: 150px;
				height: 100px;
				font-size: 30px;
			}
			#stop{
				width: 150px;
				height: 100px;
				font-size: 30px;
			}
		</style>

三：实现此功能首先想要随机random，处理按钮点击前和点击后是否可用，生成随机角标

			$(function() {
				//处理按钮点击前和点击后是否可用
				$("#start").attr("disabled", false);
				$("#stop").attr("disabled", true);
		
				var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg",
					"img/4.jpg", "img/5.jpg", "img/6.jpg"
				];
				var id; //接收定时器返回的id值
				var index; //数组索引
				$("#start").click(function() {
					id = setInterval(function() {
						//生成随机角标
						index = Math.floor(Math.random() * 6);
						
						//获取相框的src属性
						$("#img1").attr("src", imgs[index]);
		
						//处理按钮是否可用
						$("#start").attr("disabled", true);
						$("#stop").attr("disabled", false);
		
					}, 100);
				})
		
				
				$("#stop").click(function() {
					clearInterval(id);
					$("#img2").prop("src", imgs[index]);
					//处理按钮是否可用
					$("#start").prop("disabled", false);
					$("#stop").prop("disabled", true);
				});
			})