前端实时展示日期（vue3项目）

最新推荐文章于 2024-01-12 21:42:18 发布

weixin_47560716

最新推荐文章于 2024-01-12 21:42:18 发布

阅读量1.3k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47560716/article/details/128019157

版权

在这里插入图片描述

模板中展示的数据：分别是年月日，和一个随机数（暂时充当cpu使用率）
 <div class="headRight">
        <div class="headRightItemOne hdItem">
          {{ timeInfo.nowDate }}
        </div>
        <div class="headRightItemTwo hdItem">
          {{ timeInfo.nowWeek }}
        </div>
        <div class="headRightItemThree hdItem">
          {{ timeInfo.nowTime }}
        </div>
        <div class="headRightItemFour hdItem">cpu:{{ randomInt.num }}%</div>
        <div class="headRightItemFive hdItem" @click="exit()">
          <div />
        </div>
      </div>

  //第一步：定义变量
  // 时间内容
    const timeInfo = reactive({
      setInterval: null,
      nowWeek: "",
      nowDate: "",
      nowTime: "",
    });

//第二步：定义获取时间的方法
  function setNowTimes() {
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      console.log('vvvvvvvv', wk);
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );

      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      timeInfo.nowDate = yy + "-" + mm + "-" + dd + "";
      timeInfo.nowTime = hou + ":" + min;
      timeInfo.nowWeek = week;
    }

 //第三部： 在生命周期中进行调用  定时器setInterval
    onMounted(() => {
      timeInfo.setInterval = setInterval(() => {
        timeInfo.value = setNowTimes();
      }, 1000);
      // 随机数
      nextTick(() => {
        randomInt.timer = setInterval(() => {
          randomInt.value = randomNum(5, 90);
        }, 1000);
      });
    });