codesandbox

export default function App() {
  return <p>The current time is {new Date().toLocaleTimeString()}.</p>;
}

Date.prototype.toLocaleTimeString() MDN

toLocaleTimeString()

是Date instances的方法。根據特定的語言環境，考慮到該語言的特性，例如時間的顯示方式、時區等，將日期的時間部分以特定格式轉換為字串。」

new Date().toLocaleTimeString()

是 JavaScript 中用於獲取目前時間的方法之一。這個方法返回當前時間的字串表示形式，這個字串是根據當前瀏覽器或系統的地區設定以及語言環境而定的。它會根據所在地區的慣例，以語言的方式表示時間。

若系統設定為其他語言或地區，則會以該地區的時間表示形式返回時間字串。
例如，系統設定為英文（美國），它可能返回類似於 "12:00:00 PM" 的時間格式。
這種方法可以根據地區設定返回不同格式的時間，讓你在不同語言環境下顯示合適的時間格式。

時間停留在JSX元素第一次render時。

若要動態更新時間要使用狀態(state)和定時器

// 時間動態更新
import React, { useState, useEffect } from "react";

export default function App() {
  const [currentTime, setCurrentTime] = useState(
    new Date().toLocaleTimeString(),
  );

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>The current time is {currentTime}.</p>
    </div>
  );
}

下次練習 刻網站 https://www.timeanddate.com/