Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

3 Steps Simple Javascript Stopwatch

INTRODUCTION
PIECE OF CAKE TIMER

Welcome to a tutorial on how to create a simple Javascript Stopwatch. So you need to create a simple stopwatch function for your project, your school assignment, or maybe just out of pure curiosity? Well, it is actually pretty easy and this guide will walk you through the exact steps – This Javascript timer should take less time to create, than baking a piece of cake. Read on to find out!

I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

Related Articles

 

CONFESSION
AN HONEST DISCLOSURE

Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!


 

NAVIGATION
TABLE OF CONTENTS

Step 1
The HTML

Step 2
The CSS

Step 3
The Javascript

Extra
Download & Demo

Closing
What’s Next?

STEP 1
THE HTML

Let us start with the foundation of the project, by creating the HTML interface first.

THE SCRIPT

index.html


  
    
      Simple Javascript Stopwatch
    

      
      
00:00:00

THE EXPLANATION

This should be very easy to understand. The entire stopwatch is placed inside a 

 wrapper, and it only has 3 components –
  • sw-time – The time display.
  • sw-rst – The reset button.
  • sw-go – The start/stop button.

Just take note that the buttons are disabled, and will only be enabled when the page is fully loaded.

STEP 2
THE CSS

Next, we add some cosmetic styles to make the interface look nicer.

THE SCRIPT

stopwatch.css
#stopwatch {
  background: #eee;
  border: 1px solid #999;
  padding: 20px;
  border-radius: 10px;
  max-width: 250px;
}
#sw-time {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
}
#sw-rst, #sw-go {
  width: 45%;
  box-sizing: padding-box;
  padding: 10px;
  display: inline-block;
  background: #aa2f2f;
  border: 0;
  color: #fff;
}

THE EXPLANATION

Nothing much to the CSS again, feel free to change the styles to fit your own liking.

STEP 3
THE JAVASCRIPT

Finally, we deal with the Javascript that will do most of the heavy weight lifting.

THE SCRIPT

stopwatch.js
var sw = {
  /* [INIT] */
  etime : null, // holds HTML time display
  erst : null, // holds HTML reset button
  ego : null, // holds HTML start/stop button
  timer : null, // timer object
  now : 0, // current timer
  init : function () {
    // Get HTML elements
    sw.etime = document.getElementById("sw-time");
    sw.erst = document.getElementById("sw-rst");
    sw.ego = document.getElementById("sw-go");

    // Attach listeners
    sw.erst.addEventListener("click", sw.reset);
    sw.erst.disabled = false;
    sw.ego.addEventListener("click", sw.start);
    sw.ego.disabled = false;
  },

  /* [ACTIONS] */
  tick : function () {
  // tick() : update display if stopwatch running

    // Calculate hours, mins, seconds
    sw.now++;
    var remain = sw.now;
    var hours = Math.floor(remain / 3600);
    remain -= hours * 3600;
    var mins = Math.floor(remain / 60);
    remain -= mins * 60;
    var secs = remain;

    // Update the display timer
    if (hours

THE OVERVIEW

Functions
FunctionDescription
initFired on window load, grabs the HTML elements and enables the stopwatch buttons.
tickFired at every 1-second interval, after stopwatch is started. Calculates the elapsed time, updates the display timer.
startStarts the stopwatch.
stopStops the stopwatch.
resetReset and stop the stopwatch.
Properties
PropertyDescription
etimeHolds the HTML time display.
erstHolds the HTML reset button.
egoHolds the HTML start/stop button.
timerHolds the timer object.
nowHolds the current elapsed time.

THE EXPLANATION

So just how does this script work? Well, we will not walk through line-by-line here (trace through the code on your own), but here is a summary of what happens:

  • The var sw object holds all the key players for the stopwatch.
  • When the window is fully loaded sw.init will fire up. It basically gets a reference to all the related HTML elements, attach onclick event listeners to buttons, and enable them.
  • When the user clicks on the start button, sw.start will fire up, simply creating a timer into sw.timer.
  • At every 1 second interval, sw.tick will increment the elapsed time and update the timer display.
  • Lastly, sw.stop and sw.reset are used to stop the timer.

EXTRA
DOWNLOAD & DEMO

That’s all for the code, and here is the download link as promised – Plus a demo of the complete stopwatch code above.

DEMO

00:00:00

COUNTDOWN TIMER

Need a countdown timer instead? Check out my other guide:

3 Steps Simple Javascript Countdown Timer

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to create your own stopwatch project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

The post 3 Steps Simple Javascript Stopwatch appeared first on Code Boxx.



This post first appeared on Xxxxxxxxx, please read the originial post: here

Share the post

3 Steps Simple Javascript Stopwatch

×

Subscribe to Xxxxxxxxx

Get updates delivered right to your inbox!

Thank you for your subscription

×