Question

我有一个脚本可以倒计时'Date1'。倒计时显示消息“UNTIL FLOW”。当该计时器结束时，它会在其位置启动另一个计时器“Date2”并显示“ON FLOW”。

问题：当'Date1'完成倒计时时，它会继续显示来自'Date1'（UNTIL FLOW）的消息以及'Date2'消息（ON FLOW）。我需要它在'Date2'显示消息时不显示来自'Date1'的消息。

  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

除非我错过了一些重要的内容，否则我认为只要需要隐藏每条消息，我就需要隐藏每条消息：

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

或者更好的是，只为这两条消息使用一个元素：

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

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

2 个答案: