Countdown timer for an event seems to be an indispensable thing in the modern life of human, we can see them in the holidays of Christmas, new year, birthday, etc. Or easily, we can see them daily in alarm clocks - the simplest countdown timers in our life.

The subject of countdown timers are also discussed much by JavaScript countdown timer scripts, JavaScript article tutorial such as:

- jQuery JavaScript Countdown Timer with Bar Display
- More 10 Awesome Countdown Timers to Christmas 2010
- JavaScript Countdown Timer solution in OOP
- Super Neat JavaScript Countdown Timer

Today, I would like to show you another JavaScript article tutorial for building a simple countdown timer in Flash environment with ActionScript. Please go to the full post page for detailed instructions.

• Demo
• Enlarge
• Reload
• New window

The Settings:
The first thing in our code is deciding if our timer is going to blink every second or not. Blinking gives the impressing of time passing and is easier to notice then just one or two numbers incrementing. Just set "blinking" to true or false

/** timer settings  ****************************************************************/
var blinking:Boolean = true;	// allow timers to blink every second
var osecs:Number = 0; 			//used to enable flashing

The Dates:
The countdown timer takes a future date and figures out how many days, hours, mins, and seconds from now until that date arrives. The next thing we need to do is enter in our future date for the timer to count to. To make things easy, the date is broken into year, month, day, hour, min, sec, and millisecond.

/** date settings  ****************************************************************/
// set the target date
var timeToYear:Number = 2012; 	// full year 2010

var timeToMonth:Number = 12; 	// month 1 - 12
var timeToDate:Number = 21; 	// date 1 - 31 depending on month

var timeToHour:Number = 0; 		// hour 0 - 23
var timeToMin:Number = 0; 		// min 0 - 59

var timeToSec:Number = 0; 		// sec 0 - 59
var timeToMilSec:Number = 0; 	// milliseconds 0 - 999

Dealing with Time-Zones:
Most timers need to sync across time-zones, this can be a pain, complicated by day-light savings. We only need to set a time-zone offset if our timer's target date based on a particular location and we wanted people from other locals to countdown at the exact same time. Say we have an event occurring in New York City, we want everyone in the world to know the exact time the event is going to occur. We will need to set "timeZone" to -5 for eastern standard time unless the date falls in the summer time, then we should use -4 for eastern daylight time.

var timeZone:Number =  0;	// time-zone offset - set this if the target time is time-zone based.

The Target Date vs. Todays Date:
After all the settings are made, it is time to setup our current date and compare it to a future date. Since we do not want our countdown timer to count if our target date has past, then we need to check for that. If the target date is not in the future we will reset all the values to 0 and stop the timer.

// gets todays date as Universal Time 
var today:Date = new Date(Date.UTC());

 
// sets the target date as Universal Time
var targDate:Date = new Date(Date.UTC(timeToYear,timeToMonth - 1,timeToDate,timeToHour,timeToMin,timeToSec,timeToMilSec));

 
// check to make sure target date is in the future
if(targDate < today){
	targDate = today;
}

The Magic:
Here is where all the magic happens. We create a new date on every frame, add the time-zone offset then compare it to the target date. The difference of the two dates is what we use to fill in the countdown clock. In this timer we are counting down by days, but we could modify it to count down years and months as well. When we compare dates, the value that is returned is in milliseconds, so we have to convert that very large number into our desired time increment.

var days:Number = ((((target date - current date) / 1000)/60)/60)/24;
This line of code takes the target date and subtracts the current date which returns the difference in milliseconds. To convert the difference into our base time we need to divide.

Here are some samples for converting different time increments from milliseconds to create out base time increment.

milliseconds
target date - current date

seconds
(target date - current date) / 1000

minutes
((target date - current date) / 1000)/60

hours
(((target date - current date) / 1000)/60)/60

days
((((target date - current date) / 1000)/60)/60)/24;

months (A)
getting this value is more complex, here is a rough, quick value.
((((((target date - current date) / 1000)/60)/60)/24)/365)*12

months (B)
for more exact values, we will need to get the difference in months using Date.getMonth().
1. get the years
var yearsTill:Number = ((((((target date - current date) / 1000)/60)/60)/24)/365);

2. get the difference in months
var monthsTill:Number = target date - current date .getMonth() - today.getMonth();

3. check if the amount of months is a negative number
if(monthsTill < 0){
    mulitply years by 12, then add the amount of months till the end of the year.
    trace((Math.floor(yearsTill) * 12) + (11 + monthsTill));
}
else{
    multiply years by 12, plus the difference in months.
    trace((Math.floor(yearsTill) * 12) + (monthsTill));
}

years
(((((target date - current date) / 1000)/60)/60)/24)/365

After we get a value for our base increment, we round it down (Math.floor()) and take the remainder to create all of the smaller increments. In the line below, we take the total days and subtract the days rounded down. This returns a percent of a day so we need to multiply it by 24 to get the total amount of hours. We will repeat this process, until we have reduced the remaining value into all of the smaller time increments.

hours = (total days - Math.floor(total days))*24;
minutes = (total hours - Math.floor(total hours))*60;
seconds = Math.floor((total minutes - Math.floor(total minutes))*60);

/** timer animation magic  ********************************************************/
// start on Enterframe event and handler only if target date is in the future
if(targDate > today){

	this.onEnterFrame = function(){
 
			// if target date is not in the future, stop counter.
			var dateArr:Date = new Date(Date.UTC());
			if(dateArr >= targDate){

				days.dyt.text = "000";
				hrs.hrt.text = "00";
				mins.mnt.text = "00";
				secs.sct.text = "00";

 
				delete this.onEnterFrame;
				return;
			}
 
			// set the hours and adjust if there is time-zone offset
			dateArr.setHours(dateArr.getHours() + timeZone);

 
			// DAYS - get the time difference in days
			var daysData:Number = ((((targDate - dateArr) / 1000)/60)/60)/24;
			// round down days

			var daysTill:Number = Math.floor(daysData);
 
			// HOURS - get the difference in hours

			var hoursData:Number = (daysData - Math.floor(daysData))*24;
			//round down hours

			var hoursTill:Number = Math.floor(hoursData);
 
			// MINUTES - get the difference in minutes

			var minsData:Number = (hoursData - Math.floor(hoursData))*60;
			// round down minutes

			var minsTill:Number = Math.floor(minsData);
 
			// SECONDS - get difference in seconds

			var secsTill:Number = Math.floor((minsData - Math.floor(minsData))*60);

 
			// do timer blinking every second (if enabled)
			var blinkThis:Boolean = false;
			if(secsTill != osecs){

				if(blinking){
					blinkThis = true;
				}
			}
			osecs = secsTill;

 
 
			// format days till number
			if(daysTill > 99){
				days.dyt.text = daysTill;
			}

			else if(daysTill > 9){
				days.dyt.text = "0" + daysTill;
			}

			else{
				days.dyt.text = "00" + daysTill;
			}
 

			// add timer info to the correct text fields
			if(!blinkThis){
				hoursTill < 10 ? hrs.hrt.text = "0" + hoursTill: hrs.hrt.text = hoursTill;
				minsTill < 10 ? mins.mnt.text = "0" + minsTill: mins.mnt.text = minsTill;
				secsTill < 10 ? secs.sct.text = "0" + secsTill: secs.sct.text = secsTill;
			}

			else{
				// handle blinking (if enabled)
				days.dyt.text = "";
				hrs.hrt.text = "";
				mins.mnt.text = "";
				secs.sct.text = "";
				blinkThis = false;
			}

	}
}

You can download a source FLA here.

• Code
• Print

• Comment (1)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New