js简单实现倒计时效果

css简单实现了一下上方样式

先说一下时间戳 -->距离1970年1月1日00时00分00秒 到现在的毫秒数

将来的时间 - 就现在的时间 = 剩余的时间

剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是倒计时

比如 将来时间戳 2000ms - 现在的时间戳 10000ms = 10000ms

1000ms转换为就是0小时0分1秒

获取时间戳有三种方法 geiTime()       简写 +new Date()       Date.now()

在这里我用new Date()来实现

先拿到div盒子  -->  const div = document.querySelector('.box');

function getCountTime(){

1.首先先获取当前的时间戳

const now = +new Date()

2.再获取将来时间戳

const last = +new Date( ' 2022-04-06 08:30:00 ' )

3.这时候你可以输出看一下 

console.log('当前时间戳'+now,'将来时间戳'+last);

4.得到剩余时间

const count  = ( last - now ) / 1000

5.拿到剩余时间后 获取天数 时分秒

let d = parseInt ( count / 60 / 60 / 24 )  天数

d = d < 10 ? '0' + d : d;// 判断得出的结果小不小于10  自动补零

let h = parseInt ( count / 60 / 60 % 24 ) 小时

h = h < 10 ? '0' + h : h;

let m = parseInt ( count / 60 % 60 ) 分钟

m = m < 10 ? '0' + m : m;

let s = parseInt ( count % 60 ) 秒

s = s < 10 ? '0' + s : s;

console.log( ` ${d}天${h}时${m}分${s}秒 ` );     

6.将拿到的时分秒 给到页面

document.querySelector('#d').innerHTML = d;

document.querySelector('#h').innerHTML= h;

document.querySelector('#m').innerHTML= m;

document.querySelector('#s').innerHTML= s;

         }

7.先自身调用一次 不然会出现你的静态数据

getCountTime();

8.再定时器调用

setInterval(getCountTime,1000)