vue非脚手架 组件之倒计时

之前用普通vue.js写了个倒计时组件，希望能帮到大家。

html

<!--                    倒计时组件-->
                    <count-down :endTime="endTime" ref="mychild"></count-down>

<script src="../js/html/countdown.js"></script>
<script src="../js/html/seckillProduct-detail.js" type="text/javascript"></script>

父组件 seckillProduct-detail.js

var vm = new Vue({
    el: '#section',
    data: {
        endTime:'2019-10-22 23:23:23'
    },
    mounted() {
        this.$refs.mychild.countTime()
    },
})

子组件 countdown.js

//倒计时
var template = '<span>{{time.d}}天{{time.h}}时{{time.m}}分{{time.s}}秒</span>'
Vue.component('countDown', {
    props:['endtime'],
    data(){
        return {
            endTime:this.endtime,
            time:{
                d: '',
                h: '',
                m: '',
                s: '',
            },
        }
    },
    methods: {
        countTime() {
            //获取当前时间
            var date = new Date()
            var now = date.getTime()
            //设置截止时间
            var endDate = new Date(this.endTime)
            var end = endDate.getTime()
            //时间差
            var leftTime = end - now
            //定义变量 d,h,m,s保存倒计时的时间
            if (leftTime >= 0) {
                this.time.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)//天数我没用到，暂且写上
                this.time.h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
                this.time.m = Math.floor((leftTime / 1000 / 60) % 60)
                this.time.s = Math.floor((leftTime / 1000) % 60)
               // return  template='<span>'+this.time.d+'天'+this.time.h+'时'+this.time.m+'分'+this.time.s+'秒</span>'
            }
            // 动态时间效果
            setTimeout(this.countTime, 1000)
        },
    },
    template: template,
})