在Vue项目中获取本地时间和北京时间
1、给date原型挂载format属性
在项目放js的地方放上以下代码:
Date.prototype.strftime = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
}
2、引用
在vue项目中导入:
import './assets/dateFormat'
3、使用
<template>
<div id="app">
<!-- 本地时间 -->
<div class="tim">{{curtime}}</div>
<!-- 北京时间 -->
<span id="bjTime">{{bjTime}}</span>
</div>
</template>
<script>
// 引入时间格式化函数
import './assets/dateFormat'
export default {
name: 'App',
components: {
},
data() {
return {
// 本地时间定时器
localTimer: '',
// 北京时间定时器
bjTimer: '',
curtime: '',
bjTime: ''
}
},
created() {
this.getBjTime()
},
mounted() {
// 设置定时器
this.localTimer = setInterval(this.getTimer,1000)
this.bjTimer = setInterval(this.getBjTime,1000);
},
beforeDestroy() {
// 清除定时器
clearInterval(this.localTimer)
clearInterval(this.bjTimer);
},
methods: {
// 获取本地时间
getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return this.curtime = '本地时间为:' + h + ':' + m + ':' + s;
},
// 获取北京时间
UTCToLocalTimeString(d, format) {
var timeOffsetInHours = (new Date().getTimezoneOffset()/60) + 8
d.setHours(d.getHours() + timeOffsetInHours)
return d.strftime(format)
},
// 格式化处理
getBjTime() {
let bjtime = this.UTCToLocalTimeString(new Date(),'yyyy-MM-dd hh:mm:ss')
console.log(bjtime)
this.bjTime = '北京时间为:' + bjtime
}
}
}
</script>