定時器(js小案例)

2021-10-06 07:04:43 字數 1307 閱讀 2642

這個倒計時是不斷變化的,因此需要定時器來自動變化(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...