setInterval倒計時效果

2021-10-23 08:57:49 字數 1205 閱讀 5888

要點:

1、這個定時器是不斷變化的所以需要定時器來自動變化,所以用setinterval

2、三個黑色的盒子分別存放時分秒

3.三個盒子利用innerhtml將倒計時間寫入

4、第一次執行也是間隔毫秒數,因此重新整理頁面會有空白

5、最好採取封裝函式的方式,這樣可以先呼叫一次這個函式,防止剛開始重新整理頁面空白問題。

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

<

/head>

div

<

/style>

="hour"

>

<

/div>

="minute"

>

<

/div>

="seconds"

>

<

/div>

//1.獲取元素

var hour = document.

queryselector

(".hour");

var minute = document.

queryselector

(".minute");

var seconds = document.

queryselector

(".seconds");

var inputtime =

+new

date

('2020-7-15 18:00:00');

//返回的是使用者輸入時間總的毫秒數

countdown()

;//我們先呼叫一次,是為了頁面一重新整理就能出現時倒計時時間

//2.開啟定時器

setinterval

(countdown,

1000);

function

countdown()

<

/script>

<

/body>

<

/html>

倒計時效果

案例分析 1.這個倒計時是不斷變化的,因此需要定時器來自動變化 setinterval 2.三個黑色盒子分別存放時分秒 3.三個黑色盒子利用innerhtml放入計算的小時分鐘秒數 4.第一次執行也是間隔毫秒數,因此剛重新整理頁面會有空白 5.最好採取封裝函式的方式,這樣可以先呼叫一次這個函式,防止...

前端倒計時效果

分析 charset utf 8 網易雲 title divspan style head type button class start 開啟定時器button type button class stop 暫停定時器button 距離2020年12月份四級考試還有p class day span...

JS 倒計時效果

今天給表弟逛網上 看膝上型電腦時,看見有一些顯示倒計時的效果,覺得蠻好的,特別去查了下,今天給大家分享下倒計時的製作,如有缺漏請大家指出。但不單單是這樣的計算,畢竟有可能存在這種情況 截止時間 2019 8 17 3 20 10 現在時間 2019 8 16 15 35 20 這中間時分秒相減會為負...