倒计时组件代码

html

 <cd_comp :djs="123425"></cd_comp>

js

// 倒计时数据模型
function model_countdown(customeData = {}) {
    let obj = { timer: {}, d: 0, h: '00', m: '00', s: '00', hms: "00:00:00", is_click: 0, type: "", is_end: false }
    let out = {
        ...obj,
        ...customeData,
    }
    return out
}

// 分割十位数个位数
// 获取十位数
function fn_tenDigits(str) {
    let num = parseInt(str)
    let n = 0;
    if (num < 10) {
        n = 0
    } else if (num >= 10 && num < 100) {
        n = parseInt(num / 10)
    } else {
        let num_str = num.toString().split('')
        n = num_str[num_str.length - 2]
    }
    return n;
}
// 获取个位数
function fn_singleDigits(str) {
    let num = parseInt(str)
    let num_str = num.toString().split('')
    let n = num_str[num_str.length - 1]
    return n;
}

// 
Vue.component('cd_comp', {
    template: "<div class='cdTask'> <p class='day'> <span v-if='fn_tenDigits(countdowns.d)>0'> {{ fn_tenDigits(countdowns.d) }} </span> <span> {{ fn_singleDigits(countdowns.d) }} </span> <span> D </span> </p> <a ></a> <p> <span> {{ fn_tenDigits(countdowns.h) }} </span> <span> {{ fn_singleDigits(countdowns.h) }} </span> </p> <a><i></i><i></i></a> <p> <span> {{ fn_tenDigits(countdowns.m) }} </span> <span> {{ fn_singleDigits(countdowns.m) }} </span> </p> <a><i></i><i></i></a> <p> <span> {{ fn_tenDigits(countdowns.s) }} </span> <span> {{ fn_singleDigits(countdowns.s) }} </span> </p> </div>",
    data() {
        return {
            timer: {},
            cd_str: "00h:00m:00s",
            countdowns: new model_countdown()
        }
    },
    created() {
        this.setCd()
    },
    methods: {
        setCd() {
            let cdObj = new model_countdown()
            var self = this
            let leftTime = this.djs
            if (leftTime == 0) {
                self.cd_str = "00h:00m:00s"
                return
            } else {
                self.timer = setInterval(function () {
                    if (leftTime > -1) {
                        //计算剩余的毫秒数
                        var days = parseInt(leftTime / 60 / 60 / 24, 10); //计算剩余的天数
                        var hours = parseInt(leftTime / 60 / 60 % 24, 10); //计算剩余的小时
                        var minutes = parseInt(leftTime / 60 % 60, 10); //计算剩余的分钟
                        var seconds = parseInt(leftTime % 60, 10); //计算剩余的秒数
                        seconds < 0 ? seconds = 0 : seconds = seconds
                        hours = hours < 10 ? "0" + hours : hours;
                        minutes = minutes < 10 ? "0" + minutes : minutes;
                        seconds = seconds < 10 ? "0" + seconds : seconds;
                        leftTime--;
                        self.cd_str = `${hours}h:${minutes}m:${seconds}s`
                        self.countdowns = { timer: {}, d: days, h: hours, m: minutes, s: seconds, hms: hours + ":" + minutes + ":" + seconds, }
                        if (days > 0) {
                            self.cd_str = `${days}d:${hours}h:${minutes}m:${seconds}s`
                        } else {
                            self.cd_str = `${hours}h:${minutes}m:${seconds}s`
                        }
                    } else {
                        self.countdowns = { timer: {}, d: '0', h: '00', m: '00', s: '00', hms: '00:00:00', }
                        clearInterval(self.timer);
                    }
                }, 1000);
            }
        },

    },
    props: {
        djs: 0,
    },
});