使用JavaScript將HH:MM:SS轉換為秒?


要使用JavaScript將HH:MM:SS轉換為秒,我們將使用簡單的算術運算,例如乘法和加法。我們將透過兩個示例程式碼及其逐步說明來理解這種轉換。

在本文中,我們得到一個HH:MM:SS格式的時間,我們的任務是使用JavaScript將HH:MM:SS轉換為秒。

將HH:MM:SS轉換為秒的步驟

  • 我們使用了兩個div來顯示時間和以秒為單位的結果。
  • time變數以HH:MM:SS格式儲存時間。然後,我們使用split()函式透過冒號分割小時、分鐘和秒,並將它們儲存在realTime中。
  • 然後,我們使用索引訪問儲存在realTime中的小時、分鐘和秒。我們將小時乘以60*60,將分鐘乘以60以轉換為秒。
  • 最後,我們使用getElementById()方法和innerHTML訪問id為result的div來顯示結果。

示例1

這是一個完整的示例程式碼,實現了上述將HH:MM:SS轉換為秒的步驟。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Converting Time to Seconds</title>
</head>
<body>
    <h2>
        Converting HH:MM:SS to seconds with JavaScript
    </h2>
    <div id="time"></div>
    <div id="result"></div>
    <script>
        let time = '10:8:20';
        let realTime = time.split(':');
        let totalSeconds = (+realTime[0]) * 60 * 60 + 
                           (+realTime[1]) * 60 + (+realTime[2]);
        document.getElementById("time")
            .innerHTML= "The time=" + time;
        document.getElementById("result")
            .innerHTML= "Total Seconds=" + totalSeconds;
    </script>
</body>
</html>

示例2

在這個例子中,我們以HH:MM:SS格式從使用者那裡獲取時間作為輸入。我們使用了文字type input欄位和value屬性來獲取使用者輸入的時間,以及一個button,它觸發將時間轉換為秒的toSec()函式。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Converting Time to Seconds</title>
</head>
<body>
    <h2>
        Converting HH:MM:SS to seconds with JavaScript
    </h2>
    <p>
        In this example, we are accepting time as user input
        to convert time to seconds. 
    </p>
    <label for="timeValue">
        <strong>Enter time (HH:MM:SS):</strong>
    </label>
    <br>
    <input type="text" id="timeValue" placeholder="e.g., 11:13:25">
    <button onclick="toSec()">Convert</button>
    <div id="time"></div>
    <div id="result"></div>
    <script>
        function toSec() {
            let time = document.getElementById('timeValue').value;
            let realTime = time.split(':');
            let totalSeconds = (+realTime[0]) * 60 * 60 + 
                               (+realTime[1]) * 60 + (+realTime[2]);
            document.getElementById("time")
                .innerHTML = "The time = " + time;
            document.getElementById("result")
                .innerHTML = "Total Seconds = " + totalSeconds;
        }
    </script>
</body>
</html>

結論

在本文中,我們瞭解瞭如何將HH:MM:SS轉換為秒。我們提供了兩個將時間轉換為秒的示例,在第一個示例中給出了固定時間,在第二個示例中,時間可以由使用者輸入。

更新於:2024年11月13日

904 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告