uni-app:实现时钟自走(动态时钟效果)

效果

uni-app:实现时钟自走(动态时钟效果)_第1张图片

核心代码

  • 使用钩子函数 mounted(),设置定时器,是指每秒都要去执行时间的获取,以至于实现时间自走的效果

 mounted() {
    this.updateTime(); // 初始化时间
    setInterval(this.updateTime, 1000); // 每秒更新时间
  },

  •  自定义方法updateTime去获取当前时间,并设置数据

updateTime() {
      const date = new Date();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      this.currentTime = `${hours}:${minutes}:${seconds}`; 
 }

完整代码



 

你可能感兴趣的:(uni-app,uni-app)