jquery Safari中的倒数计时器不工作

wbrvyc0a 于 2023-06-22 发布在 jQuery

关注(0)|答案(5)|浏览(146)

我有一个倒计时计时器，它在chrome中运行良好，但是当我在safari中查看时，它显示所有数字的NAN，并且如果我在过去设置日期，它不会在else语句中触发我的模型。我在网上到处寻找解决办法，但没有找到。

$(document).ready(function() {

        $('#popupTimer').delay(1000).fadeIn(600);

        // Set the date we're counting down to  (*** Set to Apr 9th after testing ***)
        var countDownDate = new Date("Apr 3, 2017 24:00:00").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            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);

            // Display the result in the element with id="display"
            document.getElementById("display").innerHTML = days + " Days " + hours + " Hours " + minutes + " Minutes " + seconds + " Seconds ";

            // If the count down is finished,
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("display").innerHTML = "EXPIRED";
                $('#myModal').modal('show');
                $(".myDIV").hide();
                $('#chooseProductThree').show();
                $(".panel-heading").addClass("active-panel");
            }
        }, 1000);
    });

jquery

来源：https://stackoverflow.com/questions/43219669/countdown-timer-not-working-in-safari

5条答案

按热度按时间

ru9i0ody1#

先写下面函数

function parseDateString (dateString) {
            var matchers = [];
            matchers.push(/^[0-9]*$/.source);
            matchers.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
            matchers.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
            matchers = new RegExp(matchers.join("|"));
            if (dateString instanceof Date) {
                return dateString;
            }
            if (String(dateString).match(matchers)) {
                if (String(dateString).match(/^[0-9]*$/)) {
                    dateString = Number(dateString);
                }
                if (String(dateString).match(/\-/)) {
                    dateString = String(dateString).replace(/\-/g, "/");
                }
                return new Date(dateString);
            } else {
                throw new Error("Couldn't cast `" + dateString + "` to a date object.");
            }
        }

↓ ↓ ↓ ↓ ↓然后像下面这样调用这个函数↓ ↓ ↓ ↓ ↓

var EndTime = "2019-05-10 00:00:00";
countDownDate=Date.parse(_self.parseDateString(EndTime));

赞(0）回复(0）举报 2023-06-22

ljo96ir52#

我遇到了同样的问题，这是我解决它的方法：

<script type="text/javascript">
    const second = 1000;
    const minute = second * 60;
    const hour = minute * 60;
    const day = hour * 24;

    // Have to split time funny for IOS and Safari NAN and timezone bug
    var timeParsed = '{{ $startTime }}'.replace(' ', 'T').split(/[^0-9]/);
    var countDown = new Date(new Date (timeParsed[0],timeParsed[1]-1,timeParsed[2],timeParsed[3],timeParsed[4],timeParsed[5])).getTime();

    let x = setInterval(function() {
        let now = new Date().getTime();
        let distance = countDown - now;
        if(Math.floor(distance / (day)) > 0) {
            document.getElementById("days_line").style.display = "inline-block";
        } else {
            document.getElementById("days_line").style.display = "none";
        }
        document.getElementById('days').innerText = Math.floor(distance / (day));
        document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
        document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
        document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
        if (distance < 0) {
            clearInterval(x);
            $('.counter-container').fadeOut(function() {
                $('.counter-message').fadeIn();
            });
        } else {
            $('.counter-container').fadeIn();
        }
    }, second)
</script>

注意{{ startTime }}不是JavaScript，而是从blade导入的PHP。把你的日期写在这里。

赞(0）回复(0）举报 2023-06-22

dgenwo3n3#

刚刚遇到此问题，并使用以下日期格式进行了修复（注意：' / '而不是' - '分隔日，月和年...
"2019/05/10T00:00:00Z";

赞(0）回复(0）举报 2023-06-22

mwkjh3gx4#

我假设safari无法解析这一行中的日期：

var countDownDate = new Date("Apr 3, 2017 24:00:00").getTime();

更改为：

var countDownDate = Date.parse("Apr 3, 2017 24:00:00");

赞(0）回复(0）举报 2023-06-22

piok6c0g5#

问题出在日期格式上原来Safari不支持该日期/时间格式切换到下面支持的格式之一将解决此问题

年、月、日
yyyy，mm，dd，hh，mm，ss
月/日/年
月/日/年时：分：秒
毫秒
日星期一dd yyyy hh：mm：ss

有关详细信息，请查看https://chrispennington.blog/blog/safari-does-not-show-new-date-from-javascript/

赞(0）回复(0）举报 2023-06-22

我来回答

jquery Safari中的倒数计时器不工作

5条答案

相关问题

热门标签

最新问答