JS——計數器介紹及setinterval()案例


計數器方法:setInterval()、setTimeout()方法 及 clearInterval()、clearTimeout()方法

簡單介紹:

(1)setInterval()和clearInterval():

setInterval():周期性地調用一個函數(function)或者執行一段代碼。

clearInterval()取消掉用setInterval設置的重復執行動作。

(2)setTimeout()和clearTimeout():

setTimeout():在指定的延遲時間之后調用一個函數或者執行一個代碼片段。
clearTimeout():方法可取消由 setTimeout() 方法設置的 timeout。

詳細介紹見鏈接:https://segmentfault.com/a/1190000002475127

 

下面顯示簡單的setInterval()方法的案例:

顯示效果如下圖所示:

詳細代碼如下圖:

代碼講解:

第20-22行代碼:獲取元素div及input、設置變量clearTime為null(用於存放后面的計數器方法)。

第25行代碼:把setInterval計數器存入變量clearTime中;當點擊第一個按鈕,啟動計數器方法,讓div不停地執行向右移動的運動。

 第30行代碼:當點擊第二個按鈕,執行clearInterval()方法,清除存入到變量clearTime中的setInterval計數器方法,讓div暫停向右的運動。

 

檢測clearTime變量的值:(第31行代碼)

clearTime輸出為:第25行代碼setInterval的計數器方法進行的次數;   因為clearTime變量是在外部定義的,所以在31行代碼函數內部訪問的到clearTime的內容


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM