https://jsfiddle.net/zLfuwdtu/1/
I've developed a script that tracks down to date 'Date1'. As it counts down, it shows the message "UNTIL FLOW." Once this timer reaches zero, another timer 'Date2' takes its place and displays "ON FLOW."
The issue at hand is that when 'Date1' finishes counting down, it continues to show the message from 'Date1' (UNTIL FLOW) along with the message from 'Date2' (ON FLOW). I need it not to display the message from 'Date1' while showing the message from 'Date2.'
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime, secondend, newfirstend) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.flowDays');
var hoursSpan = clock.querySelector('.flowHours');
var minutesSpan = clock.querySelector('.flowMinutes');
var secondsSpan = clock.querySelector('.flowSeconds');
function updateClock() {
var t = getTimeRemaining(endtime);
if(t.seconds<0)
{
clearInterval(timeinterval);
}
else
{
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
if (t.total <= 0) {
document.getElementById("flowWindow").textContent= 'ON FLOW! ';
endtime=secondend;
}
else
{document.getElementById("flow2Window").textContent= 'UNTIL FLOW';}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var firstend = 'Sun Jul 05 2016 03:38:40 GMT-0400 (EDT)';
var secondend = 'Sun Jul 08 2016 20:52:10 GMT-0400 (EDT)';
initializeClock('flowClockdiv', firstend, secondend, firstend);