I've found a great count up timer on-line, but I need a timer that will show time till a certain date, and once that date-time has past, it'll show how long it's been since that date-time.
I've tried to add a switch statement, but I get all zero's.
The statement has to change depending on if the count to/from date has passed.
Here's the entire webpage
<html>
<head>
<title>Orders with Approvals Received</title>
<meta http-equiv="refresh" content="150">
<script>
/*
* Basic Count Up from Date and Time
* Author: @mrwigster / https://guwii.com/bytes/count-date-time-javascript/
*/
window.onload = function() {
// Month Day, Year Hour:Minute:Second, id-of-element-container
countUpFromTime("Feb 6, 2020 15:00:00", 'countup1'); // ****** Change this line!
};
function countUpFromTime(countFrom, id) {
countFrom = new Date(countFrom).getTime();
var now = new Date(),
countFrom = new Date(countFrom),
timeDifference = now < countup1 ? (countFrom - now): (now - countFrom);
// timeDifference = (now - countFrom); // Count Up
// timeDifference = (countFrom - now); //Count Down
var secondsInADay = 60 * 60 * 1000 * 24,
secondsInAHour = 60 * 60 * 1000;
days = Math.floor(timeDifference / (secondsInADay) * 1);
hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);
var idEl = document.getElementById(id);
idEl.getElementsByClassName('days')[0].innerHTML = days;
idEl.getElementsByClassName('hours')[0].innerHTML = hours;
idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
idEl.getElementsByClassName('seconds')[0].innerHTML = secs;
clearTimeout(countUpFromTime.interval);
countUpFromTime.interval = setTimeout(function(){ countUpFromTime(countFrom, id); }, 1000);
}
</script>
<style>
body {margin:0;
width: 322px;
height: 192px;
}
.caption
{
background-color:BLUE;
color:white;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
border-style:solid;
border-width:1px;
border-color:white;
text-align:center;
}
.countup {
text-align: center;
margin-bottom: 0px;
}
.countup .timeel {
display: inline-block;
padding: 9px;
background: #151515;
margin: 0;
color: white;
margin-left: 0px;
border-radius: 5px 0 0 5px;
}
.countup span[class*="timeRef"] {
border-radius: 0 10px 10px 0;
margin-left: 0;
background: #e8c152;
color: black;
}
</style>
</head>
<body>
<thead>
<div class="caption">
<caption>1_Arthur20 Ended</caption>
</div>
</thead>
<tbody>
<div class="countup" id="countup1">
<span class="timeel days">00</span>
<span class="timeel timeRefDays">D</span>
<span class="timeel hours">00</span>
<span class="timeel timeRefHours">H</span>
<span class="timeel minutes">00</span>
<span class="timeel timeRefMinutes">M</span>
<span class="timeel seconds">00</span>
<span class="timeel timeRefSeconds">S</span>
</div>
<div class="countup" id="countup1">
<span class="timeel days">2</span>
<span class="timeel timeRefDays">Open</span>
<span class="timeel hours">502</span>
<span class="timeel timeRefHours">Total</span>
</div>
</tbody>
</table>
</html>
I'd appreciate any help that you could give. Thanks,
Edit: I added the line as palash suggested, but one the time has passed it gives me an extra 1 day, 1 hour, 1 minute. So when it's counting down it works great, once it hits all zeros, I get the extra time on the count up. I thought it might be because of timezone, but if I substitute the count up code it works fine. Not certain what's going on with it.
Thanks to everyone that commented.