Ajax通话未显示正确的计时器时间iPad

当检测到另一个打开了相同定时器板的浏览器的更新时,我想重新装入定时器板。当检测到更新时,在我工作的笔记本电脑,手机或iMac上,它完全可以正常工作。但是当我在iPad上试用时,无法正确重新加载。

图片1 This is how it looks like on the ipad after a reload

图片2 This is how it looks like on the laptop,pc,phone etc with the reloads

我试图删除'`'和'$ {}',因为也许是问题所在,但不是那样。我尝试使用一些参数更改ajax请求,但这也不是解决方案

这是获取所有表的ajax请求(每个表都有一个单独的计时器)

<div class='col-lg-2 col-md-3 col-sm-4 col-4 mt-2 table-container' id='1' data-autostart='false' data-start-time='0'>
    <button class='btn btn-secondary btn-block text-center table'>
        tafel <b>1</b>
        <br>
        <span class='time'>
            <span class='hours'>00</span>:
            <span class='minutes'>00</span>:
            <span class='seconds'>00</span>
        </span>
     </button>
</div>

这是表div在不活动时的外观

<div class='col-lg-2 col-md-3 col-sm-4 col-4 mt-2 table-container' id='1' data-autostart='true' data-start-time='2019-11-06 09:05:16'>
    <button class='btn btn-success btn-block text-center table'>
        tafel <b>1</b>
        <br>
        <span class='time'>
            <span class='hours'>12</span>:
            <span class='minutes'>02</span>:
            <span class='seconds'>58</span>
        </span>
     </button>
</div>

这是表div处于活动状态时的样子

$(".table").on('click',function () {
    var $button = $(this);
    if ($button.hasClass('btn-secondary')) {
        $button.removeclass('btn-secondary').addClass('btn-success');
    } else if ($button.hasClass('btn-warning')) {
        $button.removeclass('btn-warning').addClass('btn-secondary');
    } else if ($button.hasClass('btn-danger')) {
        $button.removeclass('btn-danger').addClass('btn-secondary');
    } else {
        $button.removeclass('btn-success').addClass('btn-secondary');
    }
});

function prependZero(time,length) {
    time = '' + (time | 0);
    while (time.length < length) time = '0' + time;
    return time;
}

$(function () {
    $('.table-container').each(function () {
        var element = $(this);
        var table_id = this.id;
        var cooking = element.data('autostart');
        var startTime = element.data('start-time');
        var hoursElement = element.find('.hours');
        var minutesElement = element.find('.minutes');
        var secondsElement = element.find('.seconds');
        var toggleElement = element.find('.table');

        var hours = 0,minutes = 0,seconds = 0,timer;

        function setStopwatch(hours,minutes,seconds) {
            hoursElement.text(prependZero(hours,2));
            minutesElement.text(prependZero(minutes,2));
            secondsElement.text(prependZero(seconds,2));
        }

        function runTimer(givenTime = Date.now()) {
            var startTime = givenTime;
            var prevHours = hours;
            var prevMinutes = minutes;
            var prevSeconds = seconds;

            timer = setInterval(function () {
                var timeElapsed = Date.now() - startTime;

                hours = (timeElapsed / 3600000) + prevHours;
                minutes = ((timeElapsed / 60000) + prevMinutes) % 60;
                seconds = ((timeElapsed / 1000) + prevSeconds) % 60;

                if (hours >= 1) {
                    toggleElement.removeclass('btn-success').removeclass('btn-warning').addClass('btn-danger');
                } else if (minutes >= 15 && minutes < 20) {
                    toggleElement.removeclass('btn-success').addClass('btn-warning');
                } else if (minutes >= 20) {
                    toggleElement.removeclass('btn-success').removeclass('btn-warning').addClass('btn-danger');
                }

                setStopwatch(hours,seconds);
            },1000);
        }

        function run(givenTime = 0) {
            cooking = true;
            if (givenTime !== 0) {
                runTimer(givenTime);
            } else {
                runTimer();
                startDatabase(table_id,Date.now());
            }
        }

        function pause() {
            cooking = false;
            clearTimeout(timer);
        }

        function reset() {
            cooking = false;
            pause();
            hours = minutes = seconds = 0;
            setStopwatch(hours,seconds);
            stopDatabase(table_id,Date.now());
        }

        toggleElement.on('click',function () {
            (cooking) ? reset() : run();
        });

        if (cooking) {
            let timeElapsed = new Date(startTime).getTime();
            run(timeElapsed);
        }
    });

    function stopDatabase(table_id,stop_time) {
        haveclicked = true;
        $.ajax(
            {
                url: './mod/send-table.php',data: {
                    stop: true,table_id,stop_time: formatTime(stop_time)
                },type: 'POST',cache: false,async: true,timeout: 8000,headers: {
                    "cache-control": "no-cache"
                }
            }
        );
    }

    function startDatabase(table_id,start_time) {
        haveclicked = true;
        $.ajax(
            {
                url: './mod/send-table.php',data: {
                    start: true,start_time: formatTime(start_time)
                },headers: {
                    "cache-control": "no-cache"
                }
            }
        );
    }

    function formatTime(timestamp) {
        var date = new Date(timestamp);
        // return `${date.getFullYear()}-${prependZero((date.getMonth() + 1),2)}-${prependZero(date.getDate(),2)} ${prependZero(date.getHours(),2)}:${prependZero(date.getMinutes(),2)}:${prependZero(date.getSeconds(),2)}`;
        return date.getFullYear() + '-' + prependZero((date.getMonth() + 1),2) + '-' + prependZero(date.getDate(),2) + ' ' + prependZero(date.getHours(),2) + ':' + prependZero(date.getMinutes(),2) + ':' + prependZero(date.getSeconds(),2);
    }
});

以及运行计时器的代码

D:\work\

要做的是,当重新装入桌子(计时器板)时,时间应该在iPad上自动开始,并且不像现在一样显示00:00:00

zhenhuang1980 回答:Ajax通话未显示正确的计时器时间iPad

我昨天晚上自己找到了解决方案 这是以前的样子

if (cooking) {
    let timeElapsed = new Date("2019-11-07 10:02:15").getTime();
    run(timeElapsed);
}

但是我发现iPad(或者通常是IOS)不知道如何使用新的Date([DATETIME])处理该日期时间格式。所以我不得不用'/'来改变'-'。

所以现在看起来像这样:

if (cooking) {
    let timeElapsed = new Date("2019-11-07 10:02:15".replace(/-/g,'/')).getTime();
    run(timeElapsed);
}

这是解决方案

本文链接:https://www.f2er.com/3154004.html

大家都在问