VUE进行时间倒计时

简单用VUE实现倒计时

      <div class="fz-30 fc-666">距离距截止购买时间{{day}}天{{hr}}:{{min}}:{{sec}}
      
    export default {
        name: "ProductDetails",
        data() {
            return {
                day: 0,//天
                hr: 0,//时
                min: 0,//分
                sec: 0,//秒
            }
        },
     mounted(){
            this.countdown()
        },
     methods: {
            //倒计时
            countdown() {
                const end = Date.parse(new Date("2019-12-01"));
                const now = Date.parse(new Date());
                const msec = end - now;
                let day = parseInt(msec / 1000 / 60 / 60 / 24);
                let hr = parseInt(msec / 1000 / 60 / 60 % 24);
                let min = parseInt(msec / 1000 / 60 % 60);
                let sec = parseInt(msec / 1000 % 60);
                this.day = day
                this.hr = hr > 9 ? hr : '0' + hr;
                this.min = min > 9 ? min : '0' + min;
                this.sec = sec > 9 ? sec : '0' + sec;
                const that = this;
                this._interval = setTimeout(function () {
                    that.countdown()
                }, 1000)
            },
      }
       //当离开页面时，清除倒计时
        beforeDestroy() {
             clearInterval(this._interval)
        },