絡(luò)編程之時(shí)間格式。

同學(xué)們好，今天我們分享的是如何讓搜索引擎等程序更容易地提取網(wǎng)頁(yè)中的時(shí)間信息。我們將使用time標(biāo)簽來(lái)實(shí)現(xiàn)這一目標(biāo)。這個(gè)標(biāo)簽?zāi)銈兛赡芤呀?jīng)有所了解，但是現(xiàn)在不需要掌握太多細(xì)節(jié)，只需要知道它的作用即可。

現(xiàn)在來(lái)看看我們的示例頁(yè)面，可以看到頁(yè)面中包含了很多句不同時(shí)間格式的文字。這些文字并沒(méi)有什么特別之處，只是每一句都包含著時(shí)間信息。時(shí)間信息的格式比較復(fù)雜，但是這不影響我們的演示效果。

接下來(lái)，我們將介紹實(shí)現(xiàn)代碼。time標(biāo)簽用于定義公歷日期或時(shí)間、二十四小時(shí)制，時(shí)間和時(shí)區(qū)偏移是可選的。在所有瀏覽器中，time標(biāo)簽不會(huì)渲染任何特殊的效果。但是，它可以讓搜索引擎更容易地在網(wǎng)頁(yè)中找到對(duì)應(yīng)的時(shí)間信息。

使用time標(biāo)簽的另一個(gè)原因是，世界上有許多不同的日期格式，但是這些不同的格式不容易被電腦識(shí)別。如果我們想自動(dòng)抓取頁(yè)面上所有事件的日期并將它們插入到日歷中，time元素可以讓我們附上清晰的可被機(jī)器識(shí)別的時(shí)間或日期。因此，time標(biāo)簽并不是為了給用戶看的，而是為了方便搜索引擎更好地在網(wǎng)頁(yè)上找到對(duì)應(yīng)的時(shí)間。

在我們的示例中，時(shí)間和普通文字看上去沒(méi)有任何區(qū)別。除了搜索引擎，網(wǎng)頁(yè)同手機(jī)上的日歷、提醒等應(yīng)用程序交互時(shí)，time標(biāo)簽也可以提供很大的方便。

time標(biāo)簽非常簡(jiǎn)單，只包含一個(gè)屬性datatime，用于規(guī)定日期和時(shí)間。如果需要，我們還可以通過(guò)元素的內(nèi)容來(lái)指定日期和時(shí)間。time標(biāo)簽的值有很多種，只要是符合規(guī)范的時(shí)間寫(xiě)法格式，都可以被接受并轉(zhuǎn)化為第三方使用的格式。

總之，time標(biāo)簽的使用頻率并不高，不需要我們進(jìn)行太多的學(xué)習(xí)和理解。如果你們知道有這個(gè)東西并且知道它的大概意思，就可以了。

今天的分享就到這里，所有的案例和相關(guān)文檔都可以向我索取。

下期見(jiàn)，想學(xué)習(xí)編程的同學(xué)請(qǐng)關(guān)注我。

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í)間，并在組件銷(xiāo)毀前通過(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可以為你的代碼增加類(lèi)型安全。下面是如何封裝一個(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)存泄漏，如果組件需要銷(xiāo)毀時(shí)停止時(shí)間更新，你可能還需要在適當(dāng)?shù)纳芷阢^子中清除定時(shí)器，正如之前Vue2和Vue3 Composition API示例中所示。不過(guò)，在此示例中為了保持簡(jiǎn)潔，省略了該部分代碼。

計(jì)算機(jī)編程中，常見(jiàn)的時(shí)間格式有以下幾種：

1：ISO 8601 格式：國(guó)際標(biāo)準(zhǔn)的日期和時(shí)間表示方法。
格式為 "YYYY-MM-DDTHH:mm:ss.sssZ"，其中 "T" 是日期和時(shí)間的分隔符，"Z" 表示時(shí)區(qū)。
例如，"2023-09-29T12:34:56Z" 表示 2023 年 9 月 29 日 12 時(shí) 34 分 56 秒的時(shí)間點(diǎn)。

2：日期字符串格式：常見(jiàn)的日期表示方法，通常是大家可讀的形式展示。
格式可以是 "YYYY-MM-DD"（例如 "2023-09-29"）、"MM/DD/YYYY"（例如 "09/29/2023"）或 "DD/MM/YYYY"（例如 "29/09/2023"）等。

3：時(shí)間戳：
時(shí)間戳是指從某個(gè)固定的起點(diǎn)（通常是 Unix 時(shí)間的起點(diǎn)，即 1970 年 1 月 1 日 00:00:00 UTC）以來(lái)經(jīng)過(guò)的毫秒數(shù)、秒數(shù)或其他單位數(shù)。整數(shù)形式表示。

4：24 小時(shí)制時(shí)間：
以小時(shí)、分鐘和秒為單位，使用 24 小時(shí)制。例如，"12:34:56" 表示 12 時(shí) 34 分 56 秒。

5：AM/PM 時(shí)間：
使用 12 小時(shí)制，并在時(shí)間后面加上 "AM" 或 "PM" 表示上午或下午。例如，"12:34:56 PM" 表示下午 12 時(shí) 34 分 56 秒。

在處理時(shí)間時(shí)，根據(jù)需要選擇適當(dāng)?shù)母袷竭M(jìn)行表示和解析。

1：如何將日期字符串轉(zhuǎn)換為時(shí)間戳？
在JavaScript中，可以使用Date對(duì)象和其相關(guān)方法將日期字符串轉(zhuǎn)換為時(shí)間戳。下面是一個(gè)示例代碼：

const dateString = '2021-09-08'; // 替換為您的日期字符串

const date = new Date(dateString);
const timestamp = date.getTime();

console.log(timestamp); // 輸出時(shí)間戳，例如：1631107200000

使用Date對(duì)象將日期字符串轉(zhuǎn)換為日期對(duì)象，然后使用getTime()方法獲取該日期對(duì)象的時(shí)間戳。

2：如何將時(shí)間戳轉(zhuǎn)日期字符串格式？
在JavaScript中，可以使用Date對(duì)象和其相關(guān)方法將時(shí)間戳轉(zhuǎn)換為日期字符串。下面是一個(gè)示例代碼：

const timestamp = 1631107200000; // 替換為您的時(shí)間戳

const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const dateString = `${year}-${month}-${day}`;

console.log(dateString); // 輸出日期字符串，例如：2021-09-08

使用Date對(duì)象的getFullYear()、getMonth()和getDate()方法來(lái)獲取年、月和日，并使用padStart()方法來(lái)確保月份和日期為兩位數(shù)。

3：如何獲取時(shí)間戳中的年、月、日，小時(shí)、分鐘和秒？

使用Date對(duì)象的相關(guān)方法來(lái)獲取這些信息。下面是一個(gè)示例代碼：

const timestamp = 1631109035000; // 替換為您的時(shí)間戳

const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');

console.log(year, month, day, hours, minutes, seconds);

使用Date對(duì)象的getFullYear()、getMonth()、getDate()、getHours()、getMinutes()和getSeconds()方法來(lái)獲取這些信息，并使用padStart()方法來(lái)確保它們?yōu)閮晌粩?shù)。