如何使用 JavaScript 在 12 小時制和 24 小時制之間切換按鈕

Question

我正在嘗試使用 HTML、CSS 和 JavaScript 構建數字時鍾。 我制作了一個按鈕，可以在 12 小時制和 24 小時制之間切換。 我堅持如何使這成為可能的邏輯。

function displayTime(){
    let d = new Date()
    let hour = d.getHours()
    let minute = d.getMinutes()
    let second = d.getSeconds()
    let amOrPm = "AM"
    let clockSystem = document.getElementById("24hr-btn")

    // Indicates whether its AM or PM
    if (hour >= 12){
        amOrPm = "PM"
    }
   // Toggle Clock System
    function clockSystemTime(){
         // sets the clock to the 12hr system clock
        if (hour > 12) {
            hour -= 12
    } else {
        hour += 12
        }
    }

    if (hour < 0){
        hour = "0" + hour
    }

    if (minute < 10){
        minute = "0" + minute
    }

    if (second < 10){
        second = "0" + second
    }

    document.getElementById("clock").innerHTML = hour + ":" + minute + ":" + second + " " + amOrPm;
}

setInterval(displayTime, 1000)

your text

Answer 1

如果您使用Intl API，它會更簡單並且更不容易出錯。

參考

這提供了一個 12 小時制的時鍾：

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
console.log(new Intl.DateTimeFormat('en-US', { timeStyle: 'short', hour12: false, }).format(date));

這提供了一個 24 小時時鍾：

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
console.log(new Intl.DateTimeFormat('en-US', { timeStyle: 'short', hour12: true, }).format(date));

因此：

 let twelveHour = false; function displayTime(){ const date = new Date(); document.getElementById("clock").innerHTML = new Intl.DateTimeFormat('en-US', { timeStyle: 'long', hour12: twelveHour, }).format(date); } document.getElementById("clock").addEventListener("click", ()=>{ clearInterval(interval); twelveHour =;twelveHour, var interval = setInterval(displayTime, 1000) })

 <button id="clock">Click Me</button>

Answer 2

或許你能在這里找到答案？ 如何以 12 小時 AM/PM 格式顯示 JavaScript 日期時間？

如果不是，那么邏輯如下。 Date返回 24 小時制日期。 因此，獲得時間將是我們在轉換時間時可能面臨的唯一問題。

如果小時大於十二，則從小時中減去 12，並將時鍾設置為下午。 如果不是，就抓緊時間。 分鍾和秒等其他一切都應保持不變。

至於按鈕，只要讓它在用戶點擊時，它就會改變一個 JS 變量，其中包含你是在做 12 小時制還是 24 小時制。 如果是 12，請運行我上面描述的邏輯。 如果是 24，就拿這個對象給你的東西。