Đồng hồ đếm ngược javascript

Trong bài này mình sẽ hướng dẫn cách tạo đồng hồ đếm ngược trong javascript, qua đó bạn sẽ biết tạo được một ứng dụng đếm ngược thời gian cực kì đơn giản.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Chắc chắn bạn nào cũng từng sử dụng đồng hồ đếm ngược rồi phải không nào? Nhớ thời học cấp 3 mấy ông thầy dạy thể dục hay sử dụng để dạy môn chạy ngắn và chạy đường dài. Vậy bạn nghĩ có thể viết một chương trình hiển thị đồng hồ đếm ngược bằng Javascript không? Hoàn toàn có thể nhé các bạn, và trong bài này mình sẽ hướng dẫn bạn làm điều đó.

1. HTML hiển thị đồng hồ đếm ngược

Trước tiên bạn cần tạo một file tên là clock.html và nhập đoạn mã HTML tạo giao diện sau:

clock.html RUN

    
        
        
        
        
    
    
        

            
                Nhập thông tin ban đầu: 

            
             

             

            
            
              
 

        
        
        

            Giờ :
            Phút :
            Giây
        
    

Mình xây dựng giao diện khá đơn giản, vì đây chỉ là một bài hướng dẫn về javascript.

Bài viết này được đăng tại [free tuts .net]

Trong file này bạn cần chú ý tới những đoạn code sau:

Đây là đoạn code xử lý chạy đồng hồ.

Đây là đoạn code hiển thị form nhập thông tin.

    
        Nhập thông tin ban đầu: 

    
     

     

    
    
      
 

Đây là đoạn code hiển thị đồng hồ.

    Giờ :
    Phút :
    Giây

Chúng ta sẽ dựa vào ID của các thẻ HTML để truy xuất tới các phần tử (Xem bài DOM Element).

2. Sử dụng Javascript hiển thị đồng hồ đếm ngược

Nhiệm vụ bây giờ của chúng ta là code cho hàm start() ở phần Javascrpt.Bạn hãy bổ sung code cho hàm này như sau:

function start()
{
    /*BƯỚC 1: LẤY GIÁ TRỊ BAN ĐẦU*/
    if (h === null)
    {
        h = parseInt(document.getElementById('h_val').value);
        m = parseInt(document.getElementById('m_val').value);
        s = parseInt(document.getElementById('s_val').value);
    }

    /*BƯỚC 1: CHUYỂN ĐỔI DỮ LIỆU*/
    // Nếu số giây = -1 tức là đã chạy ngược hết số giây, lúc này:
    //  - giảm số phút xuống 1 đơn vị
    //  - thiết lập số giây lại 59
    if (s === -1){
        m -= 1;
        s = 59;
    }

    // Nếu số phút = -1 tức là đã chạy ngược hết số phút, lúc này:
    //  - giảm số giờ xuống 1 đơn vị
    //  - thiết lập số phút lại 59
    if (m === -1){
        h -= 1;
        m = 59;
    }

    // Nếu số giờ = -1 tức là đã hết giờ, lúc này:
    //  - Dừng chương trình
    if (h == -1){
        clearTimeout(timeout);
        alert('Hết giờ');
        return false;
    }

    /*BƯỚC 1: HIỂN THỊ ĐỒNG HỒ*/
    document.getElementById('h').innerText = h.toString();
    document.getElementById('m').innerText = m.toString();
    document.getElementById('s').innerText = s.toString();

    /*BƯỚC 1: GIẢM PHÚT XUỐNG 1 GIÂY VÀ GỌI LẠI SAU 1 GIÂY */
    timeout = setTimeout(function(){
        s--;
        start();
    }, 1000);
}

Qua các phần comment mình đã giải thích rất kỹ rồi.

3. Lời kết

Ứng dụng đếm ngược thời gian, hay còn gọi là đồng hồ đếm ngược rất là phổ biến. Sau này khi làm các ứng dụng tổ chức sự kiện khuyến mãi thì bạn đụng nó rất nhiều đấy.

Bài này khá thú vị và nó vận dụng khá nhiều kiến thức lập trình javascript căn bản, kết hợp với tư duy logic của bài toán để giải quyết vấn đề, Qua bài này hy vọng sẽ giúp bạn ngày càng nắm vững Javascript hơn nữa. Cuối cùng chúc bạn thành công.