Javascript/JQuery時間計數器

計數時間 - 以秒爲單位&分鐘。我的計數我希望它啓動時，單擊一個按鈕，如果再次點擊停止。我點擊每個按鈕從零開始計數。

這是我的嘗試，但它似乎不工作。

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); 
}

來源

2013-03-14 C_Major

我不能看到一個循環，你不斷增加你的'secondCounter'，直到用戶再次點擊按鈕' – 2013-03-14 07:57:44

如果您發佈的HTML代碼調用了toggle()函數，問題就會很明顯。

我的猜測是minutes和secondCounter重置爲0每次toggle()函數被調用。

來源

2013-03-14 07:49:22 anil

我假設你需要一種方法來找到按鈕兩次點擊之間的時間間隔

還假定在第二點擊你想知道它被點擊它採取自上一次的時間和復位櫃檯

如果是這樣我有一個簡單的jsfiddle，你可以看看： http://jsfiddle.net/8cjBj/

HTML代碼：

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

JS代碼：

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; 
    } 

});

來源

2013-03-14 07:53:05 jsshah

非常感謝很多人，我真的是新的這個，我的最後一個問題如何點擊的時間顯示在網頁上的TIME增量第一次和w母雞第二次點擊它必須顯示經過時間，因爲它在做 – 2013-03-14 08:11:01

看看：http://jsfiddle.net/8cjBj/2/ – jsshah 2013-03-14 08:18:12

我想看到在網頁上COUNT遞增（5h：18m：56s）不僅要增加幕後，我很抱歉打擾 – 2013-03-14 08:31:11

如果你想知道有多少時間按鈕切換了，你可以試試這個代碼：

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

來源

2013-03-14 08:11:18 Vadim

非常感謝很多人，我真的很新，我最後一個問題如何在網頁上顯示時間遞增，如果第一次點擊和第二次點擊它必須顯示經過時間，因爲它在做 – 2013-03-14 08:15:59

@C_Major我已添加了您請求的功能：現在已經過的時間顯示在按鈕上。帶示例的鏈接也會更新。 – Vadim 2013-03-14 09:28:32

哇！偉大的工作人員的主要問題是終結它，再次感謝它完美的工作 – 2013-03-14 09:41:17

Javascript/JQuery時間計數器

回答

相關問題