Question

我对javascript和jquery有基本的了解，但到目前为止，我所做的只是客户端验证和偶尔对servlet的ajax调用。我需要显示多个计数定时器（动态生成）。我的页面将有许多计时器（每个计时器都有自己的开始/暂停/恢复/停止按钮）。我可以单独启动计时器，但无法单独暂停它们。

从stackoverflow引用此链接。（http://jsfiddle.net/6nv3qy88/）我在上面的插件中创建了另一个设置"pause:null"。

    (function($) {
        $.fn.upCount = function(options, callback) {
            var settings = $.extend({
                startTime: null,
                resume: null,
                pause: false
            }, options);


            var container = this;
            globalContainer = container.parent().html();


            var currentDate = function() {
                // get client's current date
                var date = new Date();
                return date;
            };



            if(settings.startTime){
                resumeTimer(new Date(settings.startTime));
            }

            var original_date = currentDate();

            var paus = settings.pause;
            if(paus){
                alert("In settings.pause" + paus);
                var target_date = new Date('12/31/2014 12:00:00');
                paus = true;
            }else{
                var target_date = new Date('12/08/2015 14:55:00'); // Count up to this date
            }

            // Given a start time, lets set the timer
            function resumeTimer(startTime){
                alert('Resume Timer Needs to Start From StartTime  ' +startTime)
            }

            // Start the counter
            function countUp() {

                // Set our current date
                var current_date = currentDate(); 
                //alert("In countUp paus--" + paus);
                // difference of dates
                var difference = current_date - new Date(settings.startTime);

                if (current_date >= target_date) {
                    // stop timer
                    alert("In stop timer --" + target_date);
                    clearInterval(interval);
                    interval = 0;
                    if (callback && typeof callback === 'function') callback();
                    return;
                }
//Code for Counting timer
            };

                interval = setInterval(countUp, 1000);



        };

    })(jQuery);

我可以根据rowIndex和开始按钮id单独启动计时器。

启动计时器的代码：

    function startTimer(id, rowIndex){
    var startTimeId = 'id="list:'+rowIndex+':projectStartTime"';
        var y = $('['+startTimeId+']').text();
        //alert("value of y##" + y);

        if(y.length > 0){
            //$('#'+id).upCount({startTime: '12/04/2015 07:00:00', resume: true});
            $('#'+id).upCount({startTime: $('['+startTimeId+']').text()});
        }
      }

上面的代码可以帮助我独立启动多个计时器。但我无法单独暂停计时器。如果我点击任何暂停，所有计时器停止。我用clearInterval(interval) 暂停计时器。

暂停功能：

function pause(id, rowIndex){
    alert("In Function" + id);
    var timer = $('#'+id+' span').text();

    $('#'+id).upCount({startTime: '12/04/2015 07:00:00',pause: true});
}

需要帮助：

我想知道如何仅为单击按钮的行清除间隔，即单击暂停按钮后计时器应暂停。

JSF commandButton代码：

<p:commandButton id="startBtn" action="#{timeBB.addTask}" value="Start"  style="align:center;" styleClass="button" onstart="startTimer(#{impl.timerId},#{rowIndex});">
       <f:param name="currentRow" value="#{impl.timerId}"/>
</p:commandButton>

<p:commandButton id="pauseBtn" value="Pause" action="#{timeBB.pause}" style="align:center;" styleClass="buttonStyle" onstart="pause(#{impl.timerId},#{rowIndex});">
    <f:param name="currentProjectRowIndex" value="#{impl.timerId}" />
</p:commandButton>

有谁可以指出我在这里做错了什么？

如何根据点击按钮的行清除计时器的间隔

0 个答案: