Bộ đếm thời gian cho một sự kiện nào đó dường như là một thứ không thể thiếu đối với cuộc sống của loài người ngày nay, chúng ta có thể bắt gặp các bộ đếm này khi gần đến ngày Giáng sinh, năm mới, ngày sinh nhật, kỉ niệm, ... hay đơn giản nhất trong cuộc sống đời thường là đồng hồ báo thức - một bộ đếm thời gian đơn giản nhất.

Đề tài bộ đếm thời gian cũng đã được giới thiệu nhiều trên jsB@nk thông qua các hiệu ứng JavaScript, các bài viết hướng dẫn như:

- Bộ đếm thời gian dạng thanh với jQuery
- Thêm 10 bộ đếm đến ngày Giáng sinh đẹp nhất
- Giải pháp OOP tạo bộ đếm ngược thời gian
- Bộ đếm thời gian giảm dần đẹp tuyệt vời

Hôm nay jsB@nk muốn giới thiệu với bạn thêm một giải pháp nữa để tạo bộ đếm thời gian, trong môi trường Flash và sử dụng ngôn ngữ ActionScript. Bạn vui lòng vào trang chi tiết để xem thêm.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

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.

• Mã nguồn
• In

• Lời bình (1)
• Viết

bởi muasamvui, 31/03/2011 07:03 PM
So great Phản hồi

it's like repidshare ... i am using it to creat download page and it's great than i think ! thanks for sharing !

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới