codemediaweb.com

Code Media

hire me

Simple Stopwatch Using JavaScript (For Beginners)

by

You are interested in making JavaScript Stopwatch. If yes then I will help you. In this article, I will discuss how to make Stopwatch using JavaScript.

Stopwatch is basically a project that allows you to count a short time. For example, suppose you want to do a task, and count how long it takes you to do it. In that case, this type of stopwatch can be used.

Simple javascript Stopwatch
Demo
Download

I have done many tutorials on Advanced Stopwatch JavaScript before. Since they are advanced, the amount of JavaScript used there is much higher. If you are a beginner and are thinking of making a stopwatch for the first time then this design is for you.

There is no restart button in this Stopwatch. I have already shared a tutorial on Advanced Stopwatch with a restart button. You can watch that tutorial if you want to make an advanced stopwatch.

This HTML Stopwatch is made in a very simple way. There are three small boxes where Time can be seen. It has two control buttons that will start and stop the Stopwatch. Onclick = “” is used between the buttons.

You are excited to learn how this simple JavaScript Stopwatch works. OK then use the demo button below.

Step 1:

HTML code of Simple Stopwatch

All the information about StopWatch has been added using the following HTML codes. Here first I have created an area that consists of the first three small boxes. There will be a time count in that box. Then there are two buttons that will be used to control the stopwatch. 

The three small boxes will basically serve as displays. Where minutes, seconds, and milliseconds will be counted, respectively. The button uses onclick which I later implemented with JavaScript.

<center>
<div id=”stopwatch”>
<!–Time view box–>
<div class=”time”>
 <span id=”minute”>00</span>
 <span id=”second”>00</span>
 <span id=”ms”>00</span>
</div>
  <br />
<!–Stopwatch control button–>
  <button id=”start” onclick=”start();”>Start</button>
  <button id=”stop” onclick=”stop();”>Stop</button>
</div>
</center>
Step 2:

Design JavaScript Stopwatch with CSS

Now some CSS is needed to design this Stopwatch. The CSS used below is not very difficult. Stopwatch’s background width: 300px, height: 90px and background white color has been used. 

The width of the small boxes that will act as displays: 55px. The width of the two buttons here: 140px and height: 50px.

body {
  font-family: arial;
  background: #0776de;
}
/*Basic structure of stopwatch*/
#stopwatch {
  width: 300px;
  height: 90px;
  margin: 100px auto;
  background: white;
  color: #333;
  border-radius: 10px;
  padding: 60px 50px 100px;
  text-align: center;
  font-size: 30px;
}
/*Time view box*/
#stopwatch span {
  background: #c7e0f8;
  color: #0776de;
  padding: 10px;
  width: 55px;
  border-radius: 5px;
  margin: 3px;
  display: inline-block;
}
.time{
  margin-left: -25px;
}
#stopwatch span{
  margin-left: 20px;
}
#stopwatch button:first-of-type {
  margin-top: 15px;
}
/* stopwatch button */
#stopwatch button {
  font-size: 22px;
  -webkit-appearance: none;
  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;
}
Step 3:

Activate Stopwatch using JavaScript

HTML Stopwatch designed but not activated. Now it’s time to activate Stopwatch by JavaScript. Hope you have some ideas about JavaScript.

First, a constant of some HTML functions is determined. Because we can’t use any HTML function directly in JavaScript. Then I implemented the onclick function that I added to the button.

//Determine the constant of the html function
var timer = 0;
var timerInterval;
var ms = document.getElementById(‘ms’);
var second = document.getElementById(‘second’);
var minute = document.getElementById(‘minute’);
//Activate the start button
function start() {
  stop();
//setInterval() function is commonly used to set a delay for functions that are executed again and again
  timerInterval = setInterval(function() {
    timer += 1/60;
//Calculate the value in milliseconds
    msVal = Math.floor((timer – Math.floor(timer))*100);
//Calculate the value in seconds
    secondVal = Math.floor(timer) – Math.floor(timer/60) * 60;
//Calculate the value in minute
    minuteVal = Math.floor(timer/60);
//innerHTML property is allows Javascript code to manipulate a website being displayed
    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);
}
//Activate the stop button
function stop() {
  clearInterval(timerInterval);
}

Hope this tutorial has helped you to know how to create Simple Stopwatch JavaScript. Although you can make a more advanced stopwatch if you want. I have already shared the tutorials.

I am active on Instagram to help you. If there is any problem, please comment. Hopefully, you have learned how to make Stopwatch using JavaScript. Please comment on your opinion about this article.

Leave a comment