Js + Vue 实现时间差计算

之前一直用PHP后台计算时间差，提交后还要刷新页面，体验很不好，所以抽时间就利用Js和Vue Element 写了一个时间差计算。不再调用后台，很舒服。

功能页面展示：

话不多说，直接上代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div class="site-index">
    <div class="body-content">
        <div class="row">
            <div class="col-md-9">
                <div class="panel">
                    <div class="panel-body"
                         style="background-color: #f8f9fa;border: 1px solid #222222;border-radius:5px">
                        时间计算
                        <div class="block">
                            <el-date-picker
                                    v-model="value"
                                    type="datetimerange"
                                    :picker-options="pickerOptions"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="right">
                            </el-date-picker>
                        </div>
                        <el-button type="primary" :plain="true" @click="getTime">获取时间差</el-button>
                        <div id="show"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var siteIndexVue = new Vue({
        el: '.site-index',
        data: {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value: ''
        },
        methods: {
            getTime: function () {
                if (this.value === '') {
                    this.open();
                    return;
                }
                Date.prototype.Format = function (fmt) {
                    var o = {
                        "M+": this.getMonth() + 1,                 //月份
                        "d+": this.getDate(),                    //日
                        "h+": this.getHours(),                   //小时
                        "m+": this.getMinutes(),                 //分
                        "s+": this.getSeconds(),                 //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds()             //毫秒
                    };
                    if (/(y+)/.test(fmt))
                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                };
                var beginTime = this.value[0].Format("yyyy/MM/dd hh:mm:ss");
                var endTime = this.value[1].Format("yyyy/MM/dd hh:mm:ss");
                this.$options.methods.difference(beginTime, endTime);
            },
            difference: function (beginTime, endTime) {
                var dateBegin = new Date(beginTime);
                var dateEnd = new Date(endTime);
                var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
                var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
                var leave1 = dateDiff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000));//计算出小时数
                //计算相差分钟数
                var leave2 = leave1 % (3600 * 1000);   //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
                //计算相差秒数
                var leave3 = leave2 % (60 * 1000);     //计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3 / 1000);
                document.getElementById("show").innerHTML = "<h1>" + "相差" + dayDiff + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒" + "</h1>";
            },
            open: function () {
                this.$message({
                    message: '请选择时间！',
                    type: 'warning'
                });
            },

        },
    })
</script>

欢迎指导！

千而の大狮子~