如何在JavaScript/Vue中獲取當前時間并格式化輸出精確到時分秒

ue 示例

在JavaScript或Vue中獲取當前時間并格式化輸出到精確的時分秒，你可以使用Date對象結合字符串拼接或者模板字符串來實現。下面是一個簡單示例，展示了如何在Vue中完成這項任務：

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formattedTime: ''
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新一次
  },
  methods: {
    updateTime() {
      const now = new Date();
      // 使用模板字符串進行格式化
      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())}`;
    },
    // 輔助函數，用于補零操作
    padZero(num) {
      return num < 10 ? '0' + num : num;
    }
  },
  beforeDestroy() {
    // 清除定時器，避免內存泄漏
    clearInterval(this.timer);
  }
};
</script>

在這個示例中，我們在Vue組件的mounted生命周期鉤子中初始化了一個定時器，每秒鐘調用updateTime方法來更新當前時間，并在組件銷毀前通過beforeDestroy鉤子清理定時器。

updateTime方法中，我們創建了一個新的Date對象來獲取當前時間，然后使用模板字符串和輔助函數padZero來確保月份、日期、小時、分鐘和秒數如果是個位數，則在其前補零，以便格式統一和美觀。

這樣，頁面上就會顯示一個實時更新的當前時間，格式為“年-月-日時:分:秒”。

Vue3 Composition API 示例

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

<template>
  <div>
    <p>當前時間：{{ 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(() => {
  // 清除定時器
  clearInterval(timer);
});
</script>

在這個Vue3的示例中，我們使用了Composition API來管理狀態和生命周期鉤子。ref用于定義響應式數據formattedTime，而onMounted和onBeforeUnmount分別替代了Vue2中的mounted和beforeDestroy生命周期鉤子。

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

這樣，你就可以在Vue3應用中實現實時更新并格式化顯示當前時間的功能。

TypeScript 公共函數封裝

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

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

// 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();
}

這個模塊導出了一個formatCurrentTime函數，它返回當前時間的格式化字符串。同時，內部使用了padZero輔助函數來保證數字的格式正確。

然后，在你的Vue3組件中，你可以這樣使用這個公共函數：

// 某個Vue3組件.vue文件

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { formatCurrentTime } from '@/utils/dateTimeUtils'; // 根據你的實際路徑調整

const formattedTime = ref('');

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

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

這里，我們導入了formatCurrentTime函數，并在組件掛載時設置初始值，之后每秒更新一次顯示的時間。注意，為了避免潛在的內存泄漏，如果組件需要銷毀時停止時間更新，你可能還需要在適當的生命周期鉤子中清除定時器，正如之前Vue2和Vue3 Composition API示例中所示。不過，在此示例中為了保持簡潔，省略了該部分代碼。

段時間發的五子棋的游戲很多小伙伴都私聊讓再做個，今天小猿圈web前端講師為大家分享的是CSS3動畫練習案例：用CSS3做個鐘表，想玩的小伙伴記得自己運行一下呦。

自學CSS3屬性之后，我們來用一個小案例進行一個綜合練習，這個案例主要是動畫的應用，我們就用純css動畫做一個能走字的鐘表。

首先我們來準備HTML來布局一下：

<body>

</div>

</body>

布局很簡單，六根直線通過旋轉一定角度做刻度一個中間小圓點，一個遮罩來蓋住六根直線的中間部分，使直線變成刻度，后面三個是時分秒針。

下面通過CSS把鐘表的大概樣子設置出來。

.clock {

/* 創建圓形盒子當做表盤 */

width: 200px;

height: 200px;

margin: 100px auto;

position: relative;

border: 10px solid #000;

border-radius: 50%;

}

.clock div:nth-child(-n+6) {

/* 選中前6個子元素做出6條線當做表的刻度 */

width: 6px;

height: 200px;

background-color: #aaa;

position: absolute;

left: 50%;

margin-left:-3px;

}

/* 讓6條線遞增旋轉30度 */

.clock div:nth-child(1) {

transform: rotate(30deg);

}

.clock div:nth-child(2) {

transform: rotate(60deg);

}

.clock div:nth-child(3) {

transform: rotate(90deg);

background-color: #333;

}

.clock div:nth-child(4) {

transform: rotate(120deg);

}

.clock div:nth-child(5) {

transform: rotate(150deg);

}

.clock div:nth-child(6) {

transform: rotate(0deg);

background-color: #333;

}

/* 中心小圓點 */

.cent {

width: 20px;

height: 20px;

background-color: #000;

border-radius: 50%;

position:absolute;

z-index: 3;

left: 50%;

top:50%;

margin: -10px 0 0 -10px;

z-index:2;

}

/* 遮住線的中間部分，讓線成為刻度 */

.cover {

width: 180px;

height: 180px;

border-radius: 50%;

background-color: #fff;

position:absolute;

left: 50%;

top:50%;

margin:-90px 0 0 -90px;

}

后面加上中心圓點和遮罩，讓它看起來像個表盤。

接下來我們就可以準備表針和動畫了。

/* 時針制作 */

.hour {

width: 6px;

height: 50px;

background-color: #000;

position:absolute;

left: 50%;

top:100px;

margin-left: -3px;

animation: clockrotate 43200s steps(43200) infinite linear;

transform-origin: top center;

}

/* 分針制作 */

.minute {

width: 60px;

height: 6px;

background-color: #555;

position:absolute;

left:40px;

top:50%;

margin-top: -3px;

animation: clockrotate 3600s steps(3600) infinite;

transform-origin: center right;

}

/* 秒針制作 */

.seconds {

width: 4px;

height: 70px;

background-color:red;

position: absolute;

left:50%;

top:30px;

margin-left: -2px;

animation: clockrotate 60s steps(60) infinite ;

transform-origin: bottom center;

}

/* 設置動畫序列 */

@keyframes clockrotate {

form{

}

to {

transform: rotate(360deg);

}

設置每個針的動畫是旋轉360度，根據時、分、秒來計算動畫執行完畢需要的時間和步數，加個infinite無限執行，另外還要注意表針旋轉的中心點設置。

上述就是小猿圈老師針對CSS3動畫練習案例：用CSS3做個鐘表介紹，相信你對web前端也是有一定的了解的，如果遇到不會的問題可以到小猿圈去尋找答案的，里面有最新最全面的視頻教程等你來學習，只要你想學習編程這里都有。

時器類型及語法

setTimeout 只執行一次的定時器
clearTimeout 關閉執行一次的定時器
setInterval 反復執行的定時器
clearInterval 關閉反復執行的定時器

簡單用法：

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

實用的例子：

1、 動態顯示當前時間

效果圖：

在線咨詢

上一篇：只需幾步，輕松將TXT轉換為帶目錄的其他格式電子書！
下一篇：信號完整性基礎知識手冊（上）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何在JavaScript/Vue中獲取當前時間并格式化輸出精確到時分秒

ue 示例

Vue3 Composition API 示例

TypeScript 公共函數封裝

時器類型及語法

實用的例子：

您的項目需求