Question

我使用纯JS建立了一个倒数计时器，所有这些似乎都能正常工作，直到我进入IE8。使用IE8在计时器字段中返回NaN。

我意识到那个时刻对于处理日期/时间字段是一个很好的库，但我想尝试使用好的旧JS（没有库）。这就是为什么我将日期转换为UNIX以便进行一些简单的数学运算。

这是我使用的JS：

(function(){
  // Setup all the variables needed
  var week = document.getElementById('timer-weeks');
  var day = document.getElementById('timer-days');
  var hour = document.getElementById('timer-hours');
  var min = document.getElementById('timer-minutes');
  var sec = document.getElementById('timer-seconds');
  var target = new Date('2017-01-17T08:00:00Z').getTime();
  setInterval(function(){
    var now = new Date().getTime();
    var d = target - now;

    // Get number of weeks until event
    var weeks = Math.floor(d/604800000);
    week.innerHTML = weeks;

    // Remove weeks from d variable and work out days
    d = d - (weeks * 604800000);
    var days = Math.floor(d/86400000);
    day.innerHTML = days;

    // Remove days from d variable and work out hours
    d = d - (days * 86400000);
    var hours = Math.floor(d/3600000);
    hour.innerHTML = hours;

    // Remove hours from d variable and work out minutes
    d = d - (hours * 3600000);
    var minutes = Math.floor(d/60000);
    min.innerHTML = minutes;

    // Remove minutes from d variable and work out seconds
    d = d - (minutes * 60000);
    var seconds = Math.floor(d/1000);
    sec.innerHTML = seconds;

  }, 1000);

}());

以下是Codepen的链接：http://codepen.io/MattJLeach/pen/JEdXoZ

感谢您提供任何帮助

Answer 1

我没有IE 8，但是从内存中它不解析ISO 8601日期字符串。你不应该这样做，因为使用Date构造函数（或Date.parse）进行解析不是一个好主意。

ES5之前的等价物：

new Date('2017-01-17T08:00:00Z').getTime();

是

Date.UTC(2017,0,17,8,0,0);

在任何地方都兼容，而且输入也少。 ; - ）

// Should fail in IE 8 and other pre ES5 implementaitons
console.log(new Date('2017-01-17T08:00:00Z').getTime());

// Compatible everywhere
console.log(Date.UTC(2017,0,17,8,0,0));

顺便说一下，您的代码可以更简洁一些：

(function(){
  // Setup all the variables needed
  var tgtDate = document.getElementById('timer-date'); 
  var week = document.getElementById('timer-weeks');
  var day = document.getElementById('timer-days');
  var hour = document.getElementById('timer-hours');
  var min = document.getElementById('timer-minutes');
  var sec = document.getElementById('timer-seconds');
  var target = Date.UTC(2017,1,17,8);
  tgtDate.innerHTML = new Date(target).toString();
  setInterval(function(){
    var now = new Date();
    var d = target - now;

    // Get number of weeks until event
    week.innerHTML =  d/6.048e8 | 0;
    day.innerHTML  = (d % 6.048e8)/8.64e7 | 0;
    hour.innerHTML = (d % 8.64e7 )/3.6e6  | 0;
    min.innerHTML  = (d % 3.6e6  )/6e4    | 0;
    sec.innerHTML  = (d % 6e4    )/1e3    | 0;

  }, 1000);
 }());

table {
  border-collapse: collapse;
  border-top: 1px solid #999999;
  border-left: 1px solid #999999;
}
th, td {
  border-right: 1px solid #999999;
  border-bottom: 1px solid #999999;
}
td {
  text-align: center;
}
#timer-date {
  font-weight: normal;
}

<table>
  <tr><th colspan="5">Time left to <span id="timer-date"></span>
  <tr><th>Weeks
      <th>Days
      <th>Hours
      <th>Minutes
      <th>Seconds
  <tr><td id="timer-weeks">&nbsp;
      <td id="timer-days">&nbsp;
      <td id="timer-hours">&nbsp;
      <td id="timer-minutes">&nbsp;
      <td id="timer-seconds">&nbsp;
</table>

不推荐使用 setInterval 作为每秒滴答的时钟，因为它不会以1秒的间隔运行，它会慢慢漂移，所以看起来偶尔会跳过一秒钟。考虑使用 setTimeout 并在下一整秒后调用该函数。

JS计时器在IE8中显示NaN

1 个答案: