【小案例】定时器的应用

最新推荐文章于 2022-11-08 09:17:05 发布
最新推荐文章于 2022-11-08 09:17:05 发布
阅读量400 收藏
点赞数
分类专栏： web前端相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39843945/article/details/89532461
版权

一：(仅可向右移动)

在这里插入图片描述
1.HTML

	<button id="btn">点击按钮以后box1向右移动</button>
	<br/><br/>
	<div id="box"></div>
	<div style="width: 0px;height: 1000px;position: absolute;left:800px;border-left: 1px black solid;top: 0;">	</div>

2.CSS

*{
		margin: 0;
		padding: 0;
	}
	#box{
		height: 100px;
		width: 100px;
		position: absolute;
		background-color: red;
		left: 0;
	}

3.JS

window.onload=function(){
		var btn=document.getElementById("btn");
		var box=document.getElementById("box");
		//点击按钮以后，使box1向右移动(left值增大)
		
		//定义一个变量，用来保存定时器标识
		var timer;
		btn.onclick=function(){
			//关闭上一个定时器
			clearInterval(timer);	
				
			//开启一个定时器，用来执行动画效果
			timer=setInterval(function() {
				
				//获取box1原来的left值
				var oldV=parseInt(getStyle(box, "left"));
				
				//在旧值基础上增加
				var newV=oldV+1;
				
				//判断newV是否大于800
				if(newV>800){
					newV=800;
				}
				//将新值设置给box1
				box.style.left=newV+"px";
				
				//当元素移动到800px时，使其停止
				if(newV==800){
					clearInterval(timer);
				}
					
				}, 30);
		};
		
		/* 
		定义一个函数，用来获取指定元素的当前的样式
		参数：
			obj要获取样式的元素
			name要获取的样式名
		
		 */
		function getStyle(obj,name){
			 	/* 	
			 		没加window是变量在作用域中寻找，
				 	加了window是属性
				 	变量没找到会报错，而属性没找到返回undefined 
			 	*/
			 	if(window.getComputedStyle){
			 	
			 	//正常浏览器的方法
			 		return getComputedStyle(obj,null)[name];
			 	}
			 	else{
			 	//IE8的方法
			 		return obj.currentStyle[name];
			 	}
			 } 	
	};

二：完善（可向右向左移动，且将移动功能封装成一个函数，且使用户不用考虑speed正负问题）

在这里插入图片描述

1.HTML

	<button id="btn">点击按钮以后box1向右移动</button>
	<br/><br/>
	<button id="btn02">点击按钮以后box1向左移动</button>
	<br/><br/>
	<div id="box"></div>
	
	<div style="width: 0px;height: 1000px;position: absolute;left:800px;border-left: 1px black solid;top: 0;"></div>

2.CSS

*{
		margin: 0;
		padding: 0;
	}
	#box{
		height: 100px;
		width: 100px;
		position: absolute;
		background-color: red;
		left: 0;
	}

3.JS

window.onload=function(){
		var btn=document.getElementById("btn");
		var box=document.getElementById("box");
		var btn02=document.getElementById("btn02");
		
		//定义一个变量，用来保存定时器标识
		var timer;
		
		btn02.onclick=function(){
			move(box, 0, 10);
		};
		//点击按钮以后，使box1向右移动(left值增大)	
		btn.onclick=function(){
			move(box, 800, 10);
	};
	
	//尝试创建一个简单动画的函数
	/*  
		参数：
			obj:要执行动画的对象
			target:执行动画的目标位置
			speed:移动的速度(整数向右移动，负数向左移动)
	*/
	function move(obj,target,speed){
			//关闭上一个定时器
			clearInterval(timer);	
				
			//判断speed正负值
			//如果从0向800移动speed为正
			//如果从800向0移动speed为负
			
			//获取box1当前的位置
			var current=parseInt(getStyle(obj, "left"));
			if(current>target){
				//此时speed应为负值
				speed=-speed;
			}
			
			//开启一个定时器，用来执行动画效果
			timer=setInterval(function() {
				
				//获取box1原来的left值
				var oldV=parseInt(getStyle(obj, "left"));
				
				//在旧值基础上增加
				var newV=oldV+speed;
				
				//判断newV是否大于800
				
				//当向左移动时，要考虑值是否小于target
				//当向右移动时，要考虑值是否大于target
				if( newV<target && speed<0 || newV>target && speed>0 ){
					newV=target;
				}
				//将新值设置给box1
				obj.style.left=newV+"px";
				
				//当元素移动到800px时，使其停止
				if(newV==target){
					clearInterval(timer);
				}
					
				}, 30);	
	}	
		/* 
		定义一个函数，用来获取指定元素的当前的样式
		参数：
			obj要获取样式的元素
			name要获取的样式名
		
		 */
		function getStyle(obj,name){
			 	/* 	
			 		没加window是变量在作用域中寻找，
				 	加了window是属性
				 	变量没找到会报错，而属性没找到返回undefined 
			 	*/
			 	if(window.getComputedStyle){
			 	
			 	//正常浏览器的方法
			 		return getComputedStyle(obj,null)[name];
			 	}
			 	else{
			 	//IE8的方法
			 		return obj.currentStyle[name];
			 	}
			 } 	
	};

