Javascript倒计时在Safari(iPhone)上返回NaN,一个setTimeout不工作,而其他人则工作



我用Javascript编写了一个应用程序,可以倒计时到不同的日子(圣诞节、帕迪节等(。我有两个问题:

问题1:

它在Chrome上运行良好,但在Safari(iPhone(上时间显示为"NaN"。

我在操作系统上看到过其他解决方案建议将日期格式改为包含"/"而不是"-"来设置日期格式,但这对我不起作用(或者我误解了什么(。

问题2

paddysDay((函数的倒计时不会自动实时倒计时。如果我点击按钮,它会更新。其他两个功能每1000ms自动更新一次。我对这三个函数都使用了完全相同的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>

谢谢!这简直把我逼疯了!

您遇到了这样一个事实,即日期字符串解析在浏览器之间仍然没有完全标准化。这种格式(所有三种变体(是跨浏览器安全的:

  • 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非常受欢迎,还有其他的。

希望这能有所帮助!

相关内容

  • 没有找到相关文章

最新更新