定时器的应用练习题

最新推荐文章于 2024-01-26 10:55:19 发布

原创最新推荐文章于 2024-01-26 10:55:19 发布 · 977 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文通过一系列的定时器应用练习，旨在帮助读者深化对定时器工作原理和使用技巧的理解，涵盖各种常见应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定时器练习

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定时器的应用</title>
	<style>
		*{
			margin:0;
			padding: 0;
		}
		#box1{
			width:100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left:0;
		}
		#box2{
			width:100px;
			height: 100px;
			background-color: greenyellow;
			position: absolute;
			left:0;
			top :200px;
		}
	</style>
	<script>
		window.onload=function(){
			//获取box1
			var box1=document.getElementById("box1");
			var box2=document.getElementById("box2");
			//获取btn01
			var btn01=document.getElementById("btn01");
			//获取btn02
			var btn02=document.getElementById("btn02");
			//var timer;
			//点击按钮以后，使box1向右移动（left值增大）
			btn01.onclick=function(){
				move(box1,"left",800,10);
		  }
			//点击按钮以后，使box1向右移动（left值减小）
			btn02.onclick=function(){
				move(box1,"left",0,10);			
		  }
			var btn03=document.getElementById("btn03");
			btn03.onclick=function(){
				move(box2,"left",800,10);
		  }
			var btn04=document.getElementById("btn04");
			btn04.onclick=function(){
				//move(box2,"width",800,10);
				//move(box2,"top",800,10);
				//move(box2,"height",800,10);
				move(box2,"width",800,10,function(){
					move(box2,"height",400,10,function(){
						move(box2,"top",0,10,function(){
					  });		
					});
				});
		  }
			
		//创建一个可以执行简单动画的函数
			/*
			参数：
			obj:要执行的动画的对象
			attr：要执行的样式，比如：left height top weight
			target:执行动画的目标位置
			speed:移动的速度
			callback:回调函数 ，这个函数将会我们动画执行完毕之后执行
			
			*/
			function move(obj,attr,target,speed,callback){
				//关闭上一个定时器，
				clearInterval(obj.timer);
				
				//判断速度的正负值
				//从0到800移动，则speed为正
				//从800到0移动，则speed为负
				var current=parseInt(getStyle(obj,attr));
				if (current>target){
					//此时的速度应为负值
					speed=-speed;
				}
				
				//开启一个定时器，用来执行动画效果
				obj.timer=setInterval(function(){
					
				//获取box1原来的left值
				var oldValue=parseInt(getStyle(obj,attr));
					
				//在旧的值上增加
				var newValue=oldValue+speed;
					
				//判断newValue的值是否大于800px
					if((speed<0 && newValue < target )|| (speed >0 && newValue > target)){
						newValue=target;
					}
			
				//将新值赋值给box1
					obj.style[attr]=newValue+"px";
					
				//当元素移动到800px时停止
					if(newValue===target){
						clearInterval(obj.timer);
						callback && callback();
					}
				},30)
			}
		function getStyle(obj,name){
		if(window.getComputedStyle){
			//正常浏览器的方式，具有getComputedStyle（）方法
			//在函数中，要调用赋值给形参的实参时，可以使用【】的方法
			return getComputedStyle(obj,null)[name];
		}else{
			//IE8d的方式，没有getComputedStyle（）方法
			return obj.currentstyle[name];
			}
			
		//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentstyle[name];
		}
	}
			
	</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 style="width:0; height: 1000px; border-left:1px black solid; position:absolute; left: 800px;top:0;"></div>
</body>
</html>