javascript基础（定时器的应用）（四十三）

最新推荐文章于 2022-08-01 10:07:42 发布
最新推荐文章于 2022-08-01 10:07:42 发布
阅读量279 收藏 2
点赞数 1
分类专栏： HTML5基础篇 文章标签： javascript html 经验 应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010853130/article/details/55261471
版权

1.定时器的应用一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
		
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*开启绝对定位*/
				position: absolute;
				
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后，使box1向右移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					
					//开启一个定时器，控制box1移动
					var timer = setInterval(function(){
						
						//获取box1的当前的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						//通过旧值来计算新值
						var newValue = oldValue + 10;
						
						//判断newValue是否大于800
						if(newValue > 800){
							newValue = 800;
						}
						
						//将box1的left值修改为新值
						box1.style.left = newValue + "px";
						
						//当box1移动到800px的位置时，停止移动
						if(newValue == 800){
							
							clearInterval(timer);
						}
						
					},30);
					
					
					
				};
				
				
			};
			
			
			/*
			 * 用来获取任意元素的当前样式
			 * 	参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式的名字
			 * 
			 * 在读取元素的样式时，如果元素没有设置样式，
			 * 	则火狐、Chrome等浏览器会自动计算元素的样式值
			 * 	而IE浏览器，有时用不会自动计算，而是返回默认值，比如宽度会返回auto
			 * 		
			 */
			function getStyle(obj , name){
				
				//判断浏览器中是否含有getComputedStyle这个方法
				if(window.getComputedStyle){
					//支持正常的浏览器
					return getComputedStyle(obj,null)[name];
				}else{
					//只支持IE
					return obj.currentStyle[name];
				}
				
				
			}
			
			
		</script>
		
	</head>
	<body>
		
		<button id="btn01">使box1向右移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		
		<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
		
	</body>
</html>
2.定时器的应用完善二： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
		
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*开启绝对定位*/
				position: absolute;
				
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
		
			//定义一个变量来保存定时器的标识
			var timer;
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后，使box1向右移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				
				//获取btn01
				var btn01 = document.getElementById("btn01");
				//获取btn02
				var btn02 = document.getElementById("btn02");
				
				
				
				//为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					
					//关闭之前的定时器
					clearInterval(timer);
					
					//开启一个定时器，控制box1移动
					timer = setInterval(function(){
						
						//获取box1的当前的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						//通过旧值来计算新值
						var newValue = oldValue + 10;
						
						//判断newValue是否大于800
						if(newValue > 800){
							newValue = 800;
						}
						
						//将box1的left值修改为新值
						box1.style.left = newValue + "px";
						
						//当box1移动到800px的位置时，停止移动
						if(newValue == 800){
							
							clearInterval(timer);
						}
						
					},30);
					
					
					
				};
				
				//为btn02绑定一个单击响应函数
				btn02.onclick = function(){
					
					clearInterval(timer);
					
					//开启一个定时器，控制box1移动
					timer = setInterval(function(){
						
						//获取box1的当前的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						//通过旧值来计算新值
						var newValue = oldValue - 10;
						
						//判断newValue是否小于0
						if(newValue < 0){
							newValue = 0;
						}
						
						//将box1的left值修改为新值
						box1.style.left = newValue + "px";
						
						//当box1移动到800px的位置时，停止移动
						if(newValue == 0){
							
							clearInterval(timer);
						}
						
					},30);
					
					
					
				};
				
				
			};
			
			
			/*
			 * 用来获取任意元素的当前样式
			 * 	参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式的名字
			 * 
			 * 在读取元素的样式时，如果元素没有设置样式，
			 * 	则火狐、Chrome等浏览器会自动计算元素的样式值
			 * 	而IE浏览器，有时用不会自动计算，而是返回默认值，比如宽度会返回auto
			 * 		
			 */
			function getStyle(obj , name){
				
				//判断浏览器中是否含有getComputedStyle这个方法
				if(window.getComputedStyle){
					//支持正常的浏览器
					return getComputedStyle(obj,null)[name];
				}else{
					//只支持IE
					return obj.currentStyle[name];
				}
				
				
			}
			
			
		</script>
		
	</head>
	<body>
		
		<button id="btn01">使box1向右移动</button>
		<button id="btn02">使box1向左移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		
		<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
		
	</body>
