实时显示当前时间,每秒更新

简介: 实时显示当前时间,每秒更新

实时显示当前时间,每秒更新

  • 我们可以利用定时器来完成这个功能
  • HTML
      <div id="app">
          {
         {
         date}}
      </div>
    
  • JS

      <script>
      export default {
         
        data() {
         
          return {
         
            date: new Date()
          };
        },
        methods(){
         
        getTime() {
         
                  setInterval(() => {
         
                      var date = new Date();//如果date为13位不需要乘1000
    
                      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    
                      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    
                      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    
                      this.setState({
          nowTime: h + m + s, })
                  }, 1000)
              }
                },
    
        }
        mounted() {
         
          let _this = this; // 声明一个变量指向Vue实例this,保证作用域一致
          this.timer = setInterval(() => {
         
            _this.date = new Date(); // 修改数据date
          }, 1000)
    
          foreDestroy() {
         
          if (this.timer) {
         
            clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
          }
        }
      };
      </script>
    
相关文章
|
14天前
|
消息中间件 存储 监控
Kafka 消息保留时长由 24 小时变更为 72 小时的影响分析
Kafka 消息保留时长由 24 小时变更为 72 小时的影响分析
9 0
|
10月前
|
中间件
简单记录服务器耗时
简单记录服务器耗时
50 0
|
存储 缓存 Dart
如何处理直播实时在线人数显示并且最小化性能和资源消耗?
直播技术成为一种极为流行的交流方式。而直播平台的核心指标之一就是实时在线人数,准确地显示该指标对于用户和运营商来说都具有重要意义。然而,直播实时在线人数的显示也面临着性能和资源消耗的挑战。本文将介绍如何利用Flutter和Dart开发技术栈来优化直播实时在线人数的显示,以达到最小化性能和资源消耗的目标。 作者:狗头大军之江苏分军 链接:https://juejin.cn/spost/7255473856234913852 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
如何处理直播实时在线人数显示并且最小化性能和资源消耗?
|
12月前
|
Windows
连续时间系统的冲激响应和零状态响应
连续时间系统的冲激响应和零状态响应
182 0
如何检查视频画面延迟的时间
做视频通讯的朋友,画面延迟,就是要经常测试的事情。那么怎样测试延迟呢?
413 0
|
前端开发 JavaScript NoSQL
[前端]每间隔一段时间查询接口获取到百分比,在页面上按照百分比展示进度条,百分比进度后下载文件
[前端]每间隔一段时间查询接口获取到百分比,在页面上按照百分比展示进度条,百分比进度后下载文件
|
Web App开发 Prometheus Cloud Native
Prometheus 由于时间不同步导致数据不显示
现象描述 将 Prometheus 数据在 Grafana 中进行展示,Grafana 中 Graph 数据显示有延迟,其他类型 Singlestat 和 Table 都显示 N/A 。 排查 1. 排查数据库 发现 Prometheus 数据库端一切正常, 2.
8251 0