我用 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>
谢谢!这快把我逼疯了!