三：进一步完善（在简单动画函数里添加了attr和callback，把它写在一个外部js文件中）

1.HTML

	<button id="btn">点击后box1右移</button>
	<button id="btn02">点击后box1左移</button>
	<button id="btn03">点击后box2右移</button>
	<button id="btn04">测试按钮</button>
	<div id="box"></div>
	
	<div id="box2"></div>
	<div style="width: 0px;height: 1000px;position: absolute;left:800px;border-left: 1px black solid;top: 0;"></div>

2.CSS

*{
		margin: 0;
		padding: 0;
	}
	#box{
		height: 100px;
		width: 100px;
		position: absolute;
		background-color: yellow;
		left: 0;
	}
	#box2{
		height: 100px;
		width: 100px;
		position: absolute;
		background-color:greenyellow;
		left: 0;
		top:200px;
	}

3.JS(内部)

window.onload=function(){
		var btn=document.getElementById("btn");
		var box=document.getElementById("box");
		var btn02=document.getElementById("btn02");
		var btn03=document.getElementById("btn03");
		var btn04=document.getElementById("btn04");
		
		//定义一个变量，用来保存定时器标识
		/* 
			目前我们的定时器标识由我们全局变量timer保存
				所有正在执行的定时器都在这个变量中保存
		 */
		//var timer;
		
		
		//点击按钮以后，使box1向右移动(left值增大)	
		btn.onclick=function(){
			move(box,"left", 800, 10);
		};	
		//box向左移动
		btn02.onclick=function(){
			move(box,"left", 0, 10);
		};
		
		//box2向右移动
		btn03.onclick=function(){
			move(box2,"left", 800, 20);
		};
		
		//测试
		btn04.onclick=function(){
			//move(box2,"width", 800, 20);
			//move(box2,"height", 800, 20);
			//move(box2,"top", 800, 20);
			move(box2, "width", 800, 10, function() {
				move(box2, "height", 300, 10, function() {
					move(box2, "top", 300, 100, function() {	
					})
				})
			})
		};
	};

4.JS（外部）　ｔｏｏｌｓ．ｊｓ

//尝试创建一个简单动画的函数
	/*  
		参数：
			obj:要执行动画的对象
			attr:要执行动画的样式，比如：left,top width
			target:执行动画的目标位置
			speed:移动的速度(整数向右移动，负数向左移动)
			callback:回调函数，这个函数将会在动画执行完成以后执行
			
	*/
	function move(obj,attr,target,speed,callback){
			//关闭上一个定时器
			clearInterval(obj.timer);	
				
			//判断speed正负值
			//如果从0向800移动speed为正
			//如果从800向0移动speed为负
			
			//获取box1当前的位置
			var current=parseInt(getStyle(obj,attr));
			if(current>target){
				//此时speed应为负值
				speed=-speed;
			}
			
			//开启一个定时器，用来执行动画效果
			
			//向执行动画的对象添加一个timer属性，用来保存自己的定时器标识
			obj.timer=setInterval(function() {
				
				//获取box1原来的left值
				var oldV=parseInt(getStyle(obj, attr));
				
				//在旧值基础上增加
				var newV=oldV+speed;
				
				//判断newV是否大于800
				
				//当向左移动时，要考虑值是否小于target
				//当向右移动时，要考虑值是否大于target
				if( newV<target && speed<0 || newV>target && speed>0 ){
					newV=target;
				}
				//将新值设置给box1
				obj.style[attr]=newV+"px";
				
				//当元素移动到800px时，使其停止
				if(newV==target){
					clearInterval(obj.timer);
					//动画执行完毕，调用回调函数
					//callback();
					callback&&callback();//我尼玛  ，牛逼
				}
					
				}, 30);	
	}	
		/* 
		定义一个函数，用来获取指定元素的当前的样式
		参数：
			obj要获取样式的元素
			name要获取的样式名
		
		 */
		function getStyle(obj,name){
			 	/* 	
			 		没加window是变量在作用域中寻找，
				 	加了window是属性
				 	变量没找到会报错，而属性没找到返回undefined 
			 	*/
			 	if(window.getComputedStyle){
			 	
			 	//正常浏览器的方法
			 		return getComputedStyle(obj,null)[name];
			 	}
			 	else{
			 	//IE8的方法
			 		return obj.currentStyle[name];
			 	}
			 }
