google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Xây dựng bộ đếm thời gian đơn giản với Flash và ActionScript 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.


Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

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

View Code ACTIONSCRIPT
/** 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.

View Code ACTIONSCRIPT
/** 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.

View Code ACTIONSCRIPT
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.

View Code ACTIONSCRIPT
// 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);

View Code ACTIONSCRIPT
/** 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.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web