Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Convert HH:MM:SS to seconds with JavaScript?
To convert HH:MM:SS to seconds with JavaScript, we use simple arithmetic operations like multiplication and addition. We split the time string and convert each component to seconds using the formula: hours × 3600 + minutes × 60 + seconds.
In this article, we are given a time in HH:MM:SS format and our task is to convert it to total seconds using JavaScript.
Steps to Convert HH:MM:SS to Seconds
- Use the split() function to separate hours, minutes, and seconds by colon delimiter.
- Convert hours to seconds by multiplying by 3600 (60 × 60).
- Convert minutes to seconds by multiplying by 60.
- Add all components together: (hours × 3600) + (minutes × 60) + seconds.
- Display the result using DOM manipulation methods.
Using Fixed Time Input
Here's a complete example that converts a predefined time string to seconds:
<!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:08: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>
The time = 10:08:20 Total Seconds = 36500
Using User Input
This example accepts time input from users and converts it to seconds when the button is clicked:
<!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>Enter time in HH:MM:SS format to convert 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;
if (!time) {
alert("Please enter a valid time in HH:MM:SS format");
return;
}
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>
Alternative Function Approach
You can also create a reusable function for time conversion:
function timeToSeconds(timeString) {
const parts = timeString.split(':');
const hours = parseInt(parts[0], 10);
const minutes = parseInt(parts[1], 10);
const seconds = parseInt(parts[2], 10);
return hours * 3600 + minutes * 60 + seconds;
}
// Test the function
console.log(timeToSeconds('02:30:45')); // 9045
console.log(timeToSeconds('01:00:00')); // 3600
console.log(timeToSeconds('00:05:30')); // 330
9045 3600 330
Key Points
- The unary plus operator (+) converts strings to numbers efficiently.
- Always validate user input to prevent errors with malformed time strings.
- 1 hour = 3600 seconds, 1 minute = 60 seconds.
- The split(':') method separates the time components into an array.
Conclusion
Converting HH:MM:SS to seconds in JavaScript involves splitting the time string and applying basic arithmetic. Use the formula (hours × 3600) + (minutes × 60) + seconds for accurate conversion.
1K+ Views