</html>

3.定时器的应用完善三： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
		
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*开启绝对定位*/
				position: absolute;
				
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
		
			//定义一个变量来保存定时器的标识
			var timer;
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后，使box1向右移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				
				//获取btn01
				var btn01 = document.getElementById("btn01");
				//获取btn02
				var btn02 = document.getElementById("btn02");
				
				
				
				//为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					move(box1 , 800 , 10);
					
				};
				
				//为btn02绑定一个单击响应函数
				btn02.onclick = function(){
					move(box1 , 0 , 10);
				};
				
				
			};
			
			
			/*
			 * 定义一个move()函数来执行一些简单的动画效果
			 * 参数：
			 * 	obj 要执行动画的对象
			 * 	target 执行动画的目标位置
			 * 	speed 动画执行的速度
			 */
			function move(obj , target , speed){
				//关闭之前的定时器
				clearInterval(timer);
				
				//判断向左移还是向右移
				//0 --> 800 向右移
				//起始位置 < 目标位置 则向右移动，速度为正
				//800 --> 0 向左移
				//起始位置 > 目标位置 则向左移动，速度为负
				
				//获取元素的起始位置
				var current = parseInt(getStyle(obj,"left"));
				
				if(current > target){
					//起始位置 > 目标位置 则向左移动，速度为负
					speed = -speed;
				}
				
				//开启一个定时器，控制box1移动
				timer = setInterval(function(){
					
					//获取box1的当前的left值
					var oldValue = parseInt(getStyle(obj,"left"));
					
					//通过旧值来计算新值
					var newValue = oldValue + speed;
					
					//判断newValue是否大于800
					/*
					 * 如果从0 向 800，执行动画，则值越来越大
					 * 如果从800向0执行动画，则值越来小
					 */
					if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)){
						newValue = target;
					}
					
					//将box1的left值修改为新值
					obj.style.left = newValue + "px";
					
					//当box1移动到800px的位置时，停止移动
					if(newValue == target){
						
						clearInterval(timer);
					}
					
				},30);
				
			}
			
			
			
			/*
			 * 用来获取任意元素的当前样式
			 * 	参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式的名字
			 * 
			 * 在读取元素的样式时，如果元素没有设置样式，
			 * 	则火狐、Chrome等浏览器会自动计算元素的样式值
			 * 	而IE浏览器，有时用不会自动计算，而是返回默认值，比如宽度会返回auto
			 * 		
			 */
			function getStyle(obj , name){
				
				//判断浏览器中是否含有getComputedStyle这个方法
				if(window.getComputedStyle){
					//支持正常的浏览器
					return getComputedStyle(obj,null)[name];
				}else{
					//只支持IE
					return obj.currentStyle[name];
				}
				
				
			}
			
			
		</script>
		
	</head>
	<body>
		
		<button id="btn01">使box1向右移动</button>
		<button id="btn02">使box1向左移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		
		<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
		
	</body>
</html>

