为什么IE显示NaN,而所有其他浏览器都显示正确



我正在使用一个倒计时计时器脚本。我已经能够在Google Chrome、Microsoft Edge和Mozilla Firefox上成功获得我想要的结果,但当我转到Microsoft Internet Explorer 11时,分钟和秒的倒计时显示为NaN。

这是我使用的脚本

<script>
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $query->Cutoff; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();
var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
var days        = Math.floor(seconds/24/60/60);
var hoursLeft   = Math.floor((seconds) - (days*86400));
var hours       = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes     = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds; 
}
if (minutes < 10) {
minutes = "0" + minutes; 
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds + " REMAINING";
if (minutes > 15) {
document.getElementById('countdown').innerHTML = "";
}
if (hours > 0) {
document.getElementById('countdown').innerHTML = "";
}
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "CLOSED";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>

基本上,脚本会比较当前日期和截止日期,并产生两者之间的时间差。根据结果显示倒计时。到目前为止,除了IE,所有浏览器都能像我所希望的那样工作,有人能帮我找出原因吗?

编辑

当我回显$query->Cutoff;日期/时间结果为yyyy-mm-dd hh:mm:ss

在浏览器中查看代码时,它显示为

<script>
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '2018-07-18 23:15:00';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();
var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
var days        = Math.floor(seconds/24/60/60);
var hoursLeft   = Math.floor((seconds) - (days*86400));
var hours       = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes     = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds; 
}
if (minutes < 10) {
minutes = "0" + minutes; 
}
document.getElementById('countdown').innerHTML = "minutes + ":" + remainingSeconds + " REMAINING";
if (minutes > 15) {
document.getElementById('countdown').innerHTML = "";
}
if (hours > 0) {
document.getElementById('countdown').innerHTML = "";
}
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "CLOSED";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>

更新

在社区的建议下,我能够解决这个问题,并使其在所有浏览器中运行,包括可怕的IE lol。这是我编辑的代码,我试图评论修改的地方,以便更好地为其他人描述解决方案。

这是的最终脚本

<script>
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
// UPDATED HERE
// I have updated the echo to control the output of the date/time. by doing this i can better control the output and equally successfully appease the IE Gods.
var _DateFromDBProgEndDate = '<?php echo  date('Y/m/d H:i:s', strtotime($query->Cutoff)); ?>'; 
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();
var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
var days        = Math.floor(seconds/24/60/60);
var hoursLeft   = Math.floor((seconds) - (days*86400));
var hours       = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes     = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds; 
}
if (minutes < 10) {
minutes = "0" + minutes; 
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds + " REMAINING";
if (minutes > 15) {
document.getElementById('countdown').innerHTML = "";
}
if (hours > 0) {
document.getElementById('countdown').innerHTML = "";
}
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "CLOSED";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>

非常感谢所有帮助我并为我指明正确方向的人。

在社区的建议下,我能够解决这个问题,并使其在所有浏览器中运行,包括可怕的IE lol。这是我编辑的代码,我试图评论更改的地方,以便更好地为其他人描述解决方案。

这是的最终脚本

<script>
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
// UPDATED HERE
// I have updated the echo to control the output of the date/time. by doing this i can better control the output and equally successfully appease the IE Gods.
var _DateFromDBProgEndDate = '<?php echo  date('Y/m/d H:i:s', strtotime($query->Cutoff)); ?>'; 
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();
var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
var days        = Math.floor(seconds/24/60/60);
var hoursLeft   = Math.floor((seconds) - (days*86400));
var hours       = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes     = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds; 
}
if (minutes < 10) {
minutes = "0" + minutes; 
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds + " REMAINING";
if (minutes > 15) {
document.getElementById('countdown').innerHTML = "";
}
if (hours > 0) {
document.getElementById('countdown').innerHTML = "";
}
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "CLOSED";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>

另外,由于前面的代码将利用客户端时间,我也更新了脚本,通过添加一些php变量来包括服务器时间,如下所示。

// added in the date values via php in order to get the server time as opposed to the client times for a more accurate countdown.
<?php
date_default_timezone_set('America/Toronto');
$currentdate =  date("o/n/N");
$currentday = date("N");
$currentmonth = date("n");
$currentyear = date("o");
$currenttime= date("Y/m/d H:i:s");
?>
<script>
var today = <?php echo $currentdate; ?>;
var DD = <?php echo $currentday; ?>;
var MM = <?php echo $currentmonth; ?>; //January is 0!
var YYYY = <?php echo $currentyear; ?>;
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo date('Y/m/d H:i:s', strtotime($inpersonresult->BidCutoff)); ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var _TodayTime = '<?php echo date('Y/m/d H:i:s', strtotime($currenttime)); ?>';
var TimeOfToday = new Date(_TodayTime);
var differenceTravel = ProgEndTime.getTime()- TimeOfToday.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
var days        = Math.floor(seconds/24/60/60);
var hoursLeft   = Math.floor((seconds) - (days*86400));
var hours       = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes     = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds; 
}
if (minutes < 10) {
minutes = "0" + minutes; 
}
document.getElementById('countdown').innerHTML = "WARNING:SUBMISSIONS MUST BE RECEIVED BEFORE <?php echo date('l,F j,Y h:i a', strtotime($query->Cutoff)); ?><br>"+ minutes + ":" + remainingSeconds + " REMAINING";
if (minutes >= 15) {
document.getElementById('countdown').innerHTML = "";
}
if (hours > 0) {
document.getElementById('countdown').innerHTML = "";
}
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "CLOSED";
window.location='https://example.com/closed/';
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>

我尝试使用所有ISO-8601接受的格式,但在这样做的时候,我确实发现了一些不利的结果,因此我将CurrentTime和数据库产生的日期设置为Y/m/d。我发现IE最大的问题是,他们不喜欢在日期格式中看到连字符,这似乎会对结果产生负面影响。当我删除连字符并再次添加斜杠时,这个脚本适用于所有4种浏览器以及android和iphone设备。

我还添加了一个重定向,当计时器用完时,它会将它们从页面上直接带到另一个窗口,在那里你可以保存你选择的错误消息。

最新更新