Skip to content

This is a simple and lightweight library, that adds a stopwatch with an API to an HTML page.

Notifications You must be signed in to change notification settings

Everhard/stopwatch.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 

Repository files navigation

stopwatch.js

This is a simple and lightweight library, that adds a stopwatch to an HTML page.

Here's a demo.

How to install

Just include the library into your HTML page:

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

How to use

Add some block element to your HTML and give it some ID:

<div id="stopwatch"></div>

Now create a StopWatch object using an ID as a parameter:

var stopWatch = new StopWatch("stopwatch");

That's it! Now your DOM was changed to the next structure:

<div id="stopwatch">
    <span class="days">00</span>
    <span class="hours">00</span>
    <span class="minutes">00</span>
    <span class="seconds">00</span>
    <span class="milliseconds">000</span>
</div>

And you can customize the appearance whatever you like using CSS.

Control

Method Description
stopWatch.start() Start a stopwatch.
stopWatch.pause() Pause a stopwatch.
stopWatch.stop() Stop a stopwatch.

Properties

Properties Description
stopWatch.milliseconds The value of the milliseconds part.
stopWatch.seconds The value of the seconds part.
stopWatch.minutes The value of the minutes part.
stopWatch.hours The value of the hours part.
stopWatch.days The value of the days part.
stopWatch.isRunning Set to true when a stopwatch is running.
stopWatch.isPaused Set to true when a stopwatch is paused.