原生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中实现倒计时

<script>
    export default {
        data() {
            return {
                min: 60,
                sec: 0,
                now: '',
                end: '',
            }
        },
        mounted() {
            // 定义结束时间戳
                //我这里3600000是1小时倒计时，在当前时间戳的基础上加了3600000毫秒
            this.end = new Date().getTime() + 3600000;
            // 调用倒计时方法
            this.BackDate()
        },
        methods: {
            // 倒计时
            BackDate() {
                // 获取当前时间
                this.now = new Date().getTime();
                if (this.now >= this.end) {
                    this.min = 0
                    this.sec = 0
                    return
                }
                // 用结束时间戳减去当前时间
                const msec = this.end - this.now
                let min = parseInt(msec / 1000 / 60) //算出分钟数
                let sec = parseInt(msec / 1000 % 60) //算出秒数
                // 给数据赋值
                this.min = min > 9 ? min : '0' + min
                this.sec = sec > 9 ? sec : '0' + sec
                // 当时间剩余15分钟的时候进行弹窗提醒
                if (this.min == 59 && this.sec == 55) {
                    this.isShow=true
                }
                //定义this指向
                const that = this
                // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
                setTimeout(function() {
                    that.BackDate()
                }, 1000)
        }
    }
</script>