Home » Start and stop watch using HTML, CSS, and JavaScript

Start and stop watch using HTML, CSS, and JavaScript

by techmidpoint
Start and stop watch using HTML, CSS and JavaScript

Start and stop watch using HTML, CSS, and JavaScript

Friends welcome to another tutorial on techmidpoint. Friends, today I have come up with another new tutorial for you. I hope you like it. In this tutorial, you will learn how to make a start and stop watch using HTML, CSS, and JavaScript. It starts running when you click on the start button and stops when you click on the stop button.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Start and stop watch using HTML, CSS and JavaScript</title>
</head>
<body>
<center>
<div id="stopwatch">
<div class="time">
 <span id="minute">00</span>
 <span id="second">00</span>
 <span id="ms">00</span>
</div>
  <br />
  <button id="start" onclick="start();">Start</button>
  <button id="stop" onclick="stop();">Stop</button>
</div>
</center>
<script type="text/javascript">
var timer = 0;
var timerInterval;
var ms = document.getElementById('ms');
var second = document.getElementById('second');
var minute = document.getElementById('minute');

function start() {
  stop();
  timerInterval = setInterval(function() {
    timer += 1/60;
    msVal = Math.floor((timer - Math.floor(timer))*100);
    secondVal = Math.floor(timer) - Math.floor(timer/60) * 60;
    minuteVal = Math.floor(timer/60);
    ms.innerHTML = msVal < 10 ? "0" + msVal.toString() : msVal;
    second.innerHTML = secondVal < 10 ? "0" + secondVal.toString() : secondVal;
    minute.innerHTML = minuteVal < 10 ? "0" + minuteVal.toString() : minuteVal;
  }, 1000/60);
}
function stop() {
  clearInterval(timerInterval);
}
</script>
</body>
</html>

CSS

body {
  font-family: arial black;
  background: #6d8caa;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}
#stopwatch {
  width: 300px;
  height: 90px;
  
  background: #fff;
  color: #333;
  border-radius: 10px;
  padding: 60px 50px 100px;
  text-align: center;
  font-size: 30px;
}

#stopwatch span {
  background: #c7e0f8;
  color: #0776de;
  padding: 10px;
  width: 55px;
  border-radius: 5px;
  margin: 3px;
  display: inline-block;
  

}
.time{
  font-size: 40px;
  margin-left: -25px;
  letter-spacing: 1.5px;
}
#stopwatch span{
  margin-left: 20px;
}
#stopwatch button:first-of-type {
  margin-bottom: 15px;
}
#stopwatch button {
  font-size: 22px;
  border: none;
   background-color: #2e80b3;
  color: white;
  border-radius: 5px;
  width: 140px;
  height: 50px;
  transition: .3s;
  
}
#stopwatch button:last-child{
    background-color: #ae7617;
}
#stopwatch button:hover {

  background: #333;
  color: #fff;
  cursor: pointer;
}

For More Tutorials Please Click Here

You may also like

Leave a Comment