一. 设置定时器
父元素和子元素都要设置定位,子绝父相
1.1设置超时定时器 setTimeout()
超时调用需要使用window对象的setTimeout()方法,该方法接受两个参数:调用函数或计算表达式和以毫秒为单位的时间(即在执行代码前需要等待多少毫秒)。
//setTimeout(callback, after)
//callback 时间到了之后要执行的方法;
//after 多长时间之后去执行这个方法
//设置超时定时器
//调用函数
setTimeout("fun()", 3000);
//执行js代码
setTimeout("alert(“Hello world”)", 3000);
//直接写执行方法
var timeoutId = setTimeout(function(){
alert(“Hello world”);}, 1000);
1.2 清除超时定时器 clearTimeout()
//取消定时器
clearTimeout(timeoutId);
只要是指定的时间尚未到来之前调用clearTimeout(),就可以取消掉超时定时器。
1.3 设置间歇定时器 setInterval()
间歇定时器与超时定时器类似,只不过它会按照指定的时间间隔重复执行代码,直到间歇定时器被取消或者页面被关闭。
//setInterval(callback, repeat)
//callback:回调方法
//repeat: 每隔多长时间调用一次,单位是毫秒(ms)。
设置间歇定时器的方法是setInterval(),它接受的参数与setTimeout()相同:要执行的代码和每次执行之前需要等待的毫秒数。如下例:
//设置间歇定时器
setInterval(function(){
console.log(“Hello world”);
}, 1000);
1.4 清除间歇定时器 clearInterval()
调用setInterval()方法同样会返回一个定时器的唯一标识(ID)。要取消间歇定时器,可以用clearInterval()方法并传入相应的ID值就行了。
clearInterval(intervalId);
二. JS动画
主要实现以下几种简单的动画效果(其实原理基本相同):
1.匀速动画:物体的速度固定
2.缓动动画:物体速度逐渐变慢
2.1 匀速动画
(以物体左右匀速运动为例)
-
动画效果主要是用定时器setInterval()来实现的,每隔几毫秒让物体移动一点距离,通过不断调用定时器来达到让物体运动的效果。
-
将定时器放在一个函数内,定义物体的运动速度speed为10,判断物体的运动方向(向左走或向右走)来规定speed的正负;
-
然后将物体的offsetLeft加上速度speed 赋值给物体的left样式值(要给物体设置定位);
-
当物体到达目标位置时清除定时器;
2.2 缓动动画
(和匀速运动相同原理,只不过速度做些改变)
-
让速度等于目标值和当前位置之差/10,二者之差会越来越小,即速度speed也会越来越小;
-
二者之差除以十并不总是整数,可能会导致物体位置和目标值不能完全相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整;