ue 示例

在JavaScript或Vue中獲取當(dāng)前時(shí)間并格式化輸出到精確的時(shí)分秒，你可以使用Date對(duì)象結(jié)合字符串拼接或者模板字符串來(lái)實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單示例，展示了如何在Vue中完成這項(xiàng)任務(wù)：

<template>
  <div>
    <p>當(dāng)前時(shí)間：{{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formattedTime: ''
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新一次
  },
  methods: {
    updateTime() {
      const now = new Date();
      // 使用模板字符串進(jìn)行格式化
      this.formattedTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`;
    },
    // 輔助函數(shù)，用于補(bǔ)零操作
    padZero(num) {
      return num < 10 ? '0' + num : num;
    }
  },
  beforeDestroy() {
    // 清除定時(shí)器，避免內(nèi)存泄漏
    clearInterval(this.timer);
  }
};
</script>

在這個(gè)示例中，我們?cè)赩ue組件的mounted生命周期鉤子中初始化了一個(gè)定時(shí)器，每秒鐘調(diào)用updateTime方法來(lái)更新當(dāng)前時(shí)間，并在組件銷毀前通過(guò)beforeDestroy鉤子清理定時(shí)器。

updateTime方法中，我們創(chuàng)建了一個(gè)新的Date對(duì)象來(lái)獲取當(dāng)前時(shí)間，然后使用模板字符串和輔助函數(shù)padZero來(lái)確保月份、日期、小時(shí)、分鐘和秒數(shù)如果是個(gè)位數(shù)，則在其前補(bǔ)零，以便格式統(tǒng)一和美觀。

這樣，頁(yè)面上就會(huì)顯示一個(gè)實(shí)時(shí)更新的當(dāng)前時(shí)間，格式為“年-月-日 時(shí):分:秒”。

Vue3 Composition API 示例

在Vue3中，雖然一些API和寫(xiě)法有所變化，但獲取和格式化當(dāng)前時(shí)間的基本邏輯與Vue2相似。以下是使用Vue3 Composition API的一個(gè)示例：

<template>
  <div>
    <p>當(dāng)前時(shí)間：{{ formattedTime }}</p>
  </div>
</template>

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

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

const updateTime = () => {
  const now = new Date();
  formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
};

const padZero = (num) => {
  return num < 10 ? '0' + num : num;
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000); // 每秒更新一次
});

onBeforeUnmount(() => {
  // 清除定時(shí)器
  clearInterval(timer);
});
</script>

在這個(gè)Vue3的示例中，我們使用了Composition API來(lái)管理狀態(tài)和生命周期鉤子。ref用于定義響應(yīng)式數(shù)據(jù)formattedTime，而onMounted和onBeforeUnmount分別替代了Vue2中的mounted和beforeDestroy生命周期鉤子。

updateTime函數(shù)和padZero輔助函數(shù)的功能與Vue2示例相同，用于獲取當(dāng)前時(shí)間并進(jìn)行格式化處理，以及在數(shù)字小于10時(shí)前面添加零。

這樣，你就可以在Vue3應(yīng)用中實(shí)現(xiàn)實(shí)時(shí)更新并格式化顯示當(dāng)前時(shí)間的功能。

TypeScript 公共函數(shù)封裝

使用TypeScript可以為你的代碼增加類型安全。下面是如何封裝一個(gè)獲取并格式化當(dāng)前時(shí)間的公共函數(shù)，這個(gè)函數(shù)可以在Vue3的項(xiàng)目中作為公共方法使用。

首先，在你的Vue3項(xiàng)目的某個(gè)公用文件夾（如src/utils）下創(chuàng)建一個(gè)名為dateTimeUtils.ts的文件，并編寫(xiě)如下代碼：

// src/utils/dateTimeUtils.ts

export function formatCurrentTime(): string {
  const now = new Date();
  return `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
}

function padZero(num: number): string {
  return num < 10 ? '0' + num : num.toString();
}

這個(gè)模塊導(dǎo)出了一個(gè)formatCurrentTime函數(shù)，它返回當(dāng)前時(shí)間的格式化字符串。同時(shí)，內(nèi)部使用了padZero輔助函數(shù)來(lái)保證數(shù)字的格式正確。

然后，在你的Vue3組件中，你可以這樣使用這個(gè)公共函數(shù)：

// 某個(gè)Vue3組件.vue文件

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { formatCurrentTime } from '@/utils/dateTimeUtils'; // 根據(jù)你的實(shí)際路徑調(diào)整

const formattedTime = ref('');

onMounted(() => {
  formattedTime.value = formatCurrentTime();
  setInterval(() => {
    formattedTime.value = formatCurrentTime();
  }, 1000);
});
</script>

<template>
  <div>
    <p>當(dāng)前時(shí)間：{{ formattedTime }}</p>
  </div>
</template>

這里，我們導(dǎo)入了formatCurrentTime函數(shù)，并在組件掛載時(shí)設(shè)置初始值，之后每秒更新一次顯示的時(shí)間。注意，為了避免潛在的內(nèi)存泄漏，如果組件需要銷毀時(shí)停止時(shí)間更新，你可能還需要在適當(dāng)?shù)纳芷阢^子中清除定時(shí)器，正如之前Vue2和Vue3 Composition API示例中所示。不過(guò)，在此示例中為了保持簡(jiǎn)潔，省略了該部分代碼。

//定時(shí)器調(diào)用函數(shù)，并給定時(shí)器命名
var time1 = setTimeout(myalert,2000); 
var time2 = setInterval(myalert,2000);
//停止指定定時(shí)器
clearTimeout(time1);
clearInterval(time2);
function myalert(){
 alert('ok!');
}
//簡(jiǎn)寫(xiě)（匿名函數(shù)代替即可）
var time1 = setTimeout(
 function(){
 alert('ok!');
 },2000);