Stopwatch

In this example below you will see how to do a Stopwatch with some HTML / CSS and Javascript

A simple vanilla javascript stopwatch.

Thumbnail
This awesome code was written by 416studios, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 416studios ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Stopwatch</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="stopwatch">
    <div class="clockwrapper">
      <div class="outerdot paused"></div>
      <div class="clock">00 : 00 : 00</div>
    </div>
  
  <div class="controls">
    <div class="start btn">Start</div>
    <div class="stop btn disabled">Reset</div>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/416studios/stopwatch-GmdwmZ */
body {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, #320240 20%, #000 100%) no-repeat;
  font-family: 'PT Sans', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stopwatch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.clockwrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  border: 2px solid #91e0b6;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  color: #82c4e0;
  font-size: 2em;
}
.outerdot {
  position: absolute;
  left: -21px;
  top: -21px;
  width: 100%;
  height: 100%;
  border: 2px solid #cea7e6;
  padding: 20px;
  border-radius: 50%;
}
.outerdot:after {
  position: relative;
  content: '.';
  color: #82c4e0;
  font-size: 4em;
  top: -137px;
  left: 110px;
}
.outerdot.running {
  animation: 1s infinite linear seconds;
}
.outerdot.paused {
  animation-play-state: paused;
}
.btn {
  font-weight: 700;
  transition: opacity 150ms ease-out;
  opacity: 1;
  background: #91e0b6;
  border-radius: 20px;
  display: block;
  width: 120px;
  padding: 15px;
  color: #320240;
  margin: 1.5em;
  margin-top: 2.5em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.btn.stop {
  background: #cea7e6;
}
.btn.disabled {
  opacity: 0;
}
@-moz-keyframes seconds {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes seconds {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes seconds {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes seconds {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*Downloaded from https://www.codeseek.co/416studios/stopwatch-GmdwmZ */
var start = document.querySelector(".start"),
    stop = document.querySelector(".stop"),
    clock = document.querySelector(".clock"),
    seconds = document.querySelector(".outerdot"),
    timerState = "stopped", //Clock is either stopped, paused, or running
    startTime, elapsed, timer;
//timer states

start.addEventListener("click", function(){
  if(timerState == "stopped"){
  startTime = Date.now();
  timer = requestAnimationFrame(updateTime);
    timerState = "running";
    seconds.classList.remove("paused");
    seconds.classList.add("running");
    start.innerHTML = "Stop";
  } else if( timerState == "running" ){
    cancelAnimationFrame( timer );
    timerState = "paused";
    seconds.classList.add("paused");
    stop.classList.remove("disabled");
    start.innerHTML = "Resume";
  } else if( timerState == "paused" ){
    startTime = Date.now() - elapsed;
    timer = requestAnimationFrame(updateTime);
    timerState = "running";
    seconds.classList.remove("paused");
    seconds.classList.add("running");
    stop.classList.add("disabled");
    start.innerHTML = "Stop";
  }
})

stop.addEventListener("click", function(){
  if(!this.classList.contains("disabled") ){
    timerState = "stopped";
    seconds.classList.remove("paused", "running");
    this.classList.add("disabled");
    start.innerHTML = "Start";
    clock.innerHTML = "00 : 00 : 00"
  }
});

function updateTime(){

  timer = requestAnimationFrame(updateTime);
  elapsed = new Date(Date.now() - startTime);
  
  //minutes
  var mins = elapsed.getMinutes();
  //seconds  
  var secs = elapsed.getSeconds();
  // hundredths
  var hund = Math.floor(elapsed.getMilliseconds()/10);
   //add leading zeros
  if ( mins < 10 ){ mins = "0"+ mins }
  if ( secs < 10 ){ secs = "0"+ secs}
  if ( hund < 10 ){ hund = "0"+ hund }
  
  //update clock
  clock.innerHTML = mins + " : "+ secs + " : " + hund;
  
};

Comments