Carbon PHP倒计时器（步数计数器）仅iPhone返回NaN问题求助

问题原因 #

iPhone上的Safari浏览器对YYYY-MM-DD HH:mm:ss这种带空格的日期字符串解析支持不完善，调用new Date()时会返回Invalid Date，进而getTime()得到NaN。而Chrome、Android浏览器对这种格式的兼容性更好，所以只有iPhone出现问题。

解决方案（推荐最优解） #

直接让Carbon生成毫秒级Unix时间戳，前端无需解析日期字符串，彻底规避格式兼容性问题：

修改后的代码 #

<script>
    // 用Carbon直接输出毫秒级时间戳，前端直接使用数字
    var c = {{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $productOfDay->expired_at)->getTimestampMs() }};
    console.log(c); // 所有设备都会输出正确的数字，不再是NaN

    var mf = setInterval(function() {
        var n = new Date().getTime();
        var t = c - n;
        var da = Math.floor(t / (1000 * 60 * 60 * 24));
        var ho = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

        var mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
        var sec = Math.floor((t % (1000 * 60)) / 1000);
        document.getElementById("days").innerHTML = da;
        document.getElementById("hours").innerHTML = ho;
        if (ho < 10) {
            document.getElementById("hours").innerHTML = "0" + ho;
        }
        document.getElementById("mins").innerHTML = mins;
        if (mins < 10) {
            document.getElementById("mins").innerHTML = "0" + mins;
        }
        document.getElementById("secs").innerHTML = sec;
        if (sec < 10) {
            document.getElementById("secs").innerHTML = "0" + sec;
        }
        if (t < 0) {
            clearInterval(mf);
            document.getElementById("days").innerHTML = "";
            document.getElementById("hours").innerHTML = "";
            document.getElementById("mins").innerHTML = "";
            document.getElementById("secs").innerHTML = "";
            document.getElementById("end").innerHTML = "TIMES UP Please try new dates!!";
        }   
    }, 1000);
</script>

其他可选方案 #

如果需要传递日期字符串，可让Carbon生成Safari兼容的ISO8601格式：

var c = new Date('{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $productOfDay->expired_at)->toIso8601String() }}').getTime();

这种格式为YYYY-MM-DDTHH:mm:ssZ，所有主流浏览器都能正确解析。

内容的提问来源于stack exchange，提问作者Rahil Ali