uniapp vue2 时钟 循环定时器

效果展示:

时钟

写在前面:vue2有this指向,没有箭头函数

实验操作:封装一个时钟组件

uniapp vue2 封装一个时钟组件

核心代码:

this指向的错误代码,在下:

start() {

this.myTimer = setInterval(function () {

this.handleReTimer();//通过this调用,失败。

}, 1000);

},

时钟组件代码:

html 复制代码
<template>
  <view class="myTimer_home">
    <view class="timerTitleBox">同步时间:</view>
    <view class="timerDateBox">{{ timerDate }}</view>
    <view class="timerTimeBox">{{ timerTime }}</view>
    <view class="timerRefreshImgBox" @click="handleReTimer">
      <image
        src="@/static/images/smartCabin/titleNav/refresh_icon.png"
        alt="一张图"
      />
    </view>
  </view>
</template>
<script>
import { getNowFormatDate, getNowData } from "@/utils";
//获取当前日期
function getNowFormatDate() {
  let date = new Date(),
    year = date.getFullYear(), //获取完整的年份(4位)
    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
    strDate = date.getDate(); // 获取当前日(1-31)
  if (month < 10) month = `0${month}`; // 如果月份是个位数,在前面补0
  if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数,在前面补0
  return `${year}-${month}-${strDate}`;
}
//获取当前时间
function getNowData() {
  var a = new Date();
  var b = a.getHours();
  var c = a.getMinutes();
  var d = a.getSeconds();
  function check(val) {
    if (val < 10) {
      return "0" + val;
    } else {
      return val;
    }
  }
  return check(b) + ":" + check(c) + ":" + check(d);
}
export default {
  data() {
    return {
      myTimer: null,
      timerDate: "",
      timerTime: "",
    };
  },
  methods: {
    handleReTimer() {
      this.timerDate = getNowFormatDate();
      this.timerTime = getNowData();
    },
    start() {
      this.myTimer = setInterval(this.handleReTimer, 1000);
    },
  },
  created() {
    this.start();
    this.handleReTimer();
  },
  destroyed() {
    clearInterval(this.myTimer);
  },
};
</script>
<style lang="scss" scoped>
.myTimer_home {
  width: 94%;
  height: 100%;
  font-size: 32rpx;
  display: flex;
  align-items: center;

  .timerDateBox {
    margin-right: 10px;
  }

  .timerRefreshImgBox {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      cursor: pointer;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
</style>

时钟组件(Vue3)

封装组件代码:

html 复制代码
<script setup>
import { useUserStore } from "@/stores";
const store = useUserStore();
import { getNowFormatDate, getNowData } from "@/utils/replaceTime.js";
import { computed, onMounted, onUnmounted, reactive, watch } from "vue";
import { getAssetsFile, numToStriTime } from "@/utils";

onMounted(() => {
  data.timerDate = getNowFormatDate();
  data.timerTime = getNowData();
});
const myTimer = setInterval(() => {
  data.timerTime = getNowData();
}, 60000);
onUnmounted(() => {
  clearInterval(myTimer);
});
const data = reactive({
  timerDate: "",
  timerTime: "",
});
const handleReTimer = () => {
  data.timerDate = getNowFormatDate();
  data.timerTime = getNowData();
};
</script>

<template>
  <div class="myTimer_bome">
    <div class="timerTitleBox">同步时间:</div>
    <div class="timerDateBox">{{ data.timerDate }}</div>
    <div class="timerTimeBox">{{ data.timerTime }}</div>
    <div class="timerRefreshImgBox" @click="handleReTimer">
      <img
        :src="getAssetsFile('smartCabin/titleNav/refresh_icon.png')"
        alt="一张图"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.myTimer_bome {
  width: 100%;
  height: 100%;
  font-size: calc(100vw * 18 / 1920);
  color: rgba(74, 79, 87, 1);
  display: flex;
  align-items: center;

  .timerDateBox {
    margin-right: 10px;
  }

  .timerRefreshImgBox {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      cursor: pointer;
    }

    img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
相关推荐
山河木马几秒前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina2 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者8 分钟前
天地图编辑支持删除编辑点
前端·javascript
前端小巷子32 分钟前
深入理解TCP协议
前端·javascript·面试
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡9 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele10 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴10 小时前
WebSocket实时通信入门到实践
前端·javascript