在我们日常许多项目,在网站页面会有如下的时间的动态显示,那这种是怎么做的呢,接着往下看
其中主要思想就是拿到当前时间,然后分解操作,最后拼接在一起
methods:{
getTime() {
let _t = new Date() //拿到当前时间
let _y = _t.getFullYear() //年
let _m = _t.getMonth() + 1 //月 。注意月是0~11,所以我们需要加1
_m = _m < 10 ? '0' + _m : _m // 月份做判断,当小于10在前面加上0,这样格式才准确
let _d = _t.getDate() //日
_d = _d < 10 ? '0' + _d : _d //同上
let _h = _t.getHours() //小时
_h = _h < 10 ? '0' + _h : _h
let _mi = _t.getMinutes() //分钟
_mi = _mi < 10 ? '0' + _mi : _mi
let _w = _t.getDay() //星期 注意 0~6 0是周日 下面利用了switch逻辑来判断是周几
switch (_w) {
case 0:
_w = '周日'
break
case 1:
_w = '周一'
break
case 2:
_w = '周二'
break
case 3:
_w = '周三'
break
case 4:
_w = '周四'
break
case 5:
_w = '周五'
break
case 6:
_w = '周六'
break
default:
_w = '周六'
}
this.exactTime = `${_y}.${_m}.${_d} ${_h}:${_mi} ${_w}` //最后拼接赋值
},
}
注意:因为当前时间在不断的变化,所以我们可以通过定时器去不断调用这个方法
mounted() {
setInterval(() => this.getTime(), 1000)
},
最后在你需要的地方炫出来
<span class="time">{{ exactTime }}</span>
谢谢大家,各位朋友点个赞哟