Question

我的脚本在Chrome中没问题，但在FireFox和IE中，结果是：NaN：NaN。这是我的剧本：任何人都知道什么是错的？

$ db [time]的输出是：2013-10-07 14:28:35（时间戳数据库）

<script>
var end = new Date('<?=$db[time]?>');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'ITS NOW TIME!</font><BR><BR>';                
            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);


        document.getElementById('countdown').innerHTML = '<font color="orange">' + minutes + ':';
        document.getElementById('countdown').innerHTML += '<font color="orange">' + seconds + ' minutes</font>';
    }

    timer = setInterval(showRemaining, 1000);
</script>

Answer 1

这是因为$db[time]。

的价值

你在评论中说日期/时间的格式是2013-10-07 14:28:35，这是MySQL的默认DATETIME输出，需要2013-10-07T14:28:35。

Chrome支持2013-10-07 14:28:35格式，但它不在Javascript规范中，因此并非所有其他浏览器都支持。

试试这个：

<? echo str_replace(' ', 'T', $db['time']); ?>

Answer 2

javascript时间格式与php不同，因此firefox将显示NaN：NaN：NaN。你应该把时间改成如下：

PHP日期格式

$yourDate = date("M d, Y H:i:s", strtotime($db['time'])));

得到这样的时间

date = new date("<?=$yourDate?>").getTime();

Answer 3

您可以自己解析日期字符串，而不是依赖现代浏览器和现代方法，类似下面的内容应该是跨浏览器友好的。倒计时以毫秒为单位，您可以根据需要对其进行格式化。

HTML

<div id="countdown"></div>

的Javascript

function isGregorianLeapYear(year) {
    return year % 400 === 0 || year % 100 !== 0 && year % 4 === 0;
}

function daysInGregorianMonth(year, month) {
    var days;

    if (month == 2) {
        days = 28;
        if (isGregorianLeapYear(year)) {
            days += 1;
        }
    } else {
        days = 31 - ((month - 1) % 7 % 2);
    }

    return days;
}

function timeStampToDate(timeStamp) {
    var dateObject,
        dateTime,
        date,
        time,
        value;

    if (typeof timeStamp === "string") {
        dateTime = timeStamp.split(" ");
        if (dateTime.length === 2) {
            date = dateTime[0].split("-");
            if (date.length === 3) {
                value = +date[0];
                if (date[0].length === 4 && value >= -9999 && value <= 9999) {
                    value = +date[1];
                    if (date[1].length === 2 && value >= 1 && value <= 12) {
                        date[1] = value - 1;
                        value = +date[2];
                        if (date[2].length === 2 && value >= 1 && value <= daysInGregorianMonth(+date[0], date[1])) {
                            time = dateTime[1].split(":");
                            if (time.length === 3) {
                                value = +time[0];
                                if (time[0].length === 2 && value >= 0 && value <= 23) {
                                    value = +time[1];
                                    if (time[1].length === 2 && value >= 0 && value <= 59) {
                                        value = +time[2];
                                        if (time[2].length === 2 && value >= 0 && value <= 59) {
                                            dateObject = new Date(Date.UTC.apply(Date, date.concat(time)));
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    if (typeof dateObject === "undefined") {
        dateObject = new Date(NaN);
    }

    return dateObject;
}

function emptyNode(node) {
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
}

var countdown = document.getElementById("countdown"),
    end = timeStampToDate("2013-10-07 16:57:00"),
    intervalId;

end = end.getTime() + end.getTimezoneOffset() * 60000;

function showRemaining() {
    var now = new Date().getTime();

    if (isNaN(end) || isNaN(now)) {
        clearInterval(intervalId);
        emptyNode(countdown);
        countdown.appendChild(document.createTextNode("Error"));
    } else if (now < end) {
        emptyNode(countdown);
        countdown.appendChild(document.createTextNode(end - now));
    } else {
        clearInterval(intervalId);
        emptyNode(countdown);
        countdown.appendChild(document.createTextNode("ITS NOW TIME!"));
    }
}

intervalId = setInterval(showRemaining, 1000);

jsFiddle

NaN：在Firefox和IE中的NaN，CHROME工作正常

3 个答案: