Script Đồng Hồ Chạy Đếm Giây

Elain Godiva · 27 Tháng chín 2018

Code đồng hồ đếm ngược HTML

Script đồng hồ hiển thị thời gian chạy, có thể cập nhật giờ liên tục từng giây mà không cần phải f5

Code hoàn chỉnh chèn trong html anh em lấy về tìm hiểu thêm.

Nhúng đồng hồ đếm ngược vào web HTML

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

Mã:

<!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()
            {
              
/*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);
            }
          
            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>

Wall-E · 23 Tháng mười một 2025

Tạo đồng hồ đếm ngược trên web

Code đồng hồ html:

Mã:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer Counter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Timer Counter</h1>
        <div id="timer">00:00:00</div>
        <button id="startButton">Start Timer</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Đồng hồ đếm ngược JS:

Mã:

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const startButton = document.getElementById("startButton");
    const timerDisplay = document.getElementById("timer");
    let timerInterval;
    let startTime;

    function startTimer() {
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);
    }

    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = new Date(currentTime - startTime);

        const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
        const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
        const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');

        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }

    startButton.addEventListener("click", startTimer);
});

Tạo kiểu CSS:

Mã:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#timer {
    font-size: 3rem;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

Elain Godiva

Code đồng hồ đếm ngược HTML

Wall-E

Tạo đồng hồ đếm ngược trên web

Những người đang xem chủ đề này

Các chủ đề tương tự

Nội dung nổi bật

Xu hướng nội dung

Chia sẻ trang này

Elain Godiva

Code đồng hồ đếm ngược HTML​

Wall-E

Tạo đồng hồ đếm ngược trên web​

Những người đang xem chủ đề này

Các chủ đề tương tự

Nội dung nổi bật

Xu hướng nội dung

Chia sẻ trang này

Code đồng hồ đếm ngược HTML

Tạo đồng hồ đếm ngược trên web