前端倒計時效果

2021-10-10 17:58:57 字數 1738 閱讀 5267

分析:

>

>

charset

="utf-8"

>

>

網易雲-title

>

>

divspan

style

>

head

>

>

type

="button"

class

="start"

>

開啟定時器button

>

type

="button"

class

="stop"

>

暫停定時器button

>

>

距離2023年12月份四級考試還有p

>

>

class

="day"

>

span

>

天 class

="hour"

>

span

>

時 class

="minute"

>

span

>

分 class

="second"

>

span

>

秒 div

>

>

// 1. 獲取元素

var day = document.

queryselector

('.day');

//天數的黑色盒子

var hour = document.

queryselector

('.hour');

// 小時的黑色盒子

var minute = document.

queryselector

('.minute');

// 分鐘的黑色盒子

var second = document.

queryselector

('.second');

// 秒數的黑色盒子

var inputtime =

+new

date

('2020-12-12 00:00:00');

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

countdown()

;// 我們先呼叫一次這個函式,防止第一次重新整理頁面有空白

// 2. 開啟定時器

var start = document.

queryselector

('.start');

var stop = document.

queryselector

('.stop');

var timer =

null

; start.

addeventlistener

('click'

,function()

) stop.

addeventlistener

('click'

,function()

)function

countdown()

script

>

body

>

html

>

倒計時效果

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

setInterval倒計時效果

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

JS 倒計時效果

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