时间 日期 星期

<div class="time-left">
   <div class="time-hours">{{ head.nowTime }}</div>
     <div class="time-day">
       <div class="time-month">{{ head.nowWeek }}</div>
       <div class="time-days">{{ head.nowDate }}</div>
     </div>
   </div>
const head = reactive({
  nowTime: "", // 当前时间
  nowDate: "", // 当前日期
  nowWeek: "", // 当前星期几
});
// 定时器 id
const timer = ref();

// 获取当前时间，日期，星期几
const setNowTimes = () => {
  const myDate = new Date();
  const wk = myDate.getDay();
  const yy = String(myDate.getFullYear());
  const mm = String(
    myDate.getMonth() + 1 < 10
      ? `0${myDate.getMonth() + 1}`
      : myDate.getMonth() + 1
  );
  const dd = String(
    myDate.getDate() < 10 ? `0${myDate.getDate()}` : myDate.getDate()
  );
  const hou = String(
    myDate.getHours() < 10 ? `0${myDate.getHours()}` : myDate.getHours()
  );
  const min = String(
    myDate.getMinutes() < 10 ? `0${myDate.getMinutes()}` : myDate.getMinutes()
  );
  const sec = String(
    myDate.getSeconds() < 10 ? `0${myDate.getSeconds()}` : myDate.getSeconds()
  );
  const weeks = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const week = weeks[wk];
  head.nowDate = `${yy}-${mm}-${dd}`;
  head.nowTime = `${hou}:${min}:${sec}`;
  head.nowWeek = week;
};

// 启动定时器, 实时获取时间
onMounted(() => {
  setNowTimes();
  timer.value = setInterval(() => {
    setNowTimes();
  }, 1000);
});

// 清除定时器
onBeforeUnmount(() => {
  clearInterval(timer.value);
});