倒計時的JS實現方法

2021-06-11 18:38:38 字數 1381 閱讀 4765

倒計時其實就是date類的一些計算與處理,主要是些繁瑣的工作。為了省掉他人的功夫以及方便後來的使用,我已經將倒計時主要處理方法封裝起來了。方法名為:fntimecountdown(引數1, 引數2)

具體使用如下,首先,呼叫倒計時js指令碼,您可以在頁面的任何位置嵌入這段指令碼:

var fntimecountdown = function(d, o)

return string(n);

}else

},dv: function();

if(dur > 0)

return pms;

},ui: function()

if(o.mini)

if(o.hour)

if(o.day)

if(o.month)

if(o.year)

settimeout(f.ui, 1000);

} };

f.ui();

};

然後,呼叫方法fntimecountdown(引數1, 引數2)即可,於是就可以實現倒計時效果了,很簡單吧。

下面是重點了,就是關於這裡的引數。引數1指的是截止的時間。我個人建議使用utc()方法建立date物件傳遞給date建構函式。例如,date.utc(2030, 6, 27, 16, 34),表示的就是2023年7月27日161時34分0秒(月份需要加1),然後將這個引數替換「引數1」就可以了。具體來說就是:

var d = date.utc(2030, 6, 27, 16, 34);

fntimecountdown(d, 引數2)

關於引數2,有點小複雜。引數2是個物件,同時也是個物件集,是顯示秒、分、時數值標籤的dom物件集合,裡面的物件名是固定的,不可自己定義,否則沒有效果的。考慮到擴充套件性,物件名從秒一直到年,具體如下:

以上所有的引數都是可選的,如果哪個引數沒有,則不顯示時間變化,如果引數對應的dom物件不存在,自然也沒有數值變化的。舉個例子吧,有三個標籤,分別用來顯示剩餘的小時數,分鐘數以及秒數的,其id分別是hour,mini,sec,如下所示:

時 分 秒

則第二個引數應該這麼寫:

var obj =

所以兩個引數合起來就是:

var d = date.utc(2030, 6, 27, 16, 34);

var obj =

fntimecountdown(d, obj);

來自張鑫旭-鑫空間-鑫生活

[

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 ...