希冀miracle
关注
专栏目录
定时器案例
qq_64421953的博客
03-31 749
定时器：就好比一个闹钟，在一定时间之后，被唤醒并执行某个之前设定好的任务 整体操作： 1）描述一个任务：Runnable + time 2）使用优先队列来组织若干个任务，PriorityBlockingQueue 3）实现schedule方法来注册任务到队列中 4）创建一个扫描线程，这个扫描线程不停的获取到队首元素，并且判断时间是否到达 注意问题：让MyTask类能够支持比较，以及注意解决“忙等”问题 说到计时器就需要Java.util.Timer包 这个包的核心方法就一个，schedule
JavaScript定时器的简单小案例
01-08
在实际应用中，定时器有很多有趣的用途。例如，你可以用它们来实现动画效果。下面是一个简单的例子，模拟一个小圆点围绕大圆进行圆周运动： ```html <div class="point"></div> ``` ```css .round { box-...
定时器的应用
m0_37202877的博客
11-08 1202
定时器
定时器的运用
weixin_67107650的博客
03-13 386
共有10个内容，可能操作顺序不一样。 定时器又可以分两个，一个是setInterval（间隔定时器），一个是setTimeout（延时定时器），这次我们主要讲间隔定时器。 首先我们还是要养成好习惯，先创建一个属于这个案列的专属文件夹，然后取名为该案列名字，里面再创建属于各个的存放该代码的文件夹。 2.开始在vs软件操作代码，首先要把HTML框架敲打出来。给它设置一个类class里面设置三个span标签表示时间三个数数字显示，下面设置一个类class负责包裹三个button按...
定时器应用
look857857的博客
03-26 424
JavaScript--定时器应用和介绍
TIM定时中断之定时器外部时钟应用案例
最新发布
08-15
本案例实现了一个定时器外部时钟的功能。该程序使用了外部时钟来驱动定时器，我们可以在定时器指定的外部引脚上输入一个方波信号来提供定时器计数的时钟，在这里使用的是对射式红外传感器来手动模拟一个外部时钟。当...
网集50 个 555 定时器应用电路-中文版.zip
06-02
《555定时器应用电路探索》 555定时器是一种极其通用的集成电路，自1971年推出以来，已经成为电子工程师的必备工具。它以其灵活性、易用性和广泛的用途，在各种电子项目中占据了一席之地。本资料集包含了50个555...
555定时器应用电路
12-06
### 555定时器应用电路详解 555定时器是一种非常常见的模拟与数字混合型集成电路，在电子设计中有着广泛的应用。它可以被配置成多种不同的电路，包括但不限于单稳态（单次触发）、双稳态（施密特触发器）以及无稳态...
定时器的应用 Timer
一李
07-10 389
每隔一段固定的时间执行一段代码 Timer public class Timer01 { //定时器 public static void main(String[] args) throws ParseException { Timer t = new Timer(); //指定时间 t.schedule(new Blog(), new SimpleDateFormat("y...
定时器的简单实例
weixin_34221775的博客
06-08 84
private Timer timer = new Timer(); timer.schedule(task, 800); TimerTask task = new TimerTask() { @Override public void run() { intent = new Intent(LoadUI.this, LoadDataService.class); Bundle...
定时器简单应用介绍
weixin_45105458的博客
07-30 252
第一种：炸弹定时器：setTimeout（）间隔时间后执行（一次）： 在指定的毫秒数后调用函数或计算表达式。 clearTimeout（）清除计时器 案例：获取验证码倒计时 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l...
定时器的使用以及应用
langrentao的博客
03-10 1808
setInterval以及clearInterval 使用定时器时，为了他能方便的关闭，定义一个全局变量，timer,并且在定时器开始前加入一个清除定时器，防止出现定时器再次点击有余留；以下是创建三个div，然后鼠标放在上面后，宽度会增加 div{width:100px;height:50px;background:’pink’;margin:10px}; wind...
10 . 定时器介绍和应用
weixin_41043617的博客
05-08 655
在前面我们使用到的延时是通过CPU 循环等待产生的，这个延时是不精确的。现在给大家介绍STM32F1 内部SysTick 系统定时器，通过一个简单的LED 流水灯程序来讲述如何配置SysTick 系统定时器实现精确延时。分为如下几部分内容： 1. SysTick 定时器介绍 2. SysTick 定时器操作 3. 软件设计 4. 实验现象 SysTick 定时器介绍 SysTick 定时器也叫SysTick 滴答定时器，它是Cortex-M3 内核的一个外设，被嵌入在NVIC 中。它是一个24 位
定时器的应用举例
HappyDelano的专栏
08-19 607
//定时器的应用举例： Timer time = new Timer(); time.schedule(new TimerTask() {         @Override         public void run() {             // TO
定时器的应用小案例（超酷时钟）
fuxiaomi2016的博客
12-17 484
body{ background:#222; font-size: 50px; color:#ddd; } window.onload=function(){ var aImg=document.getElementsByTagName('img'); getTime(); setInterval(getTime,1000) ; function ge
Winform定时器轮播相册案例教程
资源摘要信息:"一个相册案例-支持定时器轮播" 在了解这个相册案例之前，首先需要对其中涉及到的关键技术有一个...通过本案例的学习，开发者可以加深对Winform中定时器控件应用的理解，提升界面编程和事件处理的技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值