4.定时器的应用完善四： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
		
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*开启绝对定位*/
				position: absolute;
				
				left: 0;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				/*开启绝对定位*/
				position: absolute;
				top: 200px;
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
		
			//定义一个变量来保存定时器的标识
			//var timer;
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后，使box1向右移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取box2
				var box2 = document.getElementById("box2");
				
				//获取btn01
				var btn01 = document.getElementById("btn01");
				//获取btn02
				var btn02 = document.getElementById("btn02");
				//获取btn03
				var btn03 = document.getElementById("btn03");
				
				
				
				//为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					move(box1 , "left" ,800 , 20);
					
				};
				
				//为btn02绑定一个单击响应函数
				btn02.onclick = function(){
					move(box1 , "left" ,0 , 10);
				};
				
				//为btn03绑定一个单击响应函数
				btn03.onclick = function(){
					//点击按钮以后，使box2向右移动
					move(box2 ,  "left" , 500 , 10 , function(){
						move(box2 , "width" , 500 , 10 , function(){
							move(box2 , "height" , 500 , 10 , function(){
								move(box2 , "top" , 0 , 10 , function(){
							
								});
							});
						});
						
					});
					
				};
				
				
			};
			
			
			
			
			
		</script>
		
	</head>
	<body>
		
		<button id="btn01">使box1向右移动</button>
		<button id="btn02">使box1向左移动</button>
		<button id="btn03">使box2向右移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		<div id="box2"></div>
		
		
		<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
		
	</body>
</html>
抽出来的js代码： 

/*
 * 定义一个move()函数来执行一些简单的动画效果
 * 参数：
 * 	obj 要执行动画的对象
 * 	attr 执行动画时要修改的属性
 * 	target 执行动画的目标位置
 * 	speed 动画执行的速度
 *  callback 回调函数，当动画执行完毕以后，该回调函数会执行
 */
function move(obj, attr, target, speed, callback) {
	//关闭之前的定时器
	/*
	 * 一般都会将定时器的标识作为执行动画对象的属性保存，这样可以确保只有当前对象能访问到定时器
	 */
	clearInterval(obj.timer);

	//判断向左移还是向右移
	//0 --> 800 向右移
	//起始位置 < 目标位置 则向右移动，速度为正
	//800 --> 0 向左移
	//起始位置 > 目标位置 则向左移动，速度为负

	//获取元素的起始位置
	var current = parseInt(getStyle(obj, attr));

	if(current > target) {
		//起始位置 > 目标位置 则向左移动，速度为负
		speed = -speed;
	}

	//开启一个定时器，控制box1移动
	obj.timer = setInterval(function() {

		//获取box1的当前的left值
		var oldValue = parseInt(getStyle(obj, attr));

		//通过旧值来计算新值
		var newValue = oldValue + speed;

		//判断newValue是否大于800
		/*
		 * 如果从0 向 800，执行动画，则值越来越大
		 * 如果从800向0执行动画，则值越来小
		 */
		if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
			newValue = target;
		}

		//将box1的left值修改为新值
		obj.style[attr] = newValue + "px";

		//当box1移动到800px的位置时，停止移动
		if(newValue == target) {

			clearInterval(obj.timer);

			//调用回调函数
			callback && callback();
		}

	}, 30);

}

/*
 * 用来获取任意元素的当前样式
 * 	参数：
 * 		obj 要获取样式的元素
 * 		name 要获取的样式的名字
 * 
 * 在读取元素的样式时，如果元素没有设置样式，
 * 	则火狐、Chrome等浏览器会自动计算元素的样式值
 * 	而IE浏览器，有时用不会自动计算，而是返回默认值，比如宽度会返回auto
 * 		
 */
function getStyle(obj, name) {

	//判断浏览器中是否含有getComputedStyle这个方法
	if(window.getComputedStyle) {
		//支持正常的浏览器
		return getComputedStyle(obj, null)[name];
	} else {
		//只支持IE
		return obj.currentStyle[name];
	}

}




