CĂN BẢN
DOM & BOM
XỨ LÝ FORM
JAVASCRIPT TIPS
TUTORIALS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Tạo đồng hồ đếm ngược trong 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.

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

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

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
<!DOCTYPE html>
<html>
    <head>
        <title>Đồng hồ đếm ngược bằng JS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            span{border: solid 1px #ACACAC; padding: 2px;}
        </style>
        <script language="javascript">

            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);
            }
        </script>
    </head>
    <body>
        <div>
            <strong>
                Nhập thông tin ban đầu: <br/>
            </strong>
            <input type="text" id="h_val" placeholder="Giờ" value=""/> <br/>
            <input type="text" id="m_val" placeholder="Phút" value=""/> <br/>
            <input type="text" id="s_val" placeholder="Giây" value=""/>
            <input type="button" value="Start" onclick="start()"/>
            <input type="button" value="Stop" onclick="stop()"/>  <br/> <br/>
        </div>
        
        <div>
            <span id="h">Giờ</span> :
            <span id="m">Phút</span> :
            <span id="s">Giây</span>
        </div>
    </body>
</html>

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.

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

<script language="javascript">

    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);
    }
</script>

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

<div>
    <strong>
        Nhập thông tin ban đầu: <br/>
    </strong>
    <input type="text" id="h_val" placeholder="Giờ" value=""/> <br/>
    <input type="text" id="m_val" placeholder="Phút" value=""/> <br/>
    <input type="text" id="s_val" placeholder="Giây" value=""/>
    <input type="button" value="Start" onclick="start()"/>
    <input type="button" value="Stop" onclick="stop()"/>  <br/> <br/>
</div>

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

<div>
    <span id="h">Giờ</span> :
    <span id="m">Phút</span> :
    <span id="s">Giây</span>
</div>

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.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top