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


    效果

    核心代码

    • 使用钩子函数 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}`; 
     }

    完整代码

    1. <template>
    2. <view class="time-container">
    3. <view>{{ currentTime }}view>
    4. view>
    5. template>
    6. <script>
    7. export default {
    8. data() {
    9. return {
    10. currentTime: '' // 当前时间
    11. };
    12. },
    13. mounted() {
    14. this.updateTime(); // 初始化时间
    15. setInterval(this.updateTime, 1000); // 每秒更新时间
    16. },
    17. methods: {
    18. updateTime() {
    19. const date = new Date();
    20. const hours = date.getHours().toString().padStart(2, '0');
    21. const minutes = date.getMinutes().toString().padStart(2, '0');
    22. const seconds = date.getSeconds().toString().padStart(2, '0');
    23. this.currentTime = `${hours}:${minutes}:${seconds}`;
    24. }
    25. }
    26. };
    27. script>
    28. <style>
    29. .time-container {
    30. text-align: center;
    31. font-size: 24px;
    32. }
    33. style>

     

  • 相关阅读:
    教程图文详解 - 无线通信网(第五章)
    PX4开源工程结构简明介绍
    【数据结构篇】堆
    Java 数据结构
    关于 LAF 函数计算的一些思考
    WebFlux+SSE流式传输
    如何在Spring Boot中记录用户系统操作流程?
    数据挖掘期末复习
    【数据结构】串
    C++ 中 cin 和 getline 的使用
  • 原文地址:https://blog.csdn.net/weixin_46001736/article/details/133951190