Question

我正在寻找：

计算时间 - 以秒为单位分钟。我的计数我希望它在单击一个按钮时启动，如果再次单击则停止。点击时，我从零开始计算每个按钮。

这是我尝试的但似乎无法正常工作。

function toggle(ths) {
    $(ths).toggleClass("btnColor");
    $("#tb").toggleClass("btnColorR")
    var secondCounter = 0;
    var minutes = 0;
    var t;
    var timer_is_on = 0;
    var clicked = $(ths).val();
    secondCounter = secondCounter + 1;
    if ((secondCounter % 60 == 0 )&&(clicked)) {
        minutes += 1;
        secondCounter = 0;
    }
    $("#setCount").html(" downtime type: " + clicked + " minutes: " + minutes + "     seconds: " + secondCounter);
}

Answer 1

如果您发布调用toggle()函数的html代码，问题就会很清楚。

我的猜测是minutes，secondCounter每次调用toggle()函数时都会重置为0.

Answer 2

我假设您需要一种方法来查找按钮两次点击之间经过的时间

另外假设您在第二次点击时想知道自上次点击以来所花费的时间并重置计数器

如果是这样，我有一个简单的jsfiddle你可以看一下： http://jsfiddle.net/8cjBj/

HTML CODE：

<a href="#" id="btn">This is a button</a>

JS CODE：

var start = 0;
var end = 0;

$('#btn').click(function(event){
    event.preventDefault();

    if(start == 0)
        start = new Date();
    else
    {
        end = new Date();
        millis = end - start;
        var totalSeconds = parseInt(millis / 1000);
        var minutes = parseInt(totalSeconds / 60);
        var seconds = totalSeconds % 60;
        alert('Elapsed Time: ' + minutes + ' Minutes and ' + seconds + ' seconds');
        start = 0;
    }

});

Answer 3

如果您想知道按钮被切换的时间，可以尝试以下代码：

var displayElapsedTime,
    startTimeCounter,
    isDown;

isDown = function isDown($this) {
  return $this.is('.down');
};

displayElapsedTime = function displayElapsedTime($this) {
  var time = new Date((new Date()) - $this.data('time'));
  $this.val(time.getMinutes() + ':' + time.getSeconds());
};

startTimeCounter = function startTimeCounter($this) {
  setTimeout(function() {
    displayElapsedTime($this);
    if(isDown($this)) {
      startTimeCounter($this);
    }
  }, 1000);
};

$('input').on('click', function() {
  var $this = $(this);

  if(!isDown($this)) {
    $this.data('time', new Date());
    startTimeCounter($this);
  }

  $this.toggleClass('down');
});

您可以在此处查看工作示例：http://jsbin.com/ahafez/3/edit

Javascript / JQuery时间计数器

3 个答案: