Bộ đếm thời gian javascript

Hướng dẫn xây dựng bộ đếm thời gian với JavaScript căn bản.

Ứng dụng đồng hồ đếm thời gian

Hàm setTimeout được sử dụng để hiện thực. Hàm setTimeout khi được gọi sẽ chờ đợi trong một khoảng thời gian định trước và thực hiện hành động tiếp theo được đặc tả khi gọi hàm. Cú pháp của hàm như sau:

window.setTimeout[function, milliseconds];

function sẽ được gọi khi milliseconds trôi qua. Do đặc tính này, setTimeout có thể tạo ra 1 vòng lặp vô hạn giúp gọi lại 1 hàm xác định sau thời gian 1000 milliseconds. Kết hợp với việc thay đổi hiển thị của một thẻ div theo thời gian, tạo ra được một đồng hồ hiển thị thời gian đã trôi qua [time elapse].

Với vòng lặp vô hạn ở trên, chỉ số sẽ tăng mãi theo thời gian và không dừng lại. Để dừng vòng lặp, sử dụng hàm clearTimeout:

window.clearTimeout[timeoutVariable];

Có thể dùng setTimeout và clearTimeout để hiện thực đồng hồ tương tự như sau:

Source code có thể download ở phía cuối bài viết. Trong file js_tick_counter.js, đoạn code sau:

start : function[secs, timer_id]
{
	this.showTimer[secs, timer_id];

	this.a_secs = secs + a_countStepper;
	a_timer = setTimeout["projects.start[" + [this.a_secs] + "," + '"' + timer_id + '"' + "]", a_timeout_period];
},

stop : function[timer_id, project_id]
{
	clearTimeout[a_timer];
},

Hàm start sẽ được lặp liên tục sau chu kì 1s nhờ vào sự sắp xếp trong hàm setTimeout. Ngoài ra, khi hàm stop được gọi thì a_timer sẽ được dừng do đã được gán giá trị sau khi gọi hàm start.

Đồng bộ trạng thái của timer

Hướng dẫn trên chỉ hiện thực timer đơn giản, chưa thể đáp ứng được các nhu cầu nâng cao như lưu lại thời gian, giải quyết vấn đề timer vẫn hoạt động khi thoát trình duyệt. Để lưu lại thời gian thì cần có thêm các kiến thức về giao thức POST/GET trong PHP, thao tác và lưu trữ lại trong cơ sở dữ liệu.

Vấn đề đồng bộ trạng thái lại là 1 vấn đề khác thiên về giải thuật. Trạng thái cuối cùng của timer sẽ được lưu lại trong cơ sở dữ liệu [cách thức lưu trữ tôi không đề cập]. Từ đó, trong lần khởi động tiếp theo, hệ thống sẽ xác định được trạng thái trước đó và có hành động tương ứng. Sơ đồ sau sẽ minh hoạ một cách rõ ràng hơn:

Download code demo

STDIO_TimerDemo.zip

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

    
        Đồng hồ đếm ngược bằng JS
        
        
            span{border: solid 1px #ACACAC; padding: 2px;}
        
        

            var h = null; // Giờ
            var m = null; // Phút
            var s = null; // Giây
            
            var timeout = null; // Timeout
            
            function start[]
            {
                // Code
            }
            
            function stop[]{
                clearTimeout[timeout];
            }
        
    
    
        

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

    var h = null; // Giờ
    var m = null; // Phút
    var s = null; // Giây

    var timeout = null; // Timeout

    function start[]
    {
        // Code
    }

    function stop[]{
        clearTimeout[timeout];
    }

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