Question

这是我的jQuery倒数计时器。它显示特定日期之前的剩余时间。当没有达到截止日期时，一切正常。但是，如果在页面处于活动状态时达到截止日期，则在所有字段days，hours，minutes，seconds中显示为零。但是当用户在截止日期过后加载页面时，它会显示为负数的时间。在这种情况下，我想在所有部分显示零。我在下面附上我的代码，请帮忙。

var getRemainderTime = function(finishtime) 
{
  var t = Date.parse(finishtime) - 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
  };
};

var initializeClock = function(finishtime) 
{

var updateClock = function() 
{
  var t = getRemainderTime(finishtime);

  $("#clockdiv .days").html(t.days);
  $("#clockdiv .hours").html(('0' + t.hours).slice(-2));
  $("#clockdiv .minutes").html(('0' + t.minutes).slice(-2));
  $("#clockdiv .seconds").html(('0' + t.seconds).slice(-2));

  if (t.total <= 0) {
    clearInterval(timeinterval);
  }
};

updateClock();
var timeinterval = setInterval(updateClock, 1000);
};
var deadline = 'October 30 2016 23:59:59 GMT-0400';

我认为我的t.total无效，但似乎工作正常。请帮我解决这个问题。

Answer 1

你需要添加一个if条件，如果时间已经过去，则返回0。

＆＃13;

var getRemainderTime = function(finishtime) 
{
  var t = Date.parse(finishtime) - Date.parse(new Date());
  if ( t >= 0  ) {
  
  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
  };
    }
  else {
    return {
    'total': 0,
    'days': 0,
    'hours': 0,
    'minutes': 0,
    'seconds': 0
  };
    }
  
};

var initializeClock = function(finishtime) 
{

var updateClock = function() 
{
  var t = getRemainderTime(finishtime);

  $("#clockdiv .days").html(t.days);
  $("#clockdiv .hours").html(('0' + t.hours).slice(-2));
  $("#clockdiv .minutes").html(('0' + t.minutes).slice(-2));
  $("#clockdiv .seconds").html(('0' + t.seconds).slice(-2));

  if (t.total <= 0) {
    clearInterval(timeinterval);
  }
};

updateClock();
var timeinterval = setInterval(updateClock, 1000);
};

document.getElementById('startCountDown').onclick= function () { 
$('#clockdiv').show();  initializeClock(document.getElementById('finishtime').value);
}

＆＃13;

#finishtime {
  width: 300px;
}
#clockdiv {
  display: none;
}
#startCountDown {
  display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
Please set the deadline: <input id="finishtime" type="text" value="September 26 2016 07:48:15 GMT+0530">
<button id="startCountDown"> Start Countdown</button>
</div>
<div id="clockdiv">
  <span class="days"></span> days&nbsp;,
  <span class="hours"></span>hours :&nbsp;
  <span class="minutes"></span>mins :&nbsp;
  <span class="seconds"></span>seconds
</div>

＆＃13;

当时间过去时，jQuery Timer不会清除间隔

1 个答案: