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

定时操作通常有两种使用目的：一种是周期性地执行脚本，例如在页面上显示时钟，需要每隔一秒钟更新一次时间的显示;另一种则是将某个操作延时一段时间执行，例如迫使用户等待一段时间才能进行操作，可以使用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()递归调用实现动画函数的父函数，使其重复执行。