Search

与我们合作

我们专注:网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务:网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案

有一个品牌项目想和我们谈谈吗?

您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话,让我们听到您的声音

您也可通过下列途径与我们取得联系:

地 址: 深圳.龙岗区大运软件小镇11栋3楼

电 话: 138 2888 4598 / 138 0880 9053

网 址: http://www.appvx.cn

快速提交您的需求 ↓

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

时间:2016-07-11 浏览:4352 编辑: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()递归调用实现动画函数的父函数,使其重复执行。


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
GO 欣赏案例
查看经典案例
在线咨询
电话咨询
0755-36630177
返回顶部
在线咨询 获取报价 电话咨询
获取报价
您的称呼:

*

您的电话:

*

您的邮箱:

*

提交 重置
重要的事情,电话里聊

接通客服

不方便的时候线上咨询,在线等哦