javascript - 多个秒表无法正常工作

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>