這個倒計時是不斷變化的,因此需要定時器來自動變化(setinterval)
三個盒子裡面分別存放時分秒
三個盒子利用 innerhtml 放入計算的小時分鐘秒數
第一次執行也是間隔秒數,因此剛重新整理頁面是會有空白
最好採取封裝函式的方式,這樣可以想呼叫一次這個函式,防止剛開始重新整理頁面有空白的問題
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
倒計時title
>
>
span
style
>
head
>
>
>
class
="hour"
>
1span
>
class
="minute"
>
2span
>
class
="second"
>
3span
>
div>
>
// 獲取元素
var hour = document.
queryselector
('.hour');
var minute = document.
queryselector
('.minute');
var second = document.
queryselector
('.second');
var inputtime =
+new
date
('2020-5-20 10:00:00');
// 返回的是使用者輸入時間的總的毫秒數
countdown()
;// 先呼叫一次防止空白要在inputtime下面
// 2. 開啟定時器
setinterval
(countdown,
1000);
function
countdown()
script
>
body
>
html
>
JS迴圈定時器和炸彈定時器
setinterval 迴圈定時器 規定時間間隔執行一次,像鬧鐘一樣,不關閉繼續執行 setinterval code,millisec,lang code 必需。要呼叫的函式或要執行的 串 millisec 必需。lang 可選。cleartimeout settime 清除定時器 60s倒計時特...
JS設定定時器和清除定時器
在做專案中難免會碰到需要實時重新整理,動畫依次出現等等需求,這時候就需要定時器登上我們的 舞台了,所以今天我們就先來了解一下js定時器的設定和清除吧。window物件提供了兩個方法來實現定時器的效果,分別是window.settimeout 和window.setinterval。其中前者可以使一段...
JS之定時器
1 每隔特定的時間呼叫一次,重複呼叫 setinterval function 1000 2 在特定時間之後呼叫函式,只呼叫一次 setinterval function 1000 由於上一步所說的兩個函式均有返回值,我們可以定義乙個變數 var time null time setinterval...