Javascript时钟变为负数

Question

http://jsfiddle.net/8Ab78/448/

我试图修复它但失败了。

function ShowTime() {
  var now = new Date();
  var tomorrow = new Date();
  tomorrow.setDate(today.getDate() + 1);
  var hrs = 17 - now.getHours();
  var mins = 30 - now.getMinutes();
  var secs = 60 - now.getSeconds();
  if (hrs < 0) {
    var hrs = 17 - tomorrow.getHours();
    var mins = 30 - tomorrow.getMinutes();
    var secs = 60 - tomorrow.getSeconds();
  }
  timeLeft = "" + hrs + ' hours ' + mins + ' minutes ' + secs + ' seconds';
  $("#countdown").html(timeLeft);
}

ShowTime();
var countdown = setInterval(ShowTime, 1000);

<div id="countdown"></div>

Answer 1

你的算法坏了。

每次时钟滴答作响，都会生成一个新的日期。如果是 18:00 那么：

var hrs = 17 - now.getHours();

会变成负数，所以你会这样做：

var hrs = 17 - tomorrow.getHours();

但这会产生-1。您要做的是为结束时间创建一个日期，然后从中减去当前日期并将结果（毫秒）解析为小时、分钟和秒。

我不知道分钟和秒的调整是为了什么，它们对我来说没有意义。以下内容对您的代码进行了细微调整：

function ShowTime() {
  var now = new Date();
  var end = new Date(+now);
  var endHour = 17;
  end.setHours(endHour,0,0,0);

  // If past end, set to tomorrow
  if (now >= end) {
    end.setDate(end.getDate() + 1);
  }

  console.log('Counting down to ' + end.toString());
  
  // Get difference and divide into hr, min, sec
  var diff = end - now;
  var hrs = diff / 3.6e6 | 0;
  var mins = (diff % 3.6e6)/ 6e4 | 0;
  var secs = (diff % 6e4) / 1000 | 0;
  
  // Format and write to document
  timeLeft = "" + hrs + ' hours ' + mins + ' minutes ' + secs + ' seconds';
  document.getElementById('countdown').innerHTML = timeLeft;
}

ShowTime();
var countdown = setInterval(ShowTime, 1000);

<div id="countdown"></div>

如果您要倒计时到 17:30，请引入一个 endMin 变量，例如：

  var endHour = 17;
  var endMin  = 30;
  end.setHours(endHour, endMin, 0, 0);

  // If past end hour, set to tomorrow
  if (now > end) {

Answer 2

当您想停止计时器时，您需要致电clearInterval(countdown);。根据 clearInterval docs on MDN

WindowOrWorkerGlobalScope mixin 的 clearInterval() 方法取消了之前通过调用 setInterval() 建立的定时重复操作。

另外，我认为您提供的代码需要更改为 tomorrow.setDate(now.getDate() + 1); 而不是 tomorrow.setDate(today.getDate() + 1);

Answer 3

您将变量定义为 now 并查找今天，因此它不显示倒计时

新的html如下所示

<div id="countdown"></div>

新的js会像下面这样

function ShowTime() {
var today= new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate()+1);
var hrs = 17-now.getHours();
var mins = 30-now.getMinutes();
var secs = 60-now.getSeconds();
if(hrs < 0) {
var hrs = 17-tomorrow.getHours();
var mins = 30-tomorrow.getMinutes();
var secs = 60-tomorrow.getSeconds();
}
  timeLeft = "" +hrs+' hours '+mins+' minutes '+secs+' seconds';
$("#countdown").html(timeLeft);
}

ShowTime();
var countdown = setInterval(ShowTime ,1000);

Answer 4

我从之前的笔记中找到了这个，但我在 SO 中找不到问题的链接。

<font size=1><p id='demo'></font>

<script src="path/to/jquery.js"></script> 
<script>
    // Set the date we're counting down to
    //var insert1="<?php echo $insert1; ?>";
    //var timeout1="<?php echo $timeout1; ?>";
    var insert1="05/23/2017 00:00:00";
    var timeout1="05/25/2017 00:00:00";

    // Update the count down every 1 second
    var x = setInterval(function() {
        var countDownDate = new Date(timeout1).getTime();
        var countDownDates = new Date().getTime();
        // Get todays date and time

        // Find the distance between now an the count down date
        var distance = countDownDate - countDownDates;
        //var distance = countDownDates;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Output the result in an element with id="demo"
        document.getElementById("demo").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "Time out";
        }
    }, 1000);
</script>