Hướng dẫn viết đồng hồ đếm ngược thời gian bằng Javascript
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (80.99 KB, 3 trang )
wWw.VipLam.Info
Hướng dẫn viết đồng hồ đếm ngược thời gian
bằng Javascript
Cuối năm hoặc tới một sự kiện nào đó, trên các phương tiện thông tin đại chúng
hay trên internet, bạn thường bắt gặp các dạng đồng hồ đếm ngược thời gian được chèn
vào làm tăng thêm thú vị và sự nô nức cho người xem. Bạn không hiểu chúng hoạt động
như thế nào vì đa số các ngôn ngữ lập trình đều có hỗ trợ các hàm thời gian mà các hàm
này thường là tính tới chứ không tính lùi. Vậy để tính được thời gian lùi như các trang
web kia đã làm thì bạn phải tạo một phép toán trừ cho tất cả các biến ngày, tháng, năm,
giờ, phút, giây. Chỉ cần lấy đỉnh ngày cuối cùng đến ngày ta mong đợi, trừ đi giờ hiện tại,
ta sẽ được thời gian phải chờ đợi. Ý tưởng chỉ là như vậy, bây giờ ta bắt đầu viết cụ thể
qua ví dụ "Đồng hồ chờ ngày Noel bằng Javascript".
Trong bài viết này, mình cố gắng mô tả và dùng các từ ngữ sao cho các bạn chưa
biết nhiều về Javascript cũng có thể tự viết cho mình một đồng hồ theo ý thích. Dù biết
rằng thuật toán và mã nguồn chưa hẳn là tối ưu nhưng mong rằng mình đã đem đến cho
các bạn một ý tưởng tốt để chúng ta cùng chia sẽ và phát triển nó.
Trong Javascript, có hàm lấy giá trị ngày giờ hiện tại là "new Date()". Ta lấy giá
trị này gán cho một biến (là một từ, số ký tự chọn nào đấy). Ở đây mình chọn là "bien".
Sau khi "bien" đã có giá trị thì việc lấy các giá trị ngày, tháng, năm... chỉ thông qua giá trị
"bien." (có dấu chấm).
var bien = new Date();
var nam = bien.getYear();
var thang = bien.getMonth() + 1;
var ngay = bien.getDate();
var gio = bien.getHours();
var phut = bien.getMinutes();
var giay = bien.getSeconds();
var homnay = bien.getDay();
Đặt tất cả các giá trị này trong một hàm "chỉ giờ" và khởi tạo thời gian thực hiện
là 1 giây, tương đương với số 1000.
giohienhanh = setTimeout("chigio()",1000);
Nhưng đến đây thì đồng hồ chỉ đếm được 1 giây thì ngừng lại, muốn cho chúng
đếm liên tục, ta phải tạo cờ chạy giờ "chaygio" với hai giá trị "true" và "false". Nếu cờ
"chaygio" là đúng thì xóa giá trị giờ hiện hành và trở về giá trị sai, để sau khi xét thấy
"chaygio" sai thì hàm "chigio" được gọi lại để cập nhật thời gian hiện tại rồi lại tiếp tục
đổi "chigio" thành đúng. Giống như trò chơi bập bênh, giả sử khi xuống thấp là "false" thì
khi lên là "true", người bên này xuống sẽ có lực tác động để người bên kia lên và ngược
lại, cứ như thế đồng hồ sẽ đếm với thời gian 1 giây.
Bây giờ, để in ra màn hình, ta có thể dùng hàm "document.write()" .Nhưng ở đây,
để cho đẹp hơn và không ảnh hưởng đến bố cục trang web, mình cho hiện lên thanh
"status bar". Các giá trị đảo ngược chỉ thực hiện qua phép trừ là xong.
var in_ra = ""; //Giá trị rỗng
wWw.VipLam.Info
in_ra += ('Co`n ');
in_ra +=(24-ngay + " nga`y ");//Sua so 24 thanh 30 neu ban muon cho nam moi
in_ra +=(24-gio)+(' gio ');
in_ra += (60-phut) +(' phut ');
in_ra += (60-giay) + (' giay nua la toi Noel');
window.status = in_ra;
Cuối cùng, tạo hàm điều khiển (chương trình chính).
function chay()
{
ngung();
chigio()
}
Với hàm "ngung()" (ngưng) xóa giờ hiện hành và trả "chaygio = false" và hàm
"chigio" có tác dụng ngược lại như đã nói ở trên.
Dưới đây là toàn bộ mã nguồn mình đã viết, đồng hồ chỉ dùng nội trong 1 tháng
có sự kiện xảy ra nên không dùng đến các biến năm, tháng, thứ trong tuần nhưng mình
vẫn chèn thêm vào cho các bạn tham khảo và phát triển tiếp theo ý thích của mình.
----------------------------------------------------------------------------<html>
<head>
<title>Merry Christmas</title>
<script language="Javascript">
var chaygio = false
function ngung()
{
if(chaygio)
clearTimeout(giohienhanh);
chaygio = false
}
function chigio() {
var bien = new Date();
//var nam = bien.getYear();
//var thang = bien.getMonth() + 1;
var ngay = bien.getDate();
var gio = bien.getHours();
var phut = bien.getMinutes();
var giay = bien.getSeconds();
//var homnay = bien.getDay();
var in_ra = "";
in_ra += ('Co`n ');
in_ra +=(24-ngay + " nga`y ");//Sua so 24 thanh 30 neu ban muon cho nam moi
in_ra +=(24-gio)+(' gio ');
in_ra += (60-phut) +(' phut ');
in_ra += (60-giay) + (' giay nua la toi Noel');
wWw.VipLam.Info
window.status = in_ra;
giohienhanh = setTimeout("chigio()",1000);
chaygio = true
}
function chay() {
ngung();
chigio()
}
//-->
</script>
</head>
<body>
<body onload="chay()">
<font color ="blue" face="Tahoma">Dong ho dem nguoc thoi
gian</font>
<font size="5" face="Tahoma">Hãy xem
giờ!</font>
</body>
</html>
----------------------------------------------------------------------------Các bạn có thể copy toàn bộ mã nguồn bên trên, past vào "Notepad", sau đó lưu
lại với đuôi *.htm sẽ được trang web có hình như sau.
Mọi thắc mắc, góp ý xin các bạn gởi về địa chỉ email:
Chúc thành công!
------oOo-----Lê Văn Hà
Email:
Website: o
