Text nach Javascript Timer beendet wird nicht entfernt, wenn der neue Text

Question

kommt

https://jsfiddle.net/zLfuwdtu/1/

ich ein Skript, das eine Reihe date ‚Date1‘ herunterzählt. Während der Countdown läuft, erscheint die Meldung "UNTIL FLOW". Wenn dieser Timer beendet ist, startet er einen anderen Timer "Date2" und zeigt "ON FLOW" an. Das Problem: Wenn 'Date1' den Countdown beendet, wird weiterhin die Meldung 'Date1' (UNTIL FLOW) neben der 'Date2'-Meldung (ON FLOW) angezeigt. Ich brauche es, um die Nachricht von 'Date1' nicht anzuzeigen, wenn die Nachricht von 'Date2' angezeigt wird.

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); 

Answer 1

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, flow) { 
    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 updateBoard(flow) { 
     document.getElementById("flowWindow").textContent = ''; 
     document.getElementById("flow2Window").textContent = ''; 
     switch(flow[current].name) 
     { 
      case 'on': 
       document.getElementById("flowWindow").textContent = 'ON FLOW! '; 
       break; 
      case 'until': 
       document.getElementById("flow2Window").textContent = 'UNTIL FLOW'; 
       break; 
     } 
    } 

    function updateClock() { 
     var t = getTimeRemaining(flow[current].end); 
     if (t.seconds >= 0) { 
      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) { 
      flow.shift(); 
      updateBoard(flow); 
      if (flow[current].name == 'stop') { 
       clearInterval(timer); 
      } 
     } 
    } 
    updateBoard(flow); 
    var timer = setInterval(updateClock, 1000); 
} 
var current = 0; 
var firstend = new Date(); 
var secondend = new Date(); 
firstend.setSeconds(firstend.getSeconds() + 5); 
secondend.setSeconds(secondend.getSeconds() + 10); 
var flow = [ 
    { 'name': 'until', 'end': firstend }, 
    { 'name': 'on', 'end': secondend }, 
    { 'name': 'stop', 'end': null } 
]; 
initializeClock('flowClockdiv', flow); 

Answer 2

Wenn ich etwas Wichtiges verpasst haben, ich glaube, Sie müssen nur jede Nachricht verstecken, wenn die gegenüberliegende sichtbar sein muss:

if (t.total <= 0) {  
    document.getElementById("flowWindow").textContent= 'ON FLOW! '; 
    document.getElementById("flow2Window").textContent= ''; 
    endtime=secondend; 
} 
else 
{ 
    document.getElementById("flow2Window").textContent= 'UNTIL FLOW'; 
    document.getElementById("flowWindow").textContent= ''; 
} 

Oder besser noch nur eine für beide Einzelelement verwenden Nachrichten:

if (t.total <= 0) {  
    document.getElementById("flowWindow").textContent= 'ON FLOW! '; 
    endtime=secondend; 
} 
else 
{ 
    document.getElementById("flowWindow").textContent= 'UNTIL FLOW'; 
}