前端js——定时器、定时跑、加速运动

最新推荐文章于 2024-09-25 17:17:21 发布

原创最新推荐文章于 2024-09-25 17:17:21 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #定时器 #运动 #加速

前端专栏收录该内容

35 篇文章

订阅专栏

本文探讨了JavaScript中定时器的使用，包括setInterval和setTimeout的功能及区别，并通过实例展示了如何利用定时器实现元素的动态位置更新。同时，介绍了如何通过DOM操作获取和设置元素的样式属性。

function tim(){
				alert('定时器');
			}

每隔2秒执行一次time函数（一直）
setInterval(tim,2000);
3秒后,执行一次time函数（一次）
setTimeout(tim,3000);
清除时间
clearInterval(tim);

获取属性值

var w=hd.style.width;
var m=hd.style.marginLeft;
alert(w);

width、margin-left必须为行内元素

定时跑

HTML

<input type="button" id="btn" value="点击"/>
<input type="button" id="stop" value="停止"/>
<br />
<div id="hd" style="position:absolute;left: 200px;"></div>

加了绝对定位之后定义left才能好用

css

*{
				padding: 0;
				margin: 0;
			}
			#btn{
				margin-bottom: 50px;
			}
			#hd{
				width: 200px;
				height: 200px;
				background-color: #DB7093;
			}

在这里插入图片描述

var btn=document.getElementById('btn');
			var hd=document.getElementById('hd');
			var stop=document.getElementById('stop');
			
			btn.onclick=function(){
//			  tim为全局变量
			  tim=setInterval(function(){
					var old_left=hd.style.left;
//					获得当前的left值
					var new_left=parseInt(old_left)+5;
//					计算新的left值,每次像素+5
                    hd.style.left=new_left+'px';
				},20)
			}
			
			stop.onclick=function(){
				clearInterval(tim);
			}

tim=setInterval(function(){} 全局变量
var tim=setInterval(function(){} 仅在函数内

加速运动
var speed=1;
函数内加 speed=speed*1.05;
var new_left=parseInt(old_left)+speed;