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-pickerv-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>

欢迎指导！

千而の大狮子~

Js + Vue 实现时间差计算相关推荐

用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
Vue学习_计算属性
实现姓名案例: 1.插值语法实现姓名案例直接从vm中读取. <!doctype html> <html lang="en" xmlns:v-model=&quo ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.13-3.15）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.13-3.15) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gi ...
003-读书笔记-Vue官网计算属性与监听器
1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性,和 data 方法中返回的对象中的属性是等同的存在.通常来说,计算属性可以简单理解: 计算属性其实就是 Vue 实例的一个属性计 ...
[vue] watch和计算属性有什么区别？
[vue] watch和计算属性有什么区别? 一个是侦听属性,一个是计算属性 2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应 3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行 ...
[vue] 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
[vue] 在使用计算属性的时,函数名和data数据源中的数据可以同名吗? 莫名其妙的问题.可以同名,但data会覆盖methods.并且本就不该同名,同名说明你命名不规范.然后解释为什么会覆盖,因为 ...
php 里如何进行时间比较,PHP实现时间比较和时间差计算的方法示例
本文实例讲述了PHP实现时间比较和时间差计算的方法.分享给大家供大家参考,具体如下: 示例1: //PHP时间比较和时间差计算: //(1).比较两个绝对时间的大小 header("Cont ...
计算机毕业设计Node.js+Vue交通违章举报平台（程序+源码+LW+部署）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
js 获取当前日期，计算往后三个月的日期
js 获取当前日期,计算往后三个月的日期合同管理中的试用期,即当前入职时间(年月日)与到三个月试用期的时间(年月日) //css.Partyinp{width: 40px;height: 20px; ...

Js + Vue 实现时间差计算

Js + Vue 实现时间差计算相关推荐

最新文章

热门文章