JavaScript 日期方法在 FireFox 中不起作用

Question

我为网站构建了一个倒数计时器，它在其他浏览器上运行良好，但出于某种原因，我构建它的方式似乎在 firefox 上不起作用，我不确定为什么。页面上的数字显示为 NaN，而在其他浏览器上，数字实际上是倒计时。我的代码如下，任何帮助将不胜感激。谢谢。

<template>
  <div class="countdown">
    <!-- <img class="cover-image" src="@/assets/img/event_cover_image@2x.png" /> -->
    <div class="countdown-container">
      <h2>{{ `${$t('countdown.labels.countdownToEvent')}:` }}</h2>
      <div class="counter">
        <div>
          <div id="day">0</div>
          {{ $t('countdown.labels.days') }}
        </div>
        <div>
          <div id="hour">0</div>
          {{ $t('countdown.labels.hours') }}
        </div>
        <div>
          <div id="minute">0</div>
          {{ $t('countdown.labels.minutes') }}
        </div>
        <div>
          <div id="second">0</div>
          {{ $t('countdown.labels.seconds') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  data() {
    return {
      countDate: new Date('Oct 20, 2020 00:00:00:00').getTime(),
      counter: null,
    };
  },
  mounted() {
    this.counter = setInterval(() => {
      const now = new Date().getTime();
      const gap = this.countDate - now;

      const second = 1000;
      const minute = second * 60;
      const hour = minute * 60;
      const day = hour * 24;

      let d = Math.floor(gap / day);
      let h = Math.floor((gap % day) / hour);
      let m = Math.floor((gap % hour) / minute);
      let s = Math.floor((gap % minute) / second);

      if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
        clearInterval(this.counter);
        d = 0;
        h = 0;
        m = 0;
        s = 0;
      }
      document.querySelector('#day').innerText = d;
      document.querySelector('#hour').innerText = h;
      document.querySelector('#minute').innerText = m;
      document.querySelector('#second').innerText = s;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.counter);
  },
};
</script>

Answer 1

见MDN:

dateString
A string value representing a date, specified in a format recognized by the Date.parse() method.

然后parse:

It is not recommended to use Date.parse as until ES5, parsing of strings was entirely implementation dependent. There are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different formats are to be accommodated).

这就是你的问题。不同的实现支持不同的日期格式，Firefox 不支持您使用的那个。

改用库。

例如moment:

const date = moment('Oct 20, 2020 00:00:00:00', 'MMM DD, YYYY HH:mm:ss:SS')

JavaScript 日期方法在 FireFox 中不起作用

JavaScript date method not working in FireFox

javascript

date

vue.js

timer

countdown