javascript - 移动设备上的 NaN

Question

我有一个脚本，可以从计时器启动(从数据库中提取日期时间)到当前系统时间对实时计时器进行计数。

该脚本在桌面上完美运行 - 没有问题。但是，当我在 iOS 设备上浏览网站时，我得到的是 NaN 而不是时间。

这是怎么回事？

JS:

<script type="text/javascript">
        function CountUp(initDate, id){
            this.beginDate = new Date(initDate);
            this.countainer = document.getElementById(id);
            this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
            this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
            this.hours = 0, this.minutes = 0, this.seconds = 0;
            this.updateNumOfDays();
            this.updateCounter();
        }

        CountUp.prototype.updateNumOfDays=function(){
            var dateNow = new Date();
            var currYear = dateNow.getFullYear();
            if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
                this.numOfDays[1] = 29;
            }
            var self = this;
            setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
        }

        CountUp.prototype.datePartDiff=function(then, now, MAX){
            var diff = now - then - this.borrowed;
            this.borrowed = 0;
            if ( diff > -1 ) return diff;
            this.borrowed = 1;
            return (MAX + diff);
        }

        CountUp.prototype.calculate=function(){
            var currDate = new Date();
            var prevDate = this.beginDate;
            this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
            this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
            this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
            this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
            this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
            this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0);
        }

        CountUp.prototype.addLeadingZero=function(value){
            return value < 10 ? ("0" + value) : value;
        }

        CountUp.prototype.formatTime=function(){
            this.seconds = this.addLeadingZero(this.seconds);
            this.minutes = this.addLeadingZero(this.minutes);
            this.hours = this.addLeadingZero(this.hours);
        }

        CountUp.prototype.updateCounter=function(){
            this.calculate();
            this.formatTime();
            this.countainer.innerHTML ="" + this.hours + "" + (this.hours == 1? ":" : ":") + "" +
                "" + this.minutes + "" + (this.minutes == 1? ":" : ":") + "" +
                "" + this.seconds + "" + (this.seconds == 1? "" : "") + "";
            var self = this;
            setTimeout(function(){self.updateCounter();}, 1000);
        }

        window.onload=function(){ new CountUp('<?php echo $startTime // Start time from Database ?>', 'startTime');}

        </script>

CountUp.js:

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

HTML

<div id="startTime"></div>

数据库中的日期时间:

2016-10-13 22:10:00

Answer 1

我也有这个问题。这不是因为移动设备。

它在 chrome 中工作正常，但在 safari 中不行。 mdn 谈论 ECMAScript 5 ISO-8601 格式支持说:

Alternatively, the date/time string may be in ISO 8601 format. For example, "2011-10-10" (just date) or "2011-10-10T14:48:00" (date and time) can be passed and parsed.

如果你包含 T 它可以解决问题:

新日期('2016-10-13T22:10:00')

您可以使用new Date('2016-10-13T22:10:00'.replace(/\s/, 'T'))。