Question

我使用了一堆javascript代码在我的主页上显示倒计时.. 哪个在chrome，FF中工作得非常好但是在Safari中它无法正常工作...... 实际场景是......我想在窗口处于活动状态时停止计时器并从窗口变为活动时的特定时间恢复（）

我的代码是......

function getTimeRemaining(endtime) {
            var t = Date.parse(endtime) - Date.parse(new Date());
            var seconds = Math.floor((t / 1000) % 60);
            var minutes = Math.floor((t / 1000 / 60) % 60);
            var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
            return {
                'total': t,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
            };
        }

        function initializeClock(id, endtime) {
            var clock = document.getElementById(id);
            var hoursSpan = clock.querySelector('.hours');
            var minutesSpan = clock.querySelector('.minutes');
            var secondsSpan = clock.querySelector('.seconds');
            var isPaused = true;

            vis(function(){
                isPaused = vis() ? true : false;
            });

            function updateClock() {
                var t = getTimeRemaining(endtime);

                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

                if (t.total <= 0) {
                    clearInterval(timeinterval);
                    $.ajax({
                        url: '/myurlToUpdateTime',
                        method: 'post',
                        data: {'rewardId': '<?php echo $video->getId(); ?>', 'page_url': '<?php echo $currentPage; ?>'},
                        response: function (result) {
                            console.log(result);
                        }
                    });
                    $('#redirect_url').attr("href", "<?php echo $pageUrl; ?>");
                    document.getElementById('redirect_url').click();
                }
            }

            updateClock();
            //var timeinterval = setInterval(updateClock, 1000);
            var timeinterval = setInterval(function(){
                if(isPaused) {
                    updateClock();
                } else {
                    //endtime = new Date(Date.parse(new Date(endtime)) + 1000);
                    endtime = new Date(Date.parse(endtime) + 1000);
                }
            }, 1000);
        }

        var deadline = new Date(Date.parse(new Date()) + <?php echo $video->getCountdown(); ?> * 1000);
        initializeClock('clockdiv', deadline);

我尝试了一些解决方案，例如window.onBlur或window.onFocus ......但他们并没有把我引向所需的输出......

Answer 1

是..最终获得适用于所有浏览器的解决方案（SAFARI，chrome，FF ..）

//use starttime instead of date function
function getTimeRemaining(endtime, starttime) {
        var t = Date.parse(endtime) - Date.parse(starttime);
        var seconds = (t / 1000) % 60;
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        return {
            'total': t,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    function initializeClock(id, endtime, starttime) {
        var clock = document.getElementById(id);
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');
        var isPaused = true;

        vis(function(){
            isPaused = vis() ? true : false;
        });

        //update start time when isPaused() is true
        function updateClock() {
            starttime = new Date(Date.parse(starttime) + 1000);
            var t = getTimeRemaining(endtime, starttime);
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
                $.ajax({
                    url: '/targetURL',
                    method: 'post',
                    data: {'rewardId': '<?php echo $video->getId(); ?>', 'page_url': '<?php echo $currentPage; ?>'},
                    response: function (result) {
                        console.log(result);
                    }
                });
                $('#redirect_url').attr("href", "<?php echo $pageUrl; ?>");
                document.getElementById('redirect_url').click();
            }
        }

        updateClock();
        var timeinterval = setInterval(function(){
            if(isPaused) {
                updateClock();
            }
        }, 1000);
    }

    var deadline = new Date(Date.parse(new Date()) + <?php echo $video->getCountdown(); ?> * 1000);
    initializeClock('clockdiv', deadline, new Date());

注意：只要isPaused（）为true，我就使用了starttime 只要窗口处于活动/非活动状态，它就会更新时间相应

当窗口处于活动状态时，定时器在SAFARI中没有停止

1 个答案: