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.

test php

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

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

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

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

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Tạo đồng hồ đếm ngược trong Javascript

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

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

3. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Tạo đồng hồ đếm ngược trong Javascript

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

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

3. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript