Author: Theodore Odeluga
The source files for this project can be downloaded from here
Here's a useful little widget. With a bit of modification it could be the timing device for competing in a browser game or perhaps (if you reverse the programming (decrementing the numeric values instead of incrementing them)) one of those countdown clocks for when tickets are available, or when the deadline of a special offer runs out.
It's a simple application, so let's build it as we walk through the code.
We'll first create its main folder, simply called 'app'.
Inside 'app', create 3 more folders - 'css','jquery' and 'js'.
Staying inside 'app' but outside the other folders, create an HTML file. Name it 'index.html' then copy and paste the code below, into it.
<!DOCTYPE html> <!--js--> <!--css--> </head> <body> </html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stopwatch</title>
<script src = "jquery/jquery.js"></script>
<script src = "js/stopwatch.js"></script>
<link rel="stylesheet" type="text/css" href="css/stopwatch.css" />
<div class = "display" id = "secondsdisplay"></div>
<div class = "display" id = "minutesdisplay"></div>
<div class = "display" id = "hoursdisplay"></div>
<button class = "control" id = "start"><Start></button>
<button class = "control" id = "stop"><Stop></button>
</body>
Once that's done, click save.
The interface for the stopwatch app is made up of just 5 elements. The hours, minutes and seconds displays (in that order) plus the two buttons to start and stop the mechanism. The last display (seconds) will start counting first, with the other time unit displays incrementing by 1, each time their respective units hit a count of 60, moving from the seconds, to the minutes and finally, to the hours.
The two buttons can either start (start) or stop (stop) the clock at any time. Back to the code.
There should be a copy of the jQuery library included in the project package. If not (my apologies), you can download the latest version of jQuery from the official website. Once you have a copy, place it in the 'jquery' folder where the app can reference the features of the library's functionality as required.
Open up the js folder and create a file simply named 'stopwatch.js'. Open it then copy and paste the following code into it.
let start = 0; function StopWatch(){ run = requestAnimationFrame(StopWatch); framecount++; if(seconds < 10){ if(minutes < 10){ if(hours < 10){ if(framecount > 60){ if(seconds > 60){ if(minutes > 60){ if(start == 1){ $(document).ready(function(){ $(document).ready(function(){
let run;
let stoprunning;
let seconds = 0;
let minutes = 0;
let hours = 0;
let framecount = 0;
let showseconds = document.getElementById("secondsdisplay");
let showminutes = document.getElementById("minutesdisplay");
let showhours = document.getElementById("hoursdisplay");
showseconds.innerHTML = '0' + seconds;
}
showminutes.innerHTML = '0' + minutes;
}
showhours.innerHTML = '0' + hours;
}
seconds++;
showseconds.innerHTML = seconds;
framecount = 0;
}
minutes++;
seconds = 0;
showminutes.innerHTML = minutes;
}
hours++;
minutes = 0;
showhours.innerHTML = hours;
}
}
run = requestAnimationFrame(StopWatch);
}
$("#start").on("click",function(event){
start = 1;
run = requestAnimationFrame(StopWatch);
});
});
$("#stop").on("click",function(event){
start = 0;
stoprunning = cancelAnimationFrame(run);
});
});
Save the file.
Following initialisation of the app's variables we find the start of the StopWatch() function definition.
This begins with a requestAnimationFrame object called 'run'. It has one parameter that recursively calls the container function.
Next, are 3 variables to store the time display objects. Using the document.getElementById() method, these variables are bound to those objects. Following this is the framecount variable which will start proceedings by counting 60 frames every second (similar to the framerate of a game) to generate each count of the seconds.
A condition shows a zero next to the seconds display to recreate the effect you see in digital clocks, where while a value is less than 10, a zero is placed in front of the single digit. The zero is removed once the value is 10 or over. Likewise, the same technique is used for the minutes and hours displays.
As mentioned, once the framerate hits 60, one second elapses and the variable is reset to zero to start the process all over again for second two, second three etc.
Similarly, once 60 seconds have been counted, a minute elapses and the minute counter is reset to restart the process. If you leave the clock running long enough, the same will happen with the hours count.
After this, a condition tests the start flag to ascertain if the clock is running. The start button fires the run object mentioned earlier and sets the flag to a value of 1. If the stop button is clicked, this stops the clock and it freezes at whichever time value it generated last.
The CSS code (see below, then copy and paste into 'stopwatch.css') just ensures that the digits of the displays are spaced apart enough to be readable with gaps between each time unit to differentiate them.
Told you it was simple.
.display {
font-weight:bold;
font-size:2.1vw;
}
#hoursdisplay {
position:absolute;
margin-top:1%;
margin-left:1%;
}
#minutesdisplay {
position:absolute;
margin-top:1%;
margin-left:6%;
}
#secondsdisplay {
position:absolute;
margin-top:1%;
margin-left:11%;
}
#start {
position:absolute;
margin-top:15%;
margin-left:1%;
}
#stop {
position:absolute;
margin-top:15%;
margin-left:5%;
}
Further Development
Our timing device could do with a bit more styling (bigger text perhaps, and centered). Also, it would be nice to have a reset button. These changes could be implemented without too much trouble. Another idea might be to develop the app into a full featured product, sitting permanently in the corner of your screen as you browse the web (ideas, ideas, ideas...they never stop). I hope you found the exercise useful in any case. See what you can come up with to extend it. Thanks for reading.