Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Convert HH:MM:SS to Seconds with JavaScript
To convert HH:MM:SS to seconds with JavaScript, we will be using simple arithmetic operations like mltiplication and addition. We will be understanding this conversion with two example codes and their stepwise explanation.
In this article, we are given a time in HH:MM:SS format and our task is to convert HH:MM:SS to seconds with JavaScript.
Steps to Convert HH:MM:SS to Seconds
- We have used two div to display the time and the result in seconds.
- The time variable stores the time in HH:MM:SS format. Then we have used split() function to split hour, minutes and seconds by colon and stored it in realTime.
- Then we have used index to access hours, minutes and seconds which was stored in realTime. We have multiplied hours by 60*60 and minutes by 60 to convert into seconds.
- At the end, we have displayed the result by accessing the div with id result using getElementById() method and innerHTML.
Example 1
Here is a complete example code implementing above mentioned steps to convert HH:MM:SS to seconds with JavaScript.
<!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>
Example 2
In this example, we are taking time as input from users in HH:MM:SS format. We have used text type input field and value property to get the time entered by user and a button that triggers toSec() function that converts time 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>
<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>
Conclusion
In this article, we understood how to convert HH:MM:SS to seconds. We have provided two examples for converting time to seconds where, in first example a fixed time is given and in seconds example, time can be enterd by users.
1K+ Views
