多個秒錶無法正常工作

Question

我製作了兩個秒錶來跟蹤用戶的活動，一個人在另一個開始/恢復時被暫停。但是每次都從其他時鐘獲取時間。請幫我糾正，或者請提出任何更好的方法，我想一起使用10個秒錶來跟蹤活動，並希望我所有的秒錶和另一個按鈕都在我的面前。提前致謝。

$(document).ready(function(){ 
 

 
    var clocDiv = ''; 
 
    
 
    $(".act-butn").button().click(function(){ 
 
     
 
      var act = $(this).attr('value'); 
 
      clocDiv = '#'+act+' span'; 
 
      prev_hours = parseInt($(clocDiv).eq(0).html()); 
 
      prev_minutes = parseInt($(clocDiv).eq(1).html()); 
 
      prev_seconds = parseInt($(clocDiv).eq(2).html()); 
 
      prev_milliseconds = parseInt($(clocDiv).eq(3).html()); 
 
      
 
      updateTime(prev_hours, prev_minutes, prev_seconds, prev_milliseconds); 
 
      
 
     
 
     
 
    }); 
 
    
 
    
 
    
 
    // Update time in stopwatch periodically - every 25ms 
 
    function updateTime(prev_hours, prev_minutes, prev_seconds, prev_milliseconds){ 
 
     var startTime = new Date(); // fetch current time 
 
     
 
     timeUpdate = setInterval(function() { 
 
      var timeElapsed = new Date().getTime() - startTime.getTime(); // calculate the time elapsed in milliseconds 
 
      
 
      // calculate hours     
 
      hours = parseInt(timeElapsed/1000/60/60) + prev_hours; 
 
      
 
      // calculate minutes 
 
      minutes = parseInt(timeElapsed/1000/60) + prev_minutes; 
 
      if (minutes > 60) minutes %= 60; 
 
      
 
      // calculate seconds 
 
      seconds = parseInt(timeElapsed/1000) + prev_seconds; 
 
      if (seconds > 60) seconds %= 60; 
 
      
 
      // calculate milliseconds 
 
      milliseconds = timeElapsed + prev_milliseconds; 
 
      if (milliseconds > 1000) milliseconds %= 1000; 
 
      
 
      // set the stopwatch 
 
      setStopwatch(hours, minutes, seconds, milliseconds); 
 
      
 
     }, 25); // update time in stopwatch after every 25ms 
 
     
 
    } 
 
    
 
    // Set the time in stopwatch 
 
    function setStopwatch(hours, minutes, seconds, milliseconds){ 
 
     $(clocDiv).eq(0).html(prependZero(hours, 2)); 
 
     $(clocDiv).eq(1).html(prependZero(minutes, 2)); 
 
     $(clocDiv).eq(2).html(prependZero(seconds, 2)); 
 
     $(clocDiv).eq(3).html(prependZero(milliseconds, 3)); 
 
    } 
 
    
 
    // Prepend zeros to the digits in stopwatch 
 
    function prependZero(time, length) { 
 
     time = new String(time); // stringify time 
 
     return new Array(Math.max(length - time.length + 1, 0)).join("0") + time; 
 
    } 
 
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
 

 
<div id="break"> 
 
    <span id="hours">00</span> : 
 
    <span id="minutes">00</span> : 
 
    <span id="seconds">00</span> :: 
 
    <span id="milliseconds">000</span> 
 
</div><br> 
 

 
<div id="production"> 
 
    <span id="hours">00</span> : 
 
    <span id="minutes">00</span> : 
 
    <span id="seconds">00</span> :: 
 
    <span id="milliseconds">000</span> 
 
</div><br> 
 
<div id="controls"> 
 
    <button class="act-butn" value="break">Break</button> 
 
    <button class="act-butn" value="production">Production</button> 
 

 
</div>

Answer 1

爲您的代碼， 'ID' 是獨一無二的，你不應該使用相同的ID超過一​​次。

我在這裏做了兩部分，第一部分是秒錶，你可以創建儘可能多的秒錶。只是複製更多<span class="basic stopwatch">Watch x</span>但要確保你有相同數量的btngroup和watchgroup

第二部分下面將推動所有時鐘動態，開始一個將暫停所有其他人：

//click one btn, stop all other watch 
$('#btngroup button').live('click', function() { 
    var btnClicked = $(this).index(); 
    $('.basic').each(function(index) { 
    if(btnClicked == index){ 
     $(this).find('a:eq(0)')[0].click(); 
    } else { 
     $(this).find('a:eq(1)')[0].click(); 
    } 
    }); 
}); 

大量的代碼，玩耍和應滿足您的需要

// stopwatch functions... 
 
var Stopwatch = function(elem, options) { 
 
    var timer = createTimer(), 
 
    startButton = createButton("start", start), 
 
    stopButton = createButton("stop", stop), 
 
    resetButton = createButton("reset", reset), 
 
    offset, 
 
    clock, 
 
    interval; 
 

 
    // default options 
 
    options = options || {}; 
 
    options.delay = options.delay || 1; 
 

 
    // append elements  
 
    elem.appendChild(timer); 
 
    elem.appendChild(startButton); 
 
    elem.appendChild(stopButton); 
 
    elem.appendChild(resetButton); 
 

 
    // initialize 
 
    reset(); 
 

 
    // private functions 
 
    function createTimer() { 
 
    return document.createElement("span"); 
 
    } 
 

 
    function createButton(action, handler) { 
 
    var a = document.createElement("a"); 
 
    a.href = "#" + action; 
 
    a.style = "display: none;"; 
 
    a.innerHTML = action; 
 
    a.addEventListener("click", function(event) { 
 
     handler(); 
 
     event.preventDefault(); 
 
    }); 
 
    return a; 
 
    } 
 

 
    function start() { 
 
    if (!interval) { 
 
     offset = Date.now(); 
 
     interval = setInterval(update, options.delay); 
 
    } 
 
    } 
 

 
    function stop() { 
 
    if (interval) { 
 
     clearInterval(interval); 
 
     interval = null; 
 
    } 
 
    } 
 

 
    function reset() { 
 
    clock = 0; 
 
    render(0); 
 
    } 
 

 
    function update() { 
 
    clock += delta(); 
 
    render(); 
 
    } 
 

 
    function render() { 
 
    var h = Math.floor(clock/(1000 * 60 * 60)) % 24; 
 
    var m = Math.floor(clock/(1000 * 60)) % 60; 
 
    var s = Math.floor(clock/1000) % 60; 
 
    var ms = Math.floor(clock % 1000); 
 

 
    if (h < 10) { 
 
     h = "0" + h; 
 
    } 
 
    if (m < 10) { 
 
     m = "0" + m; 
 
    } 
 
    if (s < 10) { 
 
     s = "0" + s; 
 
    } 
 
    if (ms < 100) { 
 
     ms = "0" + ms; 
 
    } 
 
    if (ms < 10) { 
 
     ms = "0" + ms; 
 
    } 
 

 
    timer.innerHTML = h + ':' + m + ':' + s + '::' + ms; 
 

 
    } 
 

 
    function delta() { 
 
    var now = Date.now(), 
 
     d = now - offset; 
 

 
    offset = now; 
 
    return d; 
 
    } 
 

 
    this.start = start; 
 
    this.stop = stop; 
 
    this.reset = reset; 
 
}; 
 

 

 
var elems = document.getElementsByClassName("basic"); 
 
for (var i = 0, len = elems.length; i < len; i++) { 
 
    new Stopwatch(elems[i]); 
 
} 
 

 

 
//click one btn, stop all other watch 
 
$('#btngroup button').live('click', function() { 
 
    var btnClicked = $(this).index(); 
 
    $('.basic').each(function(index) { 
 
    if(btnClicked == index){ 
 
     $(this).find('a:eq(0)')[0].click(); 
 
    } else { 
 
     $(this).find('a:eq(1)')[0].click(); 
 
    } 
 
    }); 
 
});

.stopwatch { 
 
    display: inline-block; 
 
    background-color: white; 
 
    border: 1px solid #eee; 
 
    padding: 5px; 
 
    margin: 5px; 
 
} 
 

 
.stopwatch span { 
 
    font-weight: bold; 
 
    display: block; 
 
} 
 

 
.stopwatch a { 
 
    padding-right: 5px; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 

 
<div id="btngroup"> 
 
    <button>Btn 1</button> 
 
    <button>Btn 2</button> 
 
    <button>Btn 3</button> 
 
    <button>Btn 4</button> 
 
    <button>Btn 5</button> 
 
    <button>Btn 6</button> 
 
    <button>Btn 7</button> 
 
    <button>Btn 8</button> 
 
    <button>Btn 9</button> 
 
    <button>Btn 10</button> 
 
</div> 
 
<br><br> 
 
<div id="watchgroup"> 
 
    <span class="basic stopwatch">Watch 1</span> 
 
    <span class="basic stopwatch">Watch 2</span> 
 
    <span class="basic stopwatch">Watch 3</span> 
 
    <span class="basic stopwatch">Watch 4</span> 
 
    <span class="basic stopwatch">Watch 5</span> 
 
    <span class="basic stopwatch">Watch 6</span> 
 
    <span class="basic stopwatch">Watch 7</span> 
 
    <span class="basic stopwatch">Watch 8</span> 
 
    <span class="basic stopwatch">Watch 9</span> 
 
    <span class="basic stopwatch">Watch 10</span> 
 
</div>