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