jQuery_jquery setinterval-程序员宅基地

一、定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
		<script src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			//单次定时器
			//setTimeout(执行功能,多少毫秒之后)
//			setTimeout(function(){
//				$("#content").text("setTimeout定时器设置的内容");
//			},3000);
			//循环定时器：每隔多少毫秒执行这段代码
			//setInterval(执行功能,每隔多少毫秒)
		    setInterval(function(){
				$("#content").append("setInterval定时器设置的内容!");
			},1000);
		</script>
	</head>
	<body>
		<div id="content">
			
		</div>
	</body>
</html>

1.相对定位:relative

不会变成行内块元素
相对自身原本的位置进行定位
参考自身原本的位置，原来的位置仍然占用文档流
对兄弟元素的绝对定位不起作用

2.绝对定位:absolute

位置会参考相对定位（有多个相对定位的话就参考最近的父元素的相对定位）
变成行内块元素
绝对定位absolute:脱离文档流,自身变为行内块，需要相对定位

3.固定定位:fixed

位置参考浏览器，会变成行内块元素
固定定位会脱离文档流，下面的相对定位会看不到他，会压住固定定位所在的区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#content{
				width: 500px;
				height: 350px;
				margin: 10px auto;
				position: relative;/*相对定位*/
			}
			#content img{
				width: 100%;
				height: 100%;
			}
			#before{
				display: block;
				width: 100px;
				height: 35px;
				position: absolute;/*绝对定位*/
				left: 20px;
				top: 150px
			}
			#after{
				display: block;
				width: 100px;
				height: 35px;
				position: absolute;
				right: 20px;
				top: 150px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//1.使用数组存储图片的地址，使用索引循环取出地址
				// var pic=["img/case1.jpg","img/case2.jpg","img/case3.jpg",
				//          "img/case4.jpg","img/case5.jpg","img/case6.jpg"];
				// var n=0;
				
				// setInterval(function(){
				// 	n++;
				// 	//如果大于5，重新从第0个开始
				// 	if(n>5){
				// 		n=0;
				// 	}
				// 	//从数组中取出地址，设置图片的链接
				// 	$("#content img").attr("src",pic[n]);
				// },1000);
				
								
				//2.每隔多少毫秒直接修改图片的地址编号
				var n=1;
				setInterval(function(){
					n++;
					if(n>6){
						n=1;
					}
					$("#content img").attr("src","img/case"+n+".jpg");
				},5000);
				
				
				//点击播放上一页
				$("#before").click(function(){
					//1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3   让3-1 就是上一张
					var src=$("#content img").attr("src");
					//2.查找地址字符串中最后的.jpg的位置索引   img/case1.jpg
					var index=src.lastIndexOf(".jpg");
					//3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数
					var num=parseInt(src.charAt(index-1));
					
					var n
					if(num==1){
						n=6;	  //如果第一张，显示第6张
					}else{
						n=num-1;  //如果不是第一张，显示第-1张
					}
					//4.让数字编号-1 重新设置图片的地址，就是上一张的操作
					$("#content img").attr("src","img/case"+(n)+".jpg")
					
				});
				
				//点击播放下一页
				$("#after").click(function(){
					//1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3   让3+1 就是下一张
					var src=$("#content img").attr("src");
					//2.查找地址字符串中最后的.jpg的位置索引   img/case1.jpg
					var index=src.lastIndexOf(".jpg");
					//3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数
					var num=parseInt(src.charAt(index-1));
					
					var n
					if(num==6){
						n=1;
					}else{
						n=num+1;
					}
					//4.让数字编号-1 重新设置图片的地址，就是上一张的操作
					$("#content img").attr("src","img/case"+(n)+".jpg")
					
				});
			});
		</script>
	</head>
	<body>
		<div id="content">
			<img src="img/case1.jpg" />
			<button id="before">上一页</button>
			<button id="after">下一页</button>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点名</title>
		<style type="text/css">
					*{
						margin: 0px;
						padding: 0px;
					}
					#content{
						width: 180px;
						height: 120px;
						line-height: 120px;
						text-align: center;
						color: green;
						font-size: 24px;
						border: 5px darkcyan dotted;
						margin: 10px auto;
					}
					
					#big{
						clear: both;
						width: 800px;
						height: 550px;
						line-height: 550px;
						text-align: center;
						color: orangered;
						font-size: 80px;
						font-weight: bold;
						margin: 10px auto;
						border: 5px darksalmon double;
					}
					#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 names=[
							"叶枫","饶政","郭汶广","王志刚","时力强","柴浩阳","王宁","雷坤恒",
						    "贠耀强","齐东豪","袁文涛","孙啸聪","李文彬","孙赛欧","曾毅","付临",
							"王文龙","朱海尧","史艳红","赵冉冉","詹梦","苏真娇","张涛","王浩",
							"刘发光","王愉茜","牛怡衡","臧照生","梁晓声","孔顺达","田野","宫帅龙",
							"高亭","张卓","陈盼盼","杨延欣","李蒙惠","瞿新成","王婧源","刘建豪",
							"彭习峰","胡凯","张武超","李炳杰","刘传","焦泽国"
						];
						
						//定义定时器
						var interval;
						//点击开始，随机从数组中取出一个元素，显示在div中
						$("#start").click(function(){
							//让开始按钮不可用，让结束按钮可用
							$(this).prop("disabled",true);
							$("#stop").prop("disabled",false);
							//使用定时器，随机生成数组索引，获取数组元素，更新div内容
							interval=setInterval(function(){
							//随机一个数组索引
							var n = Math.floor(Math.random()*names.length);
							$("#content").text(names[n]);
						},200);
						});
						
						//点击停止，让定时器结束执行
						$("#stop").click(function(){
							//让结束按钮不可用，让开始按钮可用
							$(this).prop("disabled",true);
							$("#start").prop("disabled",false);
							//让定时器停止
							clearInterval(interval);
							//停止之后把滚动条区域的文本内容，显示到大屏区域
							var name = $("#content").text();
							$("#big").text(name).hide();
							$("#big").slideDown(3000);
						});
						
					});
				</script>
			</head>
			<body>
				<div id="content">
					准备好了吗？
				</div>
				<div id="ctrl">
					<button id="start">开始</button>
					<button id="stop" disabled=true>结束</button>
				</div>
				<div id="big">
					敬请期待
				</div>
				
			</body>
		</html>

