浏览器上的JQuery浏览器兼容性问题

Question

我正在尝试制作多个计数器，它对我来说工作正常，但在某些浏览器上它显示 NAN 无效日期。我已经在我的 android 设备（chrome 和三星默认浏览器）上对其进行了测试，它可以正常工作，但我已经在 iPhone（chrome 和 safari）上对其进行了测试，但它无法正常工作。 我不确定我在代码中做错了什么，或者可能是我无法修复的兼容性问题。

这是我的小提琴 https://jsfiddle.net/infohassan/v4p5o7mq/1/

这是我的 JS

$(document).ready(function() {
    var dt = new Date();
    //Current Date
    $('#date-1').attr('data-date', moment(dt).format("MM.D.YYYY HH:mm"));
    // +2 Days
    var dt2 = new Date();
    var twoDays = dt2.setDate(dt2.getDate() + 2);
    $('#date-2').attr('data-date', moment(dt2).format("MM.D.YYYY HH:mm"));

    // +7 Days
    var dt3 = new Date();
    var twoDays = dt3.setDate(dt3.getDate() + 7);
    $('#date-3').attr('data-date', moment(dt3).format("MM.D.YYYY HH:mm"));

    $('.counter-sub').each(function(i, obj) {
        var counterDate = $('.counter-sub label').eq(i).attr("data-date");
        var countDownDate = new Date(counterDate).getTime();
        $('.counter-sub label').eq(i).html(moment(countDownDate).format("D.MM.YYYY HH:mm"));

        // Update the count down every 1 second
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            var getOnlyHours = Math.floor((distance / (1000 * 60 * 60)));
            var ShowTimer = days + " Day(s)";

            if (i == 2) {
                ShowTimer = ShowTimer;
            } else {
                ShowTimer = getOnlyHours + " Hours";
            }
            $('.counter-sub span').eq(i).html("Next to: " + ShowTimer);

            // If the count down is over, write some text 
            if (distance < 0) {
                //clearInterval(x);
                days = days * -1;
                hours = hours * -1;
                minutes = minutes * -1;
                seconds = seconds * -1;
                getOnlyHours = getOnlyHours * -1;

                ShowTimer = days + " Day(s)";
                if (i == 2) {
                    ShowTimer = ShowTimer;
                } else {
                    ShowTimer = getOnlyHours + " Hours";
                }
                $('.counter-sub span').eq(i).html("Over: " + ShowTimer);
            }
        }, 1000);
    });
});

Answer 1

这不是jQuery 兼容性问题，日期对象是纯javascript。 您尝试转换并重新转换日期的任何原因？

下面的例子应该可以在 Safari 中运行。

虽然我没有在下面的示例中包含它（它是大量代码转储），但您可以更轻松地循环遍历以 $(this) 为目标的元素，并且需要使用 .attr(dataname, datavalue) 设置数据属性并且需要获取方式如下：.data(dataname)

$(document).ready(function() {
    var dt = new Date();
    $('#date-1').attr('data-dateformat',dt);
    //Current Date
    $('#date-1').attr('data-date', moment(dt).format("MM.D.YYYY HH:mm"));
    // +2 Days
    var dt2 = new Date();
    var twoDays = dt2.setDate(dt2.getDate() + 2);
    $('#date-2').attr('data-date', moment(dt2).format("MM.D.YYYY HH:mm"));
    $('#date-2').attr('data-dateformat',dt2);

    // +7 Days
    var dt3 = new Date();
    var twoDays = dt3.setDate(dt3.getDate() + 7);
    $('#date-3').attr('data-date', moment(dt3).format("MM.D.YYYY HH:mm"));
    $('#date-3').attr('data-dateformat',dt3);

    $('.counter-sub').each(function(i, obj) {
        var counterDate = $('.counter-sub label').eq(i).data("dateformat");
        var countDownDate = new Date(counterDate).getTime();
        $('.counter-sub label').eq(i).html(moment(countDownDate).format("D.MM.YYYY HH:mm"));

        // Update the count down every 1 second
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            var getOnlyHours = Math.floor((distance / (1000 * 60 * 60)));
            var ShowTimer = days + " Day(s)";

            if (i == 2) {
                ShowTimer = ShowTimer;
            } else {
                ShowTimer = getOnlyHours + " Hours";
            }
            $('.counter-sub span').eq(i).html("Next to: " + ShowTimer);

            // If the count down is over, write some text 
            if (distance < 0) {
                //clearInterval(x);
                days = days * -1;
                hours = hours * -1;
                minutes = minutes * -1;
                seconds = seconds * -1;
                getOnlyHours = getOnlyHours * -1;

                ShowTimer = days + " Day(s)";
                if (i == 2) {
                    ShowTimer = ShowTimer;
                } else {
                    ShowTimer = getOnlyHours + " Hours";
                }
                $('.counter-sub span').eq(i).html("Over: " + ShowTimer);
            }
        }, 1000);
    });
});

.counter-div-main {
    background-color: white;
}

.counter-sub {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.counter-sub p {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 30px;
    padding: 5px 10px;
}

.counter-sub label,
.counter-sub span {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 30px;
    overflow: hidden;
    padding: 5px 10px;
}

.counter-sub span {
    background-color: #bfbfbf;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div class="row justify-content-md-center">
    <div class="col-xs-12 col-md-6 mt-4 counter-div-main">
        <!-- Counter Sub -->
        <div class="row">
            <div class="col-xs-12 counter-sub">
                <p><strong>Start:</strong></p>
                <label id="date-1"></label>
                <span></span>
            </div>
        </div>
        <!-- Counter Ends -->

        <!-- Counter Sub -->
        <div class="row">
            <div class="col-xs-12 counter-sub">
                <p><strong>Go to 1:</strong></p>
                <label id="date-2"></label>
                <span></span>
            </div>
        </div>
        <!-- Counter Ends -->

        <!-- Counter Sub -->
        <div class="row">
            <div class="col-xs-12 counter-sub">
                <p><strong>Go to 2:</strong></p>
                <label id="date-3"></label>
                <span></span>
            </div>
        </div>
        <!-- Counter Ends -->
    </div>
</div>

什么是twoDays 变量？