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

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

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

  • 我们可以利用定时器来完成这个功能
  • 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>
    
相关文章
|
机器学习/深度学习 算法 API
XGBoost模型部署与在线预测的完整指南
XGBoost模型部署与在线预测的完整指南
1712 6
|
JavaScript
解决VUE项目window.open()方法打包部署上线报错404
解决VUE项目window.open()方法打包部署上线报错404
674 0
|
8月前
|
关系型数据库 MySQL PHP
2025 游戏试玩打码平台PHP源码
2025 游戏试玩打码平台PHP源码
242 0
2025 游戏试玩打码平台PHP源码
|
Prometheus Kubernetes 监控
Kubernetes 性能调优与成本控制
【8月更文第29天】随着 Kubernetes 在企业中的广泛应用,如何有效地管理和优化 Kubernetes 集群的性能和成本成为了一个重要的课题。本篇文章将介绍 Kubernetes 性能监控的基础知识,以及一些实用的成本优化技巧,包括资源配额的设置、Pod 密度的提高和集群规模的合理调整。
763 2
|
12月前
|
JavaScript 前端开发 搜索推荐
快收藏!超实用标签title属性重写,让同事对你刮目相看
【10月更文挑战第1天】快收藏!超实用标签title属性重写,让同事对你刮目相看
269 10
快收藏!超实用标签title属性重写,让同事对你刮目相看
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
691 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
关系型数据库 MySQL 数据库
Django与MySQL:配置数据库的详细步骤
Django与MySQL:配置数据库的详细步骤
C#或Winform中的消息通知之自定义优雅漂亮的通知效果
Custom Notification自定义通知提示,一款非常优雅漂亮的自定义通知效果,主要介绍其实现思路、调整和优化...
1575 0
C#或Winform中的消息通知之自定义优雅漂亮的通知效果
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
792 0
Echarts饼图实现-今日进度-动态图
Antd——如何自定义月的选择范围
Antd——如何自定义月的选择范围
227 0