Hướng dẫn viết đồng hồ đếm ngược thời gian bằng Javascript

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
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.
-----------------------------------------------------------------------------