使用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轉換為秒。我們提供了兩個將時間轉換為秒的示例,在第一個示例中給出了固定時間,在第二個示例中,時間可以由使用者輸入。
廣告