【问题标题】:jQuery countdown timer does not count downjQuery倒计时计时器不倒计时
【发布时间】:2015-07-13 09:18:25
【问题描述】:

我正在尝试使用 jQuery 实现倒数计时器。我有一个结束时间,计时器应该从它开始倒计时,直到当前时间与它相同。

我从使用 PHP 获取的 Web 服务获取结束时间,我得到的结束时间类似于 2015-07-15 17:29:31

我的实际代码行是这样的

var then=<?php echo $server_response; ?>;

为了便于理解,我在小提琴中进行了更改

var then='2015-07-15 17:29:31';

这是 JavaScript 代码:

var timer;
var then='2015-07-15 17:29:31';
var now = new Date();
//now.setDate(now.getDate() + 7); 

var compareDate=then.getDate()-now.getDate();
timer = setInterval(function() {
  timeBetweenDates(compareDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = toDate;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);

  } else {

    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
}

HTML

<div id="timer">
  <span id="days"></span>days
  <span id="hours"></span>hours
  <span id="minutes"></span>minutes
  <span id="seconds"></span>seconds
</div>

Fiddle

【问题讨论】:

  • JS调试101;检查控制台:Uncaught TypeError: then.getDate is not a function

标签: javascript jquery timer countdown


【解决方案1】:

要从字符串中获取date,请使用new Date(date)

查看更改:

var compareDate = new Date(then) - now.getDate();
//                ^^^^^^^^^^^^^^ instead of then.getDate()

timeBetweenDates()

var dateEntered = new Date(toDate);
//                ^^^^^^^^^^^^^^^^^ Parse to date instead of using it as it is

Demo

编辑

同时更改从服务器获取日期的方式。 用引号括起来。

var then = '<?php echo $server_response; ?>'; // String

【讨论】:

  • 我得到的是 NaN。在小提琴中它有效;可能的原因是什么? @Tushar
  • @SajeevC 在我看到代码之前不能说。看起来你期待 Number 的东西,但它不是
  • @SajeevC 那是服务器端的问题,与javascript无关
  • 找出罪魁祸首。 compareDate 产生 NaN。 parseInt() 没有帮助我解决这个问题。 @Tushar
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-20
  • 2020-09-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多