Convert Seconds to Time Format in JavaScript
During development, we often deal with time values returned from backend services in seconds (e.g., 45000 seconds). To enhance readability, we convert these values into a more human-friendly format, such as 12:30:00 or 12 hours 30 minutes 00 seconds. This is useful for scenarios like timers, task durations, and video playback time displays.
This article introduces methods to convert seconds into two common formats: HH:MM:SS and HH hours MM minutes SS seconds using JavaScript.
1. Convert Seconds to “HH hours MM minutes SS seconds” Format
First, we create a function that transforms seconds into a structured format, ensuring zero-padding where necessary.
Implementation:
const formatSeconds = seconds => {
if (isNaN(seconds) || seconds < 0) return '00 hours 00 minutes 00 seconds';
let secondTime = parseInt(seconds);
let minuteTime = Math.floor(secondTime / 60);
let hourTime = Math.floor(minuteTime / 60);
secondTime %= 60;
minuteTime %= 60;
return (
`${hourTime.toString().padStart(2, '0')} hours ` +
`${minuteTime.toString().padStart(2, '0')} minutes ` +
`${secondTime.toString().padStart(2, '0')} seconds`
);
};
// Test
console.log(formatSeconds(45000)); // Output: 12 hours 30 minutes 00 seconds
Code Analysis:
- Time conversion: Extracts hours, minutes, and seconds from total seconds.
- Zero padding: Ensures values always have two digits for consistency.
- Readable formatting: Constructs a well-structured output string.
2. Convert Seconds to “HH:MM:SS” Format
Another widely used format separates hours, minutes, and seconds with colons (:), making it suitable for digital clocks and video players.
Implementation:
const getSeconds = seconds => {
if (isNaN(seconds) || seconds < 0) return '00:00:00';
let secondTime = parseInt(seconds);
let minuteTime = Math.floor(secondTime / 60);
let hourTime = Math.floor(minuteTime / 60);
secondTime %= 60;
minuteTime %= 60;
return (
`${hourTime.toString().padStart(2, '0')}:` +
`${minuteTime.toString().padStart(2, '0')}:` +
`${secondTime.toString().padStart(2, '0')}`
);
};
// Test
console.log(getSeconds(45000)); // Output: 12:30:00
Code Analysis:
- Same conversion logic as
formatSecondsbut uses:as the separator. - Zero padding ensures a consistent display (e.g.,
08:03:09).
3. Optimized Universal Conversion Function
To improve maintainability and avoid code duplication, we can consolidate the logic into a single function with customizable formatting options.
Implementation:
const convertTime = (seconds, format = 'colon') => {
if (isNaN(seconds) || seconds < 0)
return format === 'colon' ? '00:00:00' : '00 hours 00 minutes 00 seconds';
let secondTime = parseInt(seconds);
let minuteTime = Math.floor(secondTime / 60);
let hourTime = Math.floor(minuteTime / 60);
secondTime %= 60;
minuteTime %= 60;
if (format === 'colon') {
return (
`${hourTime.toString().padStart(2, '0')}:` +
`${minuteTime.toString().padStart(2, '0')}:` +
`${secondTime.toString().padStart(2, '0')}`
);
} else {
return (
`${hourTime.toString().padStart(2, '0')} hours ` +
`${minuteTime.toString().padStart(2, '0')} minutes ` +
`${secondTime.toString().padStart(2, '0')} seconds`
);
}
};
// Tests
console.log(convertTime(45000, 'colon')); // Output: 12:30:00
console.log(convertTime(45000, 'text')); // Output: 12 hours 30 minutes 00 seconds
Optimizations:
- Custom format selection: Allows flexible output.
- Code reuse: Eliminates duplicate logic.
- Validation: Ensures input is a valid number.
4. Additional Examples
Example 1: Convert User Input Seconds
const userSeconds = prompt('Enter seconds:');
console.log(convertTime(parseInt(userSeconds), 'colon'));
Example 2: Display Countdown Timer
const startCountdown = totalSeconds => {
let interval = setInterval(() => {
console.log(convertTime(totalSeconds, 'colon'));
if (totalSeconds <= 0) clearInterval(interval);
totalSeconds--;
}, 1000);
};
startCountdown(15); // Starts a countdown from 15 seconds
5. Application Scenarios
- Timers: Countdown or elapsed time tracking.
- Video Players: Display playback progress.
- Task Durations: Show processing times.
- Log Systems: Track system uptime or request durations.
6. Conclusion
This article covered multiple ways to convert seconds into human-readable time formats in JavaScript. We provided:
- Two formatting functions:
HH:MM:SSandHH hours MM minutes SSseconds. - An optimized function for flexible conversions.
- Practical usage examples, including a countdown timer.
This approach enhances code maintainability, user experience, and readability in various applications.