Question

我正在使用jquery TimeCircles TimeCircle github而我正在尝试做两件事而不确定我是否正确地采用了它。首先，我在创建TimeCircle实例后尝试动态设置倒计时值。据我所知，在启动时，它会在标签中查找data-timer attr。但是，我正在尝试动态更新该值。我有一个setTimer调用一个方法，该方法对服务进行ajax调用，返回TimeCircle应该倒计时的分钟数（下面的'd'参数）。我确认我从该服务电话获得了一个值。但我无法用该值“刷新”TimeCircle。我是否需要销毁它并重建实例才能刷新？任何帮助都是赞赏的人！

其次，我正在尝试动态显示日期和小时圈，具体取决于我是否在白天和/或小时都有“零”。换句话说，如果日或小时为零，则没有理由显示圆圈。罢工两次 - 也没有成功。

提前感谢任何帮助和TimeCircles的作者（好东西！）。

function doCircleTimer(d) {

var dd = d;
if (dd == undefined) {
    dd = $('div#CountDownTimer', window.parent.document).data('timer');
}
var _timer = $('div#CountDownTimer', window.parent.document);

_timer = $('div#CountDownTimer', window.parent.document).attr('data-timer', dd);


_timer.TimeCircles({ time: { Days: { show: true }, Hours: { show: true }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1'}} })
.addListener(
function (unit, value, total) {
    //hide days
    if (total < 86400) {
        _timer.TimeCircles({ time: { Days: { show: false }, Hours: { show: true,  color: '#900' }, Minutes: { color: '#900' }, Seconds: { color: '#900'}} })

    }
     if (total < 3600) {

        _timer.TimeCircles({ time: { Days: { show: false, color: '#900' }, Hours: { show: false, color: '#900' }, Minutes: { color: '#900' }, Seconds: { color: '#900'}} })
    } 
    if (total == 120) {
        _timer.data('timer', 120);
        alert("Two-Minute Warning!");
        _timer.TimeCircles({ time: { Days: { show: false }, Hours: { show: false }, Minutes: { color: '#900' }, Seconds: { color: '#900'}} })
    } else if (total == 30) {
        alert('Your session will expire in 30 seconds, you should save your work and / or  reload the page.');
    } else if (total == 0) {

        alert("Time Expired");

    }
}
);
}

Answer 1

我是TimeCircles的创造者。

我注意到的第一件事就是，为了在跑步时移除一个圆圈，您需要拨打.rebuild()。

此外，由于使用了＆lt;＆lt;＆lt;运营商。其他的东西：当你达到120时，你似乎将时间设置为120，我不明白你在那里做什么。

最后，您似乎正在混合使用.data()和.attr('data'..。您应该意识到的是，更改.data不会影响.attr，而.attr不会影响.data。

现在，如果我理解正确的话 - 在已经实例化TimeCircles之后调用此函数。在这种情况下，我会建议这样的事情：

        var listenerAdded = false;

        function listener(unit, value, total) {
            if(total === 86399 || total === 3599) {
                $(this).TimeCircles().destroy();
                $(this).data('timer', total + 1).TimeCircles(getConfig(total));
            }
            if(total == 120) {
                alert("Two-Minute Warning!");
            }
            else if(total == 30) {
                alert('Your session will expire in 30 seconds, you should save your work and / or  reload the page.');
            }
            else if(total == 0) {
                alert("Time Expired");
            }
        }

        function getConfig(seconds) {
            var config = { time: {
                Days: { show: true },
                Hours: { show: true },
                Minutes: { show: true, color: '#4D8DC1' },
                Seconds: { show: true, color: '#4D8DC1' },
            }};
            if(seconds <= 86400) {
                config.time.Days.show = false;
                config.time.Seconds.color = "#900";
                config.time.Minutes.color = "#900";
                if(seconds <= 3600) {
                    config.time.Hours.show = false;
                }
                else {
                    config.time.Hours.color = "#900";
                }
            }
            return config;
        }

        function doCircleTimer(d) {

            var $timer = $('div#CountDownTimer', window.parent.document);
            var dd = d;
            if (dd == undefined) {
                dd = $timer.data('timer');
            }

            $timer.data('timer', dd);
            var tc = $timer.TimeCircles(getConfig(dd)).rebuild().restart();
            if(!listenerAdded)
                tc.addListener(listener);
        }

TimeCircle - 不会更新为新值

1 个答案: