Creating an HTML5 Timer for a Web Page

What you will learn:

Prerequisites:

Required time:

1 hour or less

Notes

This will be a great project for anyone starting out in HTML5 who wants a simple and fun project to build. It’s a
ticking timer that we can put on a web page and can be used to trigger events. We will make sure it can function
on a smartphone browser, too.

If you just want to grab the source code without following the tutorial, then that’s fine, too.

* You can view a working example here and download the completed source
files here

html

Although you could use Dreamweaver or similar software, to create an HTML document, you don’t need any special software, you can simply use any text editor such as Textpad or Wordpad. Open your text editor and type:

Lines 2-7: The HEAD of the document references the external files that we will use:

- A CSS document, which we will create to control the look and feel of the page
- The JQUERY library, which adds functionality to the Javascript language. JQUERY is by far the most common
Javascript library used by web developers and has become pretty much a standard feature of any modern
site. You can download JQUERY from jquery.com or get it from the project files. You must rename it to
jquery.js and it must be in the same folder as our html file.
- Controller.js will hold the coding for our timer; we will write this shortly

Line 6 contains settings for how the page will look on a mobile device—to scale with the device width and the
user cannot zoom in and out.

Lines 8-11: The BODY of the document simply contains an empty container that we can reference with the ID
‘mainStage’. Everything else will be added to the page dynamically.
Save this document as ‘index.html’ and let’s continue.

CSS

As with our html document, you can use a simple text editor to create our CSS document:

Lines 1-6: We ensure there is no extra margin or padding on the page. We set the background color of the page to a nice emerald green and set the font to Arial with the alternatives Helvetica and sans-serif.

Lines 7-13: We want to set up a ‘stage’ where our activity will take place; this is a good technique to use for HTML games, too. The background will be white to contrast the green of the page. We set the width and height to 800px/400px so it will show up nicely on a tablet or small laptop. Line 11 ensures the stage is centred on the page and line 12 puts some spacing at the top of the page.

Lines 14-16: We will use this to add some space between the top of the stage and the beginning of the activity.

Lines 17-23: The clockOuter formatting will be applied to the container that holds our clock graphic. We want it to be 100px by 100px and centered relative to the stage. Line 22 is crucial; it means that anything held inside the container which ‘overflows’ its dimensions will be hidden from view. Later we will see how we use a ‘filmstrip’ style image to give the illusion of clock movement.

Lines 24-27: This formatting will be applied directly to our clock image. Line 25 is crucial because it will allow us to move the image by specifying absolute co-ordinates (relative to the parent container).

Lines 28-34: Below our graphic, we want to add a numerical timer with a large font.

Lines 35-37: These lines change the format as the screen width changes, so that we can control the look and feel on a smartphone screen. Remember that our mainStage element is 800 pixels wide, so if the screen size is less than 800 pixels, we will have a problem. Our solution: for screen widths less than 800px, the width will match the screen size. Since our other elements are quite narrow, this is all the reformatting we need for mobile.

Save this file as main.css. You can test now, by opening index.html in a browser. You should see a blank white square against a green background.

graphics

We will use a filmstrip or spritesheet technique where we simulate motion by changing the image shown to the viewer. Here I have a graphic that I prepared earlier (using Adobe Illustrator). The graphic is made up of eight individual clockfaces. Each clockface is 100 x 100 px - so that it will fit into our container. You can grab this image from the source files or you could create your own image. If you create your own, it must be 800 x 100 and each individual graphic must be 100 x 100 px. We save it under the name timer.png.

javascript

Fifteen lines of code is all we need to bring it together. Again, you can use a text editor if you wish:

1$(document).ready(function () {
2tick1=0;
3tick2=0;
4$('#mainStage').append('<div id="spacing"></div>');
5$('#mainStage').append('<div id="clockOuter"><img id="clockInner" src="timer.png"></div>');
6$('#mainStage').append('<div id="numericalDisplay">0</div>');
7clockVar= setInterval(function(){timeControl();},1000);
8function timeControl(){
9tick1++;
10if(tick1==8){tick1=0;tick2++;}
11$('#clockInner').css("left",[tick1*-100]+"px");
12$('#numericalDisplay').empty();
13$('#numericalDisplay').append(tick2);
14}//timercontrol
15});//doc ready

Lines 1 & 15: Everything within these lines will execute as soon as the page is fully loaded (the document is ready).

Lines 2-3: We’ll need two variables: tick1, which will tell track what segment of the clockface to show, and tick2, which will track the display for our numerical timer.

Lines 4-6: We can refer to any element which has an ID by using: $(‘#ID’). For instance, we can refer to the mainStage element by: $(’#mainStage’). Note: this assumes JQUERY is being used.
We can use the .append() function to add something to an existing element. Hence, over these three lines, we build up our page dynamically by adding the containers #spacing, #clockOuter and #numericalDisplay. We also add our image and give it the ID #clockInner.

Lines 7: We use the command setInterval() to execute a function at set intervals. The function we will run is named timeControl and we set the interval to 1000. The interval is measured in milliseconds, so 1000ms = 1 second.

Lines 8 - 14: This function will be executed every second.

First we increase the variable tick1. If tick1 reaches ‘8’, we reset it to 0 and we increase our numerical counter, tick2. Yes, this means we are using an 8-second timer. For a ten-second timer, for example, we need to reset at ‘10’ and we need to amend our timer.png image to show ten stages.

Next, we reposition our timer.png image relative to the left. The new position is (-100 x tick1). In other words, every interval, it moves to the left 100px and on the eighth tick, back to the starting position.

As for the numerical display, first we empty the old value (using .empty()) and then we add (append) the new value, which is tick2.

And that’s it! Save the javascript file as controller.js and test it out and see if it works.
If you’re still having trouble getting your head around how it works, try removing line 22 of the CSS (overflow:hidden;) and you will be able to see the ‘mechanics’ in action.

A final word: You can find more tutorials of this kind here: flashbynight.com/tutes. And please check out the games and stuff at flashbynight.com. If you like anything you see, please like it on Facebook or post it on Twitter or any other social media.

Happy Coding!