Vue3前端项目实现动态显示当前系统时间详解

<template>
  <div class="app-container">
    <h1 class="h2size" style="top: 0%; left: 3%; color: #d1d8e0">
      截止时间：{{ currentDate }}
    </h1>
  </div>
</template>

<style scoped>
/* 文字样式 */
.h2size {
  color: rgb(166, 202, 244);
  position: absolute;
  font-size: 1vw;
  font-family: 'Arial', sans-serif;
}
</style>

<script setup>
import { ref, onMounted } from "vue";

// 响应式日期变量
const currentDate = ref('');

// 格式化日期函数
function formatDateshort(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  const second = String(date.getSeconds()).padStart(2, '0');
  return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
}

// 组件挂载时初始化时间并设置定时器
onMounted(() => {
  // 初始时间
  currentDate.value = formatDateshort(new Date());

  // 每分钟更新一次时间
  setInterval(() => {
    currentDate.value = formatDateshort(new Date());
  }, 60000); // 60秒更新一次
});
</script>

const minute = String(date.getMinutes()).padStart(2, '0');

const props = defineProps({
  updateInterval: { type: Number, default: 60000 }
});

onMounted(() => {
  setInterval(() => {
    currentDate.value = formatDateshort(new Date());
  }, props.updateInterval);
});

function formatDateshort(date, locale = 'zh-CN') {
  return date.toLocaleString(locale, {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
}

<template>
  <div class="app-container">
    <h1 class="h2size">截止时间：{{ currentDate }}</h1>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const currentDate = ref('');
let timer = null;

function formatDateshort(date) {
  const pad = num => String(num).padStart(2, '0');
  return `${date.getFullYear()}年${pad(date.getMonth() + 1)}月${pad(date.getDate())}日 ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
}

onMounted(() => {
  currentDate.value = formatDateshort(new Date());
  timer = setInterval(() => {
    currentDate.value = formatDateshort(new Date());
  }, 60000);
});

onBeforeUnmount(() => {
  clearInterval(timer); // 清理定时器
});
</script>

<style scoped>
.h2size {
  color: rgb(166, 202, 244);
  position: absolute;
  font-size: 1vw;
  font-family: 'Arial', sans-serif;
}
</style>