OSdata.com

example source code
timer functions in JavaScript

Beginner instructions and example code for setting a timer in JavaScript. You can use this to control animations and all kinds of other cool time based software.

Building a game — open source code This is the actual source code from a new web game. See the game at thissideofsanity.com and read how this was built starting at example code.

This is example code from the SlamZee project and This Side of Sanity, released under Apache License 2.0.

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

This narrative uses anchor links so that you can follow the building of this software in chronological order. Go to software explanation to start reading. Go to thissideofsanity.com to see the working software.

example source code
timer functions in JavaScript

We needed a count down timer for the SlamZee game. The source code shared here is the intial JavaScript just to make sure that we were using timer functions correctly. This, of course, makes it great for sharing with beginners, because there is no extra clutter.

This is example code from the SlamZee project, released under Apache License 2.0. You will find the entire source code for the project at example code.

function

This is the JavaScript function. It goes in the head area of your HTML file. This function will be called every hundredth of a second.

We declare some global variables to hold the current counts. These are declared outside the function so that they are attached to the window object and remain available at all times. There are more sophisticated methods for keeping track of this information (specifically, building an object and storing the information in the object). This method is very simple and straight-forward and easier to understand for beginners.

We declare the function. The name checktimedispatcher was chosen because in our working game version we will be using the function to dispatch other functions rather than directly manipulating the DOM.

We collect the current date/time and then localize it to the browser and then insert it into the appropriate tag. There is a later span tag with the ID of timerelement. The getElementById method of the document and element’s innerHTML method are used to change the clock in the web browser window.

And then we increment the counters for hundredths and tenths of seconds, seconds, minutes, and hours (since the web page was loaded). We use the same method for putting the info on the screen that we used for the clock.

Note that the builtin setInterval method keeps running once you start it. The first time I ever used this method I made the mistake of firing off another setInterval method. Chaos. The correct method is to fire it once and it keeps repeating over and over again until you use the clearInterval method. That means you need to save the unique ID returned by the setInterval method if you want to stop it. My approach is to simply set the timer for the fastest event I have and then use counters or flags to keep track of which different activities should be dispatched at any particular time.

Note also that in some browsers (including Firefox), the timer only runs once per second in an inactive tab. If this is a problem, you need to detect the correct elapsed time and adjust your software accordingly.

<script type="text/javascript">
<!--

/* global variables */
var hourcounter = 0;
var minutecounter = 0;
var secondcounter = 0;
var tenthsecondcounter = 0;
var hundredthsecondcounter = 0;

/* function declaration */
function checktimedispatcher() {

/* collect current date/time and localize */
var currentdate=new Date();
var currenttime= currentdate.toLocaleTimeString();
document.getElementById("timerelement").innerHTML= currenttime;

/* update the running timers */
hundredthsecondcounter = hundredthsecondcounter +1;
document.getElementById("hundredthelement").innerHTML= hundredthsecondcounter;
if ( (hundredthsecondcounter%10) == 0 ) {
  tenthsecondcounter = tenthsecondcounter +1;
  document.getElementById("tenthelement").innerHTML= tenthsecondcounter;
  if ( (tenthsecondcounter%10) == 0) {
    secondcounter = secondcounter + 1;
    document.getElementById("secondelement").innerHTML= secondcounter;
    if ( (secondcounter%60) == 0) {
      minutecounter = minutecounter + 1;
      document.getElementById("minuteelement").innerHTML= minutecounter;
      if ( (minutecounter%60) == 0) {
        hourcounter = hourcounter + 1;
        document.getElementById("hourelement").innerHTML= hourcounter;
      } /* END hour check */
    } /* END minute check */
  } /* END second check */
} /* END tenth second check */

} /* END FUNCTION checktimedispatcher */

//-->
</script>

launching the timer

In our case, we want the timer to keep running from the time the web page is loaded. So we start it up in an onload event in the body tag.

Note that the delay time is in milliseconds (1,000th of a second). So, our setting of 10 makes the timer function run every hundredth of a second (1/100).

<body text="#ffffff" bgcolor="#000000" onload="intervalhandle=window.setInterval(function() {checktimedispatcher() },10);">

display the clock and timers

The HTML for display is very simple. Just insert an id attribute on any tag (including div or span tags) and make sure that id matches the one decalred in the function.

<div style="width:320px;margin-left:auto;margin-right:auto;text-align:center;color:black;background-color:white">
<p align="center">TIME: <span id="timerelement">starting</span>
<br>HOURS: <span id="hourelement">0</span>
<br>MINUTES: <span id="minuteelement">0</span>
<br>SECONDS: <span id="secondelement">0</span>
<br>1/10th SECONDS: <span id="tenthelement">starting</span>
<br>1/100th SECONDS: <span id="hundredthelement">starting</span>
</p></div>

working code

And here is the code you just saw in its actual working version.

TIME: starting
HOURS: 0
MINUTES: 0
SECONDS: 0
1/10th SECONDS: starting
1/100th SECONDS: starting

return to explanation of source code

OSdata.com is used in more than 300 colleges and universities around the world

Find out how to get similar high web traffic and search engine placement.

OSdata.com is used in more than 300 colleges and universities around the world

Read details here.

Tweets by @osdata

A web site on dozens of operating systems simply can’t be maintained by one person. This is a cooperative effort. If you spot an error in fact, grammar, syntax, or spelling, or a broken link, or have additional information, commentary, or constructive criticism, please e-mail Milo. If you have any extra copies of docs, manuals, or other materials that can assist in accuracy and completeness, please send them to Milo, PO Box 1361, Tustin, CA, USA, 92781.

Click here for our privacy policy.