純js實現倒計時

2021-06-27 16:01:21 字數 1058 閱讀 2148

通過js實現頁面的倒計時功能。

思路: 傳入乙個秒數c,c/60可以得到分鐘m, c%60可以得到顯示的秒數s,同理,再將m/60可是得到小時數, m/%可以得到分鐘數。通過setinterval每次將總秒數-1,並將計算所得時間顯示到頁面上。

第一版的骯髒**如下, 可以作為反面教材思考一下

缺陷:

1、定義了眾多的全域性變數, 

2、沒有復用性, 

3、setinterval容易導致佇列過多, 結束事件如果是非阻塞事件, 倒計時會繼續執行出現負數, 

4、不符合物件導向思想。。。

針對缺陷1的解決方案是, 定義乙個函式, 將相關全域性變數放到函式內部,使之成為區域性變數

針對缺陷2:為函式指定引數,提高復用性。 這裡定義了3個引數vtimelength為倒計時總秒數,showtagid為顯示到頁面元素的id, callback為倒計時結束後的回掉方法

針對缺陷3:用settimeout替代setinterval

優化後的**如下:

這裡有一點需要注意

settimeout(function(), 1000);
第一次我將此句寫成了
settimeout(countdowninner(vtimelength), 1000);
結果函式直接執行了, 沒有等待1秒的時間。如果沒有入參, 即settimeout("countdowninner()", 1000); 則可正常執行。

至於前面提到的不夠物件導向的缺陷, 也是剛剛接觸, 這裡貼出**,希望能夠互相交流

start

stop

乙個難點是this的使用, 在函式內部, this是呼叫當前函式範圍,所以settimeout(function(), 1000);會出現undefined。

解決方案是定義乙個that變數接收外部函式的this指標,然後通過that即可呼叫外部域。

js實現倒計時

實現要點 1.思路 搶購時間 現在時間,用 gettime 得到時間 單位為毫秒 再轉換為標準時間 2.用 setinterval 方法來實現倒計時,當時間為0時,清除計時器 3.設定按鈕的屬性為禁用,時間到了清除 disabled 屬性 4.將時間通過 innerhtml 屬性顯示在p標籤上 5....

js倒計時,秒倒計時,天倒計時

html 1 html 2 距某某開幕式還有 天 html html html id timer style color red 這次利用系統時間自校驗倒計時,無需手工調校使得倒計時更為精確,及詳細注釋如下 id clock 00 01 11 00 id startb type button val...

js 多個倒計時,毫秒倒計時

其實主要是借鑑了了這篇文的寫法 俺稍作了修改,以便更適合我的需要 實現功能 呼叫乙個函式,傳入html元素的id,和乙個截止時間 unix時間戳 在該html元素中列印出到當前到截止時間為止的倒計時,精確到毫秒 效果圖如下 h2 毫秒的倒計時 h2 div id timer1 div div id ...