页面时间的做法(你懂的速进)

在我们日常许多项目,在网站页面会有如下的时间的动态显示,那这种是怎么做的呢,接着往下看
在这里插入图片描述
其中主要思想就是拿到当前时间,然后分解操作,最后拼接在一起

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>

谢谢大家,各位朋友点个赞哟

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值