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

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

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')
    }
  }

你可能感兴趣的:(实时显示当前时间,按秒刷新)