<!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);
							//使用定时器
							interval = setInterval(function(){
								//随机获取图片索引显示
								var n =  Math.floor(Math.random()*pic.length);
								$("#content img").attr("src",pic[n]);
							},200);
						});
						
				//结束按钮
				$("#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").show(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>

本文链接：https://blog.csdn.net/weixin_65824274/article/details/127448370

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Android IPC机制-程序员宅基地

文章浏览阅读917次，点赞18次，收藏11次。为了方便有学习需要的朋友，我把资料都整理成了视频教程（实际上比预期多花了不少精力）当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。无论你现在水平怎么样一定要持续学习没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！我希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

利用ode45求解含控制量并且控制量为离散点的动力学方程_ode函数离散-程序员宅基地

文章浏览阅读2k次，点赞5次，收藏14次。1、写出微分方程函数2、求解function dy=rigid(t,y)dy=zeros(3,1);dy(1)=y(2)*y(3);dy(2)=-y(1)*y(3);dy(3)=-0.51*y(1)*y(2);end%将微分方程写成函数形式，待调用options=odeset('RelTol',1e-4,'AbsTol',[1e-4 1e-4 1e-5]);[T Y]=ode45(@rigid,[0 12],[0 1 1],options);plot(T,Y(:,1),'-',T,Y_ode函数离散

Java中==和equals的区别-程序员宅基地

文章浏览阅读3.8w次，点赞41次，收藏180次。==操作符与equals方法的区别_java中==和equals的区别

flask-login-程序员宅基地

文章浏览阅读170次。创建扩展对象实例from flask_login import LoginManagerlogin_manager = LoginManager()login_manager.login_view = 'auth.login'# 上面这一句是设置登录视图的名称，如果一个未登录用户请求一个只有登录用户才能访问的视图，# 则闪现一条错误消息，并重定向到这里设置的登录视图。# 如果未设置..._python flask please log in to access this page

html怎么控制top值为0,关于vue滚动scrollTop 赋值一直为0问题-程序员宅基地

文章浏览阅读428次。Vue中document.body.scrollTop的值总为零的解决办法最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0但是发现document.body.scrollTop一直是0。查资料发现是DTD的问题。页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。页面没有DTD，即没指定DOCTYPE时，使用d..._滚动给scrolltop赋值

kingbase数据库安装教程（初步使用）（人大金仓）-程序员宅基地

文章浏览阅读2.1k次，点赞25次，收藏21次。人大金仓数据库管理系统KingbaseES（简称：金仓数据库或KingbaseES）是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。_kingbase

随便推点

发现电脑一直默认按住Ctrl键如何解决_键盘一直自动按ctrl-程序员宅基地

文章浏览阅读1k次，点赞11次，收藏9次。你的键盘上应该有两个Ctrl键，按右边的Ctrl解决了。_键盘一直自动按ctrl

Linux 命令【6】：cut_cut使用特殊字符为分隔符-程序员宅基地

文章浏览阅读141次。Linux 命令【6】：cut文章目录一、简介二、命令详解三、实例演示一、简介cut 命令是一个将文本按列进行切分的小工具，它可以指定分隔每列的定界符。二、命令详解命令格式：cut {选项} {文件名}选项：-b ：以字节为单位进行分割。这些字节位置将忽略多字节字符边界，除非也指定了 -n 标志。-c ：以字符为单位进行分割。-d ：自定义分隔符，默认为制表符。-f ：与-d一起使用，指定显示哪个区域。-n ：取消分割多字节字符。仅和 -b 标志一起使用。如果字符的最后一._cut使用特殊字符为分隔符