Multilingual Countdown Timer

Occasionally, a countdown timer is needed on a web page.

Perhaps a limited time to answer a question. Perhaps a timer to publish how soon a certain event happens. Perhaps an incentive to do something now instead of waiting for later.

The countdown timer presented in this article counts down with hours, minutes, and seconds. Thus, it is not suitable for events days in the future. For imminent events it can be exactly what you need.

The spelling of the words hours, minutes, and seconds may be in any language that can be used on web pages.

The amount of time left is updated within a div tag, a span tag, or other container tag (like p, td, pre). The container tag needs to have an id value. Format the container tag as you please. Here is an example with span container tag:

<p style="border:1px solid black; padding:5px;">
Only <span id="timeleft">15 minutes</span> left!
</p>

Replace "15 minutes" with the amount of time to start with. The JavaScript then updates the "15 minutes" with the amount of time left.

The time left is updated every second. When the amount of time left reaches 0 seconds, the timer stops.

If the computer is busy and one or more updates are delayed or abandoned, the correct time left is still determined whenever it is updated. A new current time value is obtained from the computer whenever the time left is calculated.

The Countdown Timer is JavaScript.

Here is a live demonstration. (The timer started at 15 minutes when this page was loaded.)

15 minutes are left of the original 15 minutes.

Two things are needed to implement the Multilingual Countdown Timer:

1. A place within which to publish the time left. That would be a container tag such as a div, span, td, or p. The container tag has an id value. Example:

   <span id="timeleft">15 minutes</span>
   
   

2. The JavaScript.

Go ahead and put the container tag on a test web page. The JavaScript for the page is below.

The JavaScript has 3 customization places, each clearly marked.

1. The amount of time to start with.

   The amount of time to start with can be specified as hours, minutes, or seconds. It may be a decimal number.

   To specify the amount of time to start with, specify first the number then a character. The character "h" represents hours. The "m" represents minutes. And "s" represents seconds.

   Here are examples:

   var StartWith = "45s";   /* 45 seconds */
   var StartWith = "5m";    /* 5 minutes */
   var StartWith = "2.5m";  /* 2-1/2 minutes */
   var StartWith = "90s";   /* 90 seconds, (equal to 1-1/2 minutes) */
   var StartWith = "1h";    /* 1 hour*/
   
   

2. Container tag id value.

   Specify the id value of the span, div, or other Container within which the time left will be published. Example:

   var ContainerID = "timeleft";
   
   

3. Preferred language.

   The JavaScript in this article has English spellings for singular and plural forms of hour, minute, and second.

   Alternate spellings may be specified, in any language that can be used on web pages.

Here is the JavaScript.

<script type="text/javascript">
/* 
   Countdown Timer
   Version 1.0
   April 25, 2011

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2011 Bontrager Connection, LLC

   This software is provided "AS IS," 
   without a warranty of any kind. 
   Bontrager Connection, LLC grants 
   you a royalty free license to use 
   or modify this software provided 
   this notice appears on all copies. 
*/

 ///////////////////////////
// Customization section //

// Three places to customize.
//
// Place 1 --
// Specify the amount of time to start with. Specify 
//   the number and then indicate whether it is number 
//   of seconds, minutes, or hours. Use "s" for seconds, 
//   "m" for minutes, and "h" for hours. Decimal numbers 
//   are OK. Examples:
//     var StartWith = "45s";   /* 45 seconds */
//     var StartWith = "5m";    /* 5 minutes */
//     var StartWith = "2.5m";  /* 2-1/2 minutes */
//     var StartWith = "90s";   /* 90 seconds, (equal to 1-1/2 minutes) */
//     var StartWith = "1h";    /* 1 hour*/

var StartWith = "15m";


// Place 2 --
// Specify the id value of the span, div, or other Container 
//   within which the time left will be published.

var ContainerID = "timeleft";


// Place 3 --
// Specify the spelling in your preferred language of the 
//   singular and plural forms of hour, minute, and second.

var HourSingular = "hour";
var HourPlural = "hours";
var MinuteSingular = "minute";
var MinutePlural = "minutes";;
var SecondSingular = "second";
var SecondPlural = "seconds";

 // End of customization section //
/////////////////////////////////
var Timer;
var EndMilliseconds = 0;
var Container = document.getElementById(ContainerID);

function EstablishStartValues() {
var tt = new Date();
EndMilliseconds = tt.getTime();
StartWith = StartWith.toLowerCase();
var ti = StartWith.replace(/[^\d\.]+/g,"");
switch( StartWith.replace(/[^hms]+/g,"") ) {
   case "s" : EndMilliseconds += (ti * 1000); break;
   case "m" : EndMilliseconds += (ti * 60 * 1000); break;
   case "h" : EndMilliseconds += (ti * 60 * 60 * 1000); break;
   default  : return false;
   }
return true;
}

function WriteTimeLeft() {
var tt = new Date();
var tm = tt.getTime();
var seconds = parseInt( (EndMilliseconds - tm) / 1000);
if( seconds < 1 ) { 
   Container.innerHTML = '0 seconds';
   clearInterval(Timer);
   // A JavaScript function call may go here.
   return;
   }
var minutes = 0;
var hours = 0;
var ti = 60 * 60;
if( seconds > ti ) {
   hours = parseInt(seconds / ti);
   seconds -= hours * ti;
   }
ti = 60;
if( seconds > ti ) {
   minutes = parseInt(seconds / ti);
   seconds -= minutes * ti;
   }
var timestring = new Array();
var s = new String();
if( hours > 0 ) {
   s = hours == 1 ? HourSingular : HourPlural;
   timestring.push( hours + " " + s );
}
if( hours > 0 || minutes > 0 ) {
   s = minutes == 1 ? MinuteSingular : MinutePlural;
   timestring.push( minutes + " " + s );
}
s = seconds == 1 ? SecondSingular : SecondPlural;
timestring.push( seconds + " " + s );
Container.innerHTML = timestring.join(", ");
}

if( EstablishStartValues() ) {
   WriteTimeLeft();
   Timer = setInterval("WriteTimeLeft()",1000);
   }
else { alert('Incorrectly specified "StartWith" value.'); }
</script>

Do the customizations. Then put the JavaScript into the web page source code somewhere below the container tag where the time left will be published.

With the time left text container tag and the JavaScript below the tag, the container tag will be updated every second or so with the amount of time left. When the amount of time left reaches 0 seconds, the timer stops.

The updating will begin as soon as the JavaScript is loaded.

For JavaScript Programmers

At line 84 of the above JavaScript source code is a place marked as:

// A JavaScript function call may go here.

That point in the code is reached when the timer has counted down to 0 seconds and the timer is stopped. To run a custom JavaScript function at that point, replace the above line with a call to the custom JavaScript function.

Will Bontrager