用js實現倒計時效果

2022-07-10 09:57:09 字數 1408 閱讀 9017

首先獲得兩個時間的時間戳

var newdate = new date('2021-01-22 21:25:00').gettime();


var olddate = new date().gettime();

然後相減獲得相差時間的毫秒數

var difference = newdate - olddate

計算還有多少天,多少小時,多少分,多少秒

1


var day = parseint(difference / 1000 / 60 / 60 / 24);


2 difference = difference % (1000 * 60 * 60 * 24)


3var hours = parseint(difference / 1000 / 60 / 60);


4 difference = difference % (1000 * 60 * 60)


5var m = parseint(difference / 1000 / 60);


6 difference = difference % (1000 * 60)


7var s = parseint(difference / 1000)

最後列印一下,就是距離目標時間的天數(精確到秒)

console.log(day + '-' + hours + '-' + m + '-' + s);

怎麼讓他顯示在頁面上並且一直動呢,,這時候我們的定時器就登場了

首先建立乙個div盒子存放所有的數字

天小時分秒

然後動態新增

show[0].innerhtml =day;


show[1].innerhtml =hours;


show[2].innerhtml =m;


show[3].innerhtml = s;

封裝函式,並加入定時器,

完整**來啦(直接複製貼上到html就可以執行)



天小時分秒

注意:自己用的時候可以寫乙個簡單的判斷,如果 difference (相差毫秒數)小於等於零,可以show.innerhtml新增乙個提示,

還有還有,我這裡設定的時間比較近,因為那個時辰對我來說很重要,我很期待,過幾天可能會是負數,所以我沒設定提示,也是避免大家誤會,你們可以在new date('')寫任何時間,如果不用當前時間可以設定每秒讓秒數減一就可以,下次有空再整理啦

哦!對了,這不適用於蘋果手機哦

我記得之前看到蘋果手機裡要用new data(mon jan 11 2021 14:46:33 gmt+0800)這種模式,大家試試哦~

JS實現倒計時效果

效果 倒計時效果 title div style head h 1 div m 2 div s 3 div 獲取時分秒 var hour document.queryselector h var minute document.queryselector m var second document....

JS 倒計時效果

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

倒計時效果

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