前端JS案例(一) 倒計時

2021-08-06 06:10:43 字數 1035 閱讀 8499

倒計時案例解析:

1、設定var timeid = setinterval(function(){},時間毫秒); 通常為每隔1000毫秒執行一次。

2、在函式中設定if條件,在某種情況下清除timeid,clearinterval(timeid);

3、如下所示設定小時、分鐘、秒

var totalsec = 3*60*60;

var hour = math.floor(totalsec / 3600);

var minute = math.floor(totalsec % 3600 /60);

var sec =totalsec % 60;

4、通過innerhtml填入指定的元素中,實現倒計時效果。

function cutdowntime() 

// 1遞減

totalsec--;

// 當前的秒 對應到 多少小時 多少分 多少秒

var hour = math.floor(totalsec / 3600);

var minute = math.floor(totalsec % 3600 /60);

var sec =totalsec % 60;

// 2修改dom元素顯示

// 小時

liarr[0].innerhtml =math.floor(hour/10) ; // 十位 41 / 10 =4.1 所以要取整數

liarr[1].innerhtml =hour%10 ; // 個位

// 分

liarr[3].innerhtml = math.floor(minute/10);// 是為 55/10 = 5.5 取整

liarr[4].innerhtml = minute%10;

// 秒

liarr[6].innerhtml = math.floor(sec/10);

liarr[7].innerhtml = sec%10;

},1000)

}

js 倒計時案例

要求實現 給定時間 距離超過24小時 的 剩餘時間 使用倒計時展示 不想打字,湊合著點看 計時器 param time 初始時間 單位秒 param dom 元素 function timer time,dom 重新整理時間 timer.prototype.retime function else ...

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