咸鸭蛋炒饭
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript-定时器0~9抽奖系统详解（代码）
10-19
JavaScript定时器0~9抽奖系统是一种常见的互动娱乐功能，常用于网页或应用中，增加用户参与度。这个系统的核心在于使用JavaScript的定时器（`setInterval`和`clearInterval`）来实现数字滚动效果，模拟抽奖的过程。...
JavaScript定时器制作弹窗小广告
10-20
JavaScript定时器是JavaScript编程中一个重要的概念，它允许我们在指定的时间间隔后执行某段代码，这对于创建动态效果、实现定时任务或控制用户交互非常有用。在这个案例中，我们利用JavaScript定时器来制作一个弹窗...
js之定时器操作
weixin_30466421的博客
09-27 88
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pmd{ width:200px; ...
JavaScript练习（七）——定时器的应用
weixin_45927758的博客
09-17 186
点击向左移动的按钮，滑块移动到线就停止，点击向右移动的按钮，滑块移动到最左边就停止。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1 { width: 100px; height: 1
js定时器案例2
dengfengling999的博客
02-01 535
点击按钮div可以向右移动，向左移动，详细代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
JavaScript定时器
weixin_34310369的博客
01-05 88
1.往复运动动画 <!doctype html><html><head><meta charset="utf-8"><title>motion</title><script type="text/javascript"> window.onload = function(){ var iLeft = 0...
javascript之定时器
Eluckburlkmotion的博客
07-31 135
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var count=document.getElementById("count"); //使count 中的内同，自动切换
定时器技术应用2.zip
12-04
在IT领域，定时器技术是不可或缺的一部分，广泛应用于各种软件系统和硬件设备中，用于实现时间触发的功能。本文将深入探讨定时器的工作原理、种类、应用场景以及如何在实际项目中运用定时器技术。 首先，定时器是一...
BOM练习
m0_55430536的博客
07-25 197
bom练习
js--定时器--匀速动画，缓动动画
cmy741741的博客
08-01 354
js--定时器--匀速动画，缓动动画。
17.JS基础的学习——17day
actores的博客
03-27 169
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 1.轮播图的实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width:.
HTML+CSS+JavaScript基础
12-19
本阶段内容主要涵盖技术: HTML + CSS + JavaScript基础，同时包括JS函数式框架jQuery
JavaScript练习—二级菜单
老顽固也可爱
08-03 180
二级菜单.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> * { margin: 0;...
BOM
Aqours的博客
09-15 299
BOM BOM简介 浏览器对象模型 BOM可以使我们通过JS来操作浏览器 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 BOM对象 window 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 Navigator 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器 Location 代表当前浏览器的地址栏信息，通过Location可以获取地...
javascript基础（html5轮播图）（四十四）
余正源的博客
02-16 582
1.轮播图的布局： /*去除默认样式*/ *{ margin: 0; padding: 0; } /*设置div*/ #outer{ width: 520px; height: 333px; /*设置居中*/ margin: 50px auto; /* * 设
JS自动/手动/双动轮播图
jxydwhb的博客
08-20 375
JS轮播图四种样子滴！ 一、 1.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图原型</title> <link href="lunbo.css" rel="stylesheet"> <script type="text/javascript" src="lunbo.js"></script> <
JavaScript基础学习（10）
m0_51766302的博客
07-08 94
目录 127 定时器简介 128 切换图片练习 129 修改div移动练习 127 定时器简介 如果希望一段程序可以每间隔一段时间执行一次，可以使用定时调用 setInterval(); 定时调用；可以将一个函数每隔一段时间执行一次 参数： 1.回调函数，该函数会每隔一段时间执行一次 2.每次调用间隔的时间，单位是毫秒 返回值：会返回一个Number类型的数据；作为定时器的唯一标识 clearInterval() 可以用来关闭一个定...
前端---js（自学笔记29)定时调用应用1
ABU_MOlI_ITUI的博客
11-18 309
前提代码中所用到的知识 扩展： offsetleft： 在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。 现分以下几种情况说明： 在父元素均不设置position属性时， 在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离且body.offsetLeft=0, 在firefox浏览器中offsetLeft是元素边框外侧到body内侧的距离body.offsetLeft=-边框宽度
JavaScript基础精讲：正则、call/apply及定时器应用
"这篇资源是关于JavaScript基础知识的深入讲解，特别是对正则表达式、函数调用方式（call()和apply()）、arguments对象的属性（callee和caller）、cookie操作以及定时器（setInterval()、clearInterval()、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咸鸭蛋炒饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值