怎樣使用定時操作函數制作動畫效果?

2016-07-11 1473 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()遞歸調用實現動畫函數的父函數,使其重復執行。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 最近特别火的区块链怎么赚钱 挖机和卡车养哪个赚钱 高考选什么专业赚钱 加工赚钱方式 牛逼彩票游戏 2017淘宝还能赚钱吗 网上怎么做任务赚钱 方舟药怎么赚钱 皇家88安卓 农村养殖什么赚钱视频教程 新倚天金字塔怎么赚钱 天龙八部3怎样挂机赚钱 国民彩票游戏 思域 怎么赚钱 出售logo设计赚钱 捕鱼大亨系统txt下载