网页倒计时先写html代码js代码效果图（不是动图）

很多网页活动需要倒计时，怎么用js来写呢,

先写html代码

包裹的盒子给宽高，背景色；行高等于高，单行文本垂直居中；text-align：center让盒内文字水平居中（可以让行内元素和行内块元素水平居中对齐）；字号大小随便给

 <style>
        .box {
            width: 400px;
            height: 60px;
            background-color: pink;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
        }
        span {
            font-size: 30px;
        }
<body>
    <div class="box">
        距离活动开始还有：<span class="time"></span>
    </div>
    <script src="./daojishi.js">
    </script>
</body>

js代码

获取目标时间，参数是目标时间；不给参数，返回当前时间;两者的差就是时间差，单位毫秒；接下来就是判断时间差，获取hour,minute,second；使用innerHTML插入到指定位置；定时器setInterval()

var time = document.querySelector('.time')
function getTime() {
    //目标时间
    var targetTime = new Date('2020/8/30 12:00:00')
    //现在的时间
    var nowTime = new Date()
    //时间差，为毫秒
    var spanTime = targetTime - nowTime
    if (spanTime <= 0) {
        time.innerHTML = '活动已开始'
        return
    }
    var hour = Math.floor(spanTime / (60 * 1000 * 60))
    spanTime -= hour * (60 * 1000 * 60)
    var minute = Math.floor(spanTime / (60 * 1000))
    spanTime -= minute * (60 * 1000)
    var second = Math.floor(spanTime / (1000))
    //不足2位  补0
    hour < 10 ? hour = '0' + hour : null
    minute < 10 ? minute = '0' + minute : null
    second < 10 ? second = '0' + second : null
    time.innerHTML = hour + ':' + minute + ':' + second
}
//getTime不写括号
window.setInterval(getTime, 1000)