Right now, I could display days hours minutes and seconds withtout a problem. But what I want to do this time is take the days, convert them into hours and display it.
For example, if I set my timer to be three days from now, I want it to display 72 hours 20 minutes 30 seconds
. Notice how days aren't in the picture, I don't want to do display 3 days
.
How would I be able to achieve this?
var countDownDate = new Date("6 June 2019 15:00:00");
var options = {
hour: 'numeric',
minute: 'numeric',
hour12: true
};
var countDate = countDownDate.toLocaleString('en-US', options);
console.log(countDate);
var now = new Date().getTime();
var timeDifference = countDownDate - now;
var oneDay = 1000 * 60 * 60 * 24;
var days = Math.floor(timeDifference / (oneDay));
var hours = Math.floor((timeDifference % (oneDay)) / (1000 * 60 * 60));
var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
// Displays the clock counting down
document.querySelector("#timer").innerHTML = `
<span>${hours} </br> hours</span>
<span>${minutes} </br> minutes</span>
<span>${seconds} </br> seconds!</span>`;
if(timeDifference < 0) {
clearInterval(timer);
document.getElementById("timer").innerHTML = "Expired";
}