实时显示当前时间,按秒刷新

问题:
例如门户系统显示的当前时间,按秒刷新的方式显示。
解决方法:

Date类型转字符串类型

// Vue main.js
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 date = new Date()
var timeStr = date.format('yyyy-MM-dd hh:mm:ss')

如果Eslint检查出现Date prototype 不可用的情况,修改Eslint

// 禁止扩展native对象,除了Date,也可以添加Array
'no-extend-native': ["error", { "exceptions": ["Date"] }],

实时刷新

利用setInterval 和 clearInterval
mounted(){}中添加计时器方法,在beforeDestroy(){}中清除计时器

created() {
    this.formatDate()
  },
  mounted() {
    const that = this
    this.timer = setInterval(() => {
      that.formatDate()
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前,清除我们的定时器
    }
  },
  methods: {
    formatDate() {
      var date = new Date()
      this.timeStr = date.format('yyyy-MM-dd hh:mm:ss')
    }
  }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值