HTML網絡編程之時間格式

絡編程之時間格式。

同學們好，今天我們分享的是如何讓搜索引擎等程序更容易地提取網頁中的時間信息。我們將使用time標簽來實現這一目標。這個標簽你們可能已經有所了解，但是現在不需要掌握太多細節，只需要知道它的作用即可。

現在來看看我們的示例頁面，可以看到頁面中包含了很多句不同時間格式的文字。這些文字并沒有什么特別之處，只是每一句都包含著時間信息。時間信息的格式比較復雜，但是這不影響我們的演示效果。

接下來，我們將介紹實現代碼。time標簽用于定義公歷日期或時間、二十四小時制，時間和時區偏移是可選的。在所有瀏覽器中，time標簽不會渲染任何特殊的效果。但是，它可以讓搜索引擎更容易地在網頁中找到對應的時間信息。

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

在我們的示例中，時間和普通文字看上去沒有任何區別。除了搜索引擎，網頁同手機上的日歷、提醒等應用程序交互時，time標簽也可以提供很大的方便。

time標簽非常簡單，只包含一個屬性datatime，用于規定日期和時間。如果需要，我們還可以通過元素的內容來指定日期和時間。time標簽的值有很多種，只要是符合規范的時間寫法格式，都可以被接受并轉化為第三方使用的格式。

總之，time標簽的使用頻率并不高，不需要我們進行太多的學習和理解。如果你們知道有這個東西并且知道它的大概意思，就可以了。

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

下期見，想學習編程的同學請關注我。

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示例中所示。不過，在此示例中為了保持簡潔，省略了該部分代碼。

家我呀,我是yangyang,此刻看到一個小特效,是國外一哥們做的,特來分享給大家.

效果介紹

數字時代，數字發光時鐘體現了形式與功能的融合。在這篇文章中，我們將深入研究如何使用 HTML、CSS 和 JavaScript 來構建一個。

HTML

構建一個結構化基礎，其中包含小時、分鐘、秒和可選的 AM/PM 指示器元素。可訪問性至關重要，因此我們將使用語義標簽并提供有意義的描述。

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Digital clock</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="hero">
      <div class="box">
        <style></style>
        <div class="clock">
          <span id="hrs">00</span>
          <span>:</span>
          <span id="min">00</span>
          <span>:</span>
          <span id="sec">00</span>
        </div>
      </div>
    </div>
    <script src="js/index.js"></script>
  </body>
</html>

css

利用 box-shadow 和 text-shadow 等屬性，我們將為時鐘注入活力。通過微調顏色和發光強度，我們將確保它吸引用戶。

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}
.hero {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f363e;
  position: relative;
}
.box {
  position: relative;
  width: 800px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clock {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(40px);
  color: #6e7f92f6;
  z-index: 10;
}
.clock span {
  font-size: 80px;
  width: 110px;
  display: inline-block;
  text-align: center;
  position: relative;
}
.clock span::after {
  font-size: 16px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}
#hrs::after {
  content: "HOURES";
  color: #0f0;
  font-weight: 600;
  margin-bottom: -10px;
}
#min::after {
  content: "MINS";
  color: #0ff;
  font-weight: 600;
  margin-bottom: -10px;
}
#sec::after {
  content: "SEC";
  color: #ff0;
  font-weight: 600;
  margin-bottom: -10px;
}

/*------Anemated Border---------*/
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #0f0,
    #ff0,
    #0ff,
    #f0f,
    #0ff
  );
  border-radius: 20px;
  animation: rotate 6s linear infinite;
}
.box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #0f0,
    #ff0,
    #0ff,
    #f0f,
    #0ff
  );
  border-radius: 20px;
  animation: rotate 4s linear infinite;
  filter: blur(40px);
  opacity: 0.75;
}
.box style {
  position: absolute;
  inset: 4px;
  background: #2f363e;
  border-radius: 16px;
  color: #ff0;
  font-size: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes rotate {
  0% {
    --a: 0;
  }
  0% {
    --a: -360deg;
  }
}

js

JavaScript 為我們的時鐘注入了活力，實現了小時、分鐘和秒的實時更新。我們還將考慮添加時區支持和用戶偏好的自定義選項等功能。

在線咨詢

上一篇：web前端布局HTML+CSS
下一篇：CSS-畫一個紅蘋果

您的項目需求

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

整合營銷服務商