JS笔记第八期（定时器的使用）—实现简易动画效果

转晴喵

于 2024-07-26 17:40:29 发布

阅读量301

点赞数 8

文章标签： javascript 笔记前端

本文链接：https://blog.csdn.net/th891166/article/details/140720850

版权

一、定时器

定时器
JS执行速度非常的快，若希望程序每间隔一段时间执行异常，可以使用定时器
setInterval()
定时调用，可以将函数每隔一段时间调用一次
参数：1.回调函数，该函数每隔一段时间执行一次
2.每次回调函数的间隔时间，单位为毫秒，会返回一个Number类型的数字，作为定时器的唯一标识，相当于编号
clearInterval()
1、可以用来关闭定时器，需要一个定时器标识作为参数
2、若接受到的参数无效则什么都不会做

在页面上使用定时器实现一个数字1-11，每隔500毫秒切换，然后到11停止的效果：

var count=document.getElementById("count");
		var num=1;
		var timer=setInterval(function(){
			count.innerHTML=num++;
			if(num==11){
				clearInterval(timer);
			}
		},500);

二、延时调用和定时调用

延时调用
-延时调用一个函数不马上执行，一段时间之后再执行,只会执行一次
-setTimeout(function(){},1000);

延时调用和定时调用的区别：

延时调用只执行一次，定时调用执行多次，延时调用和定时调用实际上可以互相代替

三、图片定时切换

先获取几个对象

var img2=document.getElementById("img1");
		var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
		var index=0;
		var btn01=document.getElementById("btn01");
		var btn02=document.getElementById("btn02");
		var timer;

开启定时器定时切换，每点击一次都会开启一个定时器所以会出现连续点击多次看起来切换速度超级快的情况还暂停不了，因为暂停只能暂停最后一个定时器，所以在开启新的定时器之前，先把其他定时器关闭。

定时器设置代码：

clearInterval(timer);
		 timer=setInterval(function(){
				index++;
				if(index>=imgArr.length){
					index=0;
				}
				//index=index%imgArr.length;//也可以达到使得下标不超过数组长度的效果
				img1.src=imgArr[index];
			},500);
			
		};
		btn02.onclick=function(){
		clearInterval(timer);	
		};

这里放一个作者源文件代码，直接粘贴即可运行（记得在img文件夹里面添加同名的图片）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时器</title>
		<script type="text/javascript">
		window.onload=function(){
		var num=1;
		var timer=setInterval(function(){
			count.innerHTML=num++;
			if(num==11){
				clearInterval(timer);
			}
		},500);	
		/* 图片定时切换 */
		var img2=document.getElementById("img1");
		var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
		var index=0;
		var btn01=document.getElementById("btn01");
		var btn02=document.getElementById("btn02");
		var timer;
		btn01.onclick=function(){
		clearInterval(timer);
		 timer=setInterval(function(){
				index++;
				if(index>=imgArr.length){
					index=0;
				}
				//index=index%imgArr.length;//也可以达到使得下标不超过数组长度的效果
				img1.src=imgArr[index];
			},500);
			
		};
		btn02.onclick=function(){
		clearInterval(timer);	
		};
		
		};
		</script>
	</head>
	<body>
		<!--<h1 id="count"></h1>-->
		<img id="img1" src="img/1.jpg" />
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>

四、简易动画效果

这里为了方便使用，我们采用外部引入JS文件，该JS文件里面的两个函数可以实现简易的动画效果。

外部引入的格式：

<script type="text/javascript" src="./js/简易动画.js"></script>

刚开始作者将定时器全部由timer保存，会出现两个box无法同时跑的现象，我们将每个对象赋予不同的定时器就可以了，在开启定时器的函数前面加一个：obj.timer=steInterval(function({}),30);

以下是简易动画的JS代码：

/* 创建一个执行简单动画的函数 
	    参数：
		obj :执行动画的对象
		atter:要执行动画的样式，例如：left\top\height
		target:执行动画的目标
		speed：执行动画的速度
		callback:回调函数
		
	*/
		function move(obj,atter,target,speed,callback){
			//开启新的定时器之前关闭旧的定时器
			 clearInterval(timer);
			//获取box1原来的left值
			var current=parseInt(getStyle(obj,atter)); 
			//判断该往哪边跑
			 if(current>target){
				 speed=-speed;
			 }
			//开启定时器
			obj.timer=setInterval(function(){
				//获取box1原来的left值
				var oldValue=parseInt(getStyle(obj,atter)); 
			//在旧值的基础上增加
			var newValue=oldValue+speed;
			//判断是否大于给定值
			if((speed>0&&newValue>target)||(speed<0&&newValue<target)){
			newValue=target;
			} 
			//将新值付给box1
			obj.style[atter]=newValue+"px";
			//当元素移动到800PX，使其停止运行
			if(newValue==target){
				//动画执行完毕关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数，有才调，没有就不调
			callback && callback();
			} 
		},30);
	}
    //获取对象样式 obj:获取对象 name:想要的样式值
		function getStyle(obj,name){
			if(window.getComputedStyle){
				return getComputedStyle(obj,null)[name];
			}else{
				return obj.currentStyle[name];
			}
		}

实现的效果：

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时器应用</title>
		<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			border: #000000 solid 1px;
			background-color: #A52A2A;
			position: absolute;
			left: 0;
		}
		#box2{
			width: 100px;
			height: 100px;
			border: #000000 solid 1px;
			background-color: #5F9EA0;
			position: absolute;
			left: 0;
			top: 200px;
		}
		#xian{
			width:0px;
			height:1000px;
			border-left: #000000 solid 1px;
			left: 800px;
			position: absolute;
			top: 0;
		}
		</style>
		<script type="text/javascript" src="./js/简易动画.js"></script>
		<script type="text/javascript">
		/* 定时器由timer保存，所有执行的都由它保存
		会出现两个box无法同时跑的现象，我们将每个对象
		赋予不同的定时器就可以了，在开启定时器的函数前面加一个
		obj.timer=steInterval(function({}),30);
		 */
		var timer;
		window.onload=function(){
	    	var box1=document.getElementById("box1");
			var box2=document.getElementById("box2");
			var btn01=document.getElementById("btn01");
			var btn02=document.getElementById("btn02");
			var btn03=document.getElementById("btn03");
			var btn04=document.getElementById("btn04");
			
			//点击按钮后。box1向右移动
			btn01.onclick=function(){
				move(box1,"left",800,10);
			};
			//点击按钮后。box1向左移动
			btn02.onclick=function(){
				move(box1,"left",0,10);
			};
			//点击按钮后。box2向右移动
			btn03.onclick=function(){
				move(box2,"left",800,30);
			};
			//测试
			btn04.onclick=function(){
				move(box2,"width",800,30,function(){
					move(box2,"height",800,30,function(){
						move(box2,"top",0,30,function(){
						move(box2,"top",200,30,function(){
							move(box2,"width",100,30,function(){
								move(box2,"height",100,30,function(){
									
								})
							})
						})	
						})
					});
				});
			};
			

		};
	
		</script>
	</head>
	<body>
		<button id="btn01">点击后box1向右移动</button>
		<button id="btn02">点击后box1向左移动</button>
		<button id="btn03">点击后box2向右移动</button>
		<button id="btn04">测试</button>
		<br /><br />
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="xian" ></div>
	</body>
</html>

转晴喵

关注

8
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS笔记第八期（定时器的使用）—实现简易动画效果

开启定时器定时切换，每点击一次都会开启一个定时器所以会出现连续点击多次看起来切换速度超级快的情况还暂停不了，因为暂停只能暂停最后一个定时器，所以在开启新的定时器之前，先把其他定时器关闭。2.每次回调函数的间隔时间，单位为毫秒，会返回一个Number类型的数字，作为定时器的唯一标识，相当于编号。这里为了方便使用，我们采用外部引入JS文件，该JS文件里面的两个函数可以实现简易的动画效果。JS执行速度非常的快，若希望程序每间隔一段时间执行异常，可以使用定时器。参数：1.回调函数，该函数每隔一段时间执行一次。
复制链接

扫一扫