原生JS实现倒计时以及在Vue里实现倒计时

1.用原生JS来实现倒计时功能

// 获取容器
var dayBox = document.querySelector('#day');
// 倒计时方法
/*
   times 为未来的事件 为时间戳
*/
function countDown(times) {
    // 正常是要校验的自己使用就不校验了，知道怎么传参
    // 获取今天的事件戳
    var today = new Date().getTime();
    // 获得剩余的毫秒数
    var timeDiff = times - today;
    //计算剩余的天数
    //  /1000 转化成秒  / 60 转化成分 /60 转化成时 //转化成天  10 是 10进制
    var d = parseInt(timeDiff / 1000 / 60 / 60 / 24, 10);
    // 计算剩余的小时 总小时 除余 剩下的就是小时
    var h = parseInt(timeDiff / 1000 / 60 / 60 % 24, 10);
    // 计算剩余的分钟 总分钟数 除余 60 剩下的就是小时
    var M = parseInt(timeDiff / 1000 / 60 % 60, 10);
    // 计算剩余的秒数 同上的同样的
    var s = parseInt(timeDiff / 1000 % 60, 10);
    // 小于两位数前边➕0
    d = d < 9 ? "0" + d : d;
    h = h < 9 ? "0" + h : h;
    M = M < 9 ? "0" + M : M;
    s = s < 9 ? "0" + s : s;
    var countdown = d
    var countdown1 = h
    return {
        countdownHtml: countdown,
        countdown1Html: countdown1,
        flag: false
    }
}
// 创建一个未来时间
var times = new Date('2020/9/16 00:00').getTime();
// 获取倒计时返回的对象
var count = countDown(times);
// 调用一次函数弥补计时器空缺的一秒
dayBox.innerHTML = count.countdownHtml;
// 调用计时器 
var interval = setInterval(function () {
    // 重新获取倒计时返回的对象
    var count = countDown(times);
    if (count.flag) {
        clearInterval(interval);
    }
    dayBox.innerHTML = count.countdownHtml;
}, 1000)

2.在Vue中实现倒计时