Javascript how to make laps in the stopwatch?

JavaScript
1

Hey guys! I need to write a function that creates laps in this stopwatch. But I dont know how. Please, help :slight_smile:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Stopwatch</title>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <style> 
            p {
                font-size:30px;
            }
            #start:hover {
                background-color:#FFD700;
                border:2px solid;
            }
            #stop:hover {
                background-color:#FFD700;
                border:2px solid;
            }
            #clear:hover {
                background-color:#FFD700;
                border:2px solid;
            }
            #seconds {
                background-color:#F0FFF0;
            }
            #tens {
                background-color:#F0FFF0;
            }
            #start {
                width:50px;
                height:30px;
                background-color:#483D8B;
                border:2px solid #778899;
            }
            #stop {
                width:50px;
                height:30px;
                background-color:	#2F4F4F;
                border:2px solid #778899;
            }
            #clear {
                width:50px;
                height:30px;
                background-color:#40E0D0;
                border:2px solid #778899;
            }
        </style>
    </head>
    <body>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="clear">Clear</button>

    <script>
        window.onload = function () {
  
  var seconds = 00; 
  var tens = 00; 
  var aTens = document.getElementById("tens")
  var aSeconds = document.getElementById("seconds")
  var Start = document.getElementById('start');
  var Stop = document.getElementById('stop');
  var clear = document.getElementById('clear');
  var Interval ;

  Start.onclick = function() {
    
     clearInterval(Interval);
     Interval = setInterval(startTimer, 10);
  }
  
    Stop.onclick = function() {
       clearInterval(Interval);
  }
  

  clear.onclick = function() {
     clearInterval(Interval);
    tens = "00";
  	seconds = "00";
    aTens.innerHTML = tens;
  	aSeconds.innerHTML = seconds;
  }
  
   
  
  function startTimer () {
    tens++; 
    
    if(tens < 9){
      aTens.innerHTML = "0" + tens;
    }
    
    if (tens > 9){
      aTens.innerHTML = tens;
      
    } 
    
    if (tens > 99) {
      console.log("seconds");
      seconds++;
      aSeconds.innerHTML = "0" + seconds;
      tens = 0;
      aTens.innerHTML = "0" + 0;
    }
    
    if (seconds > 9){
      aSeconds.innerHTML = seconds;
    }
  
  }
  

}
    </script>

    </body>
</html>
2

What do you mean by laps?

Hit a button and copy the time somewhere and restart the timer from 0?

1 Like
3

Not sure if this is what the OP wants. but I have seen stopwatch mobile apps the record laps.
First you hit the start button to set the clock going, then there is a lap button, hitting that does not stop or re-set the clock, but records in a list the time from start to the time the lap button is hit. The next time you hit lap, it records in the list the time of the second lap, ie: the time between last hitting the lap button.

4

It displays the current time, if you press the button

5

Right, that’s pretty straightforward then.

Add a button and list to record the times

<button id="lap">Lap</button>
<ul id="laps"></ul>

And the script to copy the time across to the list

var Lap = document.getElementById('lap');
var Laps = document.getElementById('laps');

Lap.onclick = function() {
  Laps.innerHTML += "<li>" + aTens.innerHTML + ":" + aSeconds.innerHTML + "</li>";
}

In the clear function you probably want to empty this list too

Laps.innerHTML = '';

Edit: Oh I missed the part where you subtract the time from the last lap, for that you’ll need to record the last lap time.

var lastLap = { tens: 0, seconds: 0 };

Lap.onclick = function() {
  var lapSeconds = seconds - lastLap.seconds;
  var lapTens = tens - lastLap.tens;
  lastLap = {
    tens: tens,
    seconds: seconds
  };

  Laps.innerHTML += "<li>" + leftPad(lapSeconds) + ":" + leftPad(lapTens) + "</li>";
}

function leftPad(value) {
  return value < 10 ? ('0' + value) : value;
}
1 Like
6

A big thank you for help :slight_smile:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.