[我已经用Javascript编写了一个应用程序,该应用程序可以倒计时到不同的日子(圣诞节,爸爸节等)。我有两个问题:
问题1:
在Chrome上运行正常,但时间在Safari(iPhone)上显示为“ NaN”。
我已经在OS上看到其他解决方案,建议将日期格式更改为包括“ /”而不是“-”来格式化日期,但这对我不起作用(否则我会误解了)。
问题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
Some浏览器乐于解析some其他格式(例如,您在代码中使用的2020/12/24T23:59:99.999z
格式),但是如果您想完全交叉使用,则可以使用上述格式。 -平台。我假设iPhone Safari是不喜欢您使用的格式的一种。即使这样做,其他浏览器也会阻塞您的格式。
编辑:而且-有几个第三方库使比较日期变得如此容易得多,因此各个开发人员不必每次都想做一些与日期相关的简单逻辑时就重新发明轮子。 Moment.js非常受欢迎,还有其他。
希望这会有所帮助!