怎样使用定时操作函数制作动画效果?

2016-07-11 1255 1 编辑:Monster 来源:JavaScript书籍

定时操作通常有两种使用目的:一种是周期性地执行脚本,例如在页面上显示时钟,需要每隔一秒钟更新一次时间的显示;另一种则是将某个操作延时一段时间执行,例如迫使用户等待一段时间才能进行操作,可以使用setTimeout()函数使其延时执行,但后面的脚本在延时期间可以继续运行不受影响。

定时操作函数还是利用JavaScript制作网页动画效果的基础,例如网页上的漂浮广告,就是每隔几毫秒更新一下漂浮广告的显示位置。其他的如打字机效果、图片轮转显示等,可从说一切动画效果都离不开定时操作函数。JavaScript中的定时操作函数有setTimeout()和setInterval(),下面分别来介绍。

1.setTimeout()函数

该函数用于设置定时器,在一段时间之后执行指定的代码。

由于setTimeout函数的作用是过1秒钟之后执行指定为代码,执行完一次代码后就不会再重复的执行代码。所以.html是通过setTimeout()函数递归调用init()实现每隔一秒执行一次dispTime()函数的。

想一想:把“setTimeout(init, 1000) ;”中的“1000”改成"200”还可以吗?

如果要清除setTimeout()函数设置的定时器,可以使用clearTimeout()函数,方法是将setTimeout(init, 1000)改写成sec=setTimeout(init, 1000),然后再使用clearTimeout(sec)即可。

2.setlnterval()函数

该函数用于设置定时器,每隔一段时间执行指定的代码。需要注意的是,它会创建间隔ID,若不取消将一直执行,直到页面卸载为止。因此如果不需要了应使用clearInterval取消该函数,这样能防止它占用不必要的系统资源。它的用法如下:setInterval(code,interval)

如果要清除setInterval函数设置的定时器,可以使用clearInterval函数。

3.用定时操作函数制作动画效果小结

(1)首先获取需要实现动画效果的HTML元素,一般用getElementById()方法。

(2)将实现动画效果的代码写在一个函数中,如需要移动元素位置,则代码中要有改变元素位置的语句;如果改变元素属性,则代码中要有设置元素属性的语句,这样每执行一次函数就会改变对象的某些属性。

(3)通过setInterval()调用实现动画的函数或setTimeout()递归调用实现动画函数的父函数,使其重复执行。


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联