1

我用 Javascript 编写了一个应用程序，它可以倒计时到不同的日子（圣诞节、稻田节等）。我有两个问题：

问题1：

它在 Chrome 上运行良好，但时间在 Safari (iPhone) 上显示为“NaN”。

我已经看到操作系统上的其他解决方案建议将日期格式更改为包含“/”而不是“-”来格式化日期，但这对我不起作用（或者我误解了某些东西）。

问题 2

paddysDay() 函数的倒计时不会实时自动倒计时。如果我单击按钮，它会更新。其他两个函数每 1000 毫秒自动更新一次。我对所有三个函数都使用了完全相同的 setTimeout，所以我无法理解为什么它在 paddysDay() 中不起作用。

这是代码。请注意，在 xmas() 函数中，我使用“/”而不是“-”来格式化日期。此格式不适用于 Chrome 或 Safari。

<body>

<fieldset>
<legend><h2>How Many Sleeps Until...?</h2></legend>

<center>
<button onclick = "xmas()">Christmas</button>
<p id="xmas" style="text-align:left;"></p>
<br/>

<button onclick = "myBday()">My Birthday</button>
<p id="myBday" style="text-align:left;"></p>
<br/>

<button onclick = "paddysDay()">Paddy's Day</button>
<p id="paddysDay1" style="text-align:left;"></p>
<p id="paddysDay2" style="text-align:left;"></p>

<br/>

<button onclick = "yourBday()">Your Birthday</button>
<p id="yourBday" style="text-align:left;"></p>
<br/>

</center>

<script>

function xmas() {
  var rightNow = new Date();
  var currentMonth = (rightNow.getMonth()+1);
  var currentDay = rightNow.getDate();

  var nextXmasYear = rightNow.getFullYear();
    if (currentMonth == 12 && currentDay > 25) {
      nextXmasYear++;
    };

  var nextXmasDate = nextXmasYear + '/12/24T23:59:99.999z';
  var xmasDay = new Date(nextXmasDate);

  var diffSeconds = Math.floor((xmasDay.getTime()-rightNow.getTime())/1000);
  var days = 0;
  var hours = 0;
  var minutes = 0;
  var seconds = 0;

  if (currentMonth != 12 || (currentMonth == 12 && currentDay != 25)) {
    days = Math.floor(diffSeconds / 86400);
    diffSeconds -= days * 86400;
    hours = Math.floor(diffSeconds / 3600);
    diffSeconds -= hours * 3600;
    minutes = Math.floor(diffSeconds / 60);
    diffSeconds -= minutes * 60;
    seconds = diffSeconds;
  }

  document.getElementById("xmas").innerHTML = "You've got " + days + " days, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds until Christmas.";


setTimeout(xmas, 1000);

}


function myBday() {
  var rightNow = new Date();
  var currentMonth = (rightNow.getMonth()+1);
  var currentDay = rightNow.getDate();

  var nextBdayYear = rightNow.getFullYear();

    if (currentMonth > 7 || currentMonth == 7 && currentDay >= 14) {
      nextBdayYear++;
    };

  var nextBdayDate = nextBdayYear + '-07-14T00:00:00.000z';
  var bdayDay = new Date(nextBdayDate);

  var diffSeconds = Math.floor((bdayDay.getTime()-rightNow.getTime())/1000);
  var days = 0;
  var hours = 0;
  var minutes = 0;
  var seconds = 0;

  if (currentMonth != 7 || (currentMonth == 7 && currentDay != 14)) {
    days = Math.floor(diffSeconds / 86400);
    diffSeconds -= days * 86400;
    hours = Math.floor(diffSeconds / 3600);
    diffSeconds -= hours * 3600;
    minutes = Math.floor(diffSeconds / 60);
    diffSeconds -= minutes * 60;
    seconds = diffSeconds;
  }

  document.getElementById("myBday").innerHTML = "You've got " + days + " days, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds to find me a gift.";


setTimeout(myBday, 1000);

}


function paddysDay() {
  var rightNow = new Date();
  var currentMonth = (rightNow.getMonth()+1);
  var currentDay = rightNow.getDate();

  var nextPaddysYear = rightNow.getFullYear();

    if (currentMonth > 3 || currentMonth == 3 && currentDay >= 17) {
      nextPaddysYear++;
    };

  var nextPaddysDate = nextPaddysYear + '-03-17T00:00:00.000z';
  var paddysDay = new Date(nextPaddysDate);

  var diffSeconds = Math.floor((paddysDay.getTime()-rightNow.getTime())/1000);
  var days = 0;
  var hours = 0;
  var minutes = 0;
  var seconds = 0;

  if (currentMonth != 3 || (currentMonth == 3 && currentDay != 17)) {
    days = Math.floor(diffSeconds / 86400);
    diffSeconds -= days * 86400;
    hours = Math.floor(diffSeconds / 3600);
    diffSeconds -= hours * 3600;
    minutes = Math.floor(diffSeconds / 60);
    diffSeconds -= minutes * 60;
    seconds = diffSeconds;
  }

  document.getElementById("paddysDay1").innerHTML = "You've got " + days + " days, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds until ...";

setTimeout(paddysDay, 1000);

}

function yourBday(){
  document.getElementById("yourBday").innerHTML = "I don't even know who you are, let alone your birthday. Dear Lord, who do think I am? Mark Zuckerberg?";
return;
}

</script>


</fieldset>

<br/>
<div style="height:500px;">
<iframe src="intro"></iframe>
</div>

</body>

谢谢！这快把我逼疯了！

4

1 回答 1

2

您遇到了这样一个事实，即日期字符串解析在浏览器中仍未完全标准化。这种格式（所有三种变体）是跨浏览器安全的：

  • 2011-10-10
  • 2011-10-10T14:48:00
  • 2011-10-10T14:48:00.000+09:00

一些浏览器很乐意解析一些其他格式（例如2020/12/24T23:59:99.999z您在代码中使用的格式），但如果您想完全跨平台，则可以使用上述格式。我假设 iPhone Safari 是不喜欢您使用的格式的其中之一。即使是这样，其他浏览器也会阻塞您的格式。

编辑：另外 - 有几个第三方库可以比较日期，而且非常容易，因此个别开发人员每次想要做应该相当简单的与日期相关的逻辑时都不必重新发明轮子。Moment.js 非常受欢迎，还有其他的。

希望这可以帮助！

于 2020-02-22T21:38:47.307 回答