新文本到达时，不会删除javascript计时器完成后的文本

Question

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

I have a script that counts down a set date 'Date1'. While it counts down it displays a message "UNTIL FLOW". When that timer finishes it starts another timer 'Date2' in its place and displays "ON FLOW".

The problem: When 'Date1' finishes the countdown, it continues to display the message from 'Date1' (UNTIL FLOW) alongside the 'Date2' message (ON FLOW). I need it to not display the message from 'Date1' when displaying 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);

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

Unless I've missed something important, I think you just need to hide each message whenever the opposite one needs to be visible:

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= '';
}

Or better still just use one single element for both messages:

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