Tính thời gian người dùng online đơn giản với JavaScript

Xem demo

1. Mã JavaScript theo dõi thời gian online

Đoạn code dưới đây sẽ theo dõi người dùng có đang thực sự “active” trên tab hay không (tức là không bị ẩn), và đếm ngược đến khi họ đạt mốc 5 phút (300 giây).

let ruTimeout = parseInt(localStorage.getItem('ruTimeout') || 300, 10);
const ruInterval = setInterval(() => {
    if (ruTimeout >= 0 && !document.hidden) {
        if (ruTimeout === 0) {
            alert('Bạn đã online đủ 5 phút!');
        }
        if (ruTimeout <= 0) {
            clearInterval(ruInterval);
            return;
        }
        ruTimeout--;
        document.getElementById('ru-timeout').textContent = formatHMS(ruTimeout);
        localStorage.setItem('ruTimeout', ruTimeout);
    }
}, 1000);

// Hàm định dạng thời gian hh:mm:ss
function formatHMS(seconds) {
    const sec = parseInt(seconds, 10);
    const h = String(Math.floor(sec / 3600)).padStart(2, '0');
    const m = String(Math.floor((sec % 3600) / 60)).padStart(2, '0');
    const s = String(sec % 60).padStart(2, '0');
    return `${h}:${m}:${s}`;
}

2. HTML hiển thị thời gian đếm ngược

<div>Thời gian còn lại: <span id="ru-timeout">05:00</span></div>

3. Cách hoạt động

• Dùng Local Storage để lưu lại số giây còn lại – không bị reset khi chuyển trang
• Dùng !document.hidden để chỉ tính thời gian khi tab đang được hiển thị
• Thời gian được cập nhật mỗi giây, và khi đạt 0 thì kích hoạt hành động (ví dụ: hiển thị thông báo hoặc gửi sự kiện thưởng)

4. Gợi ý mở rộng

• Tăng giới hạn lên 10 phút, 30 phút, v.v. tùy vào mục đích sử dụng
• Kết hợp với hệ thống đăng nhập để ghi nhận vào user_meta
• Sử dụng để unlock huy hiệu, coin, hoặc hiển thị quà tặng sau khi online đủ lâu

Kết luận

Đây là một tiện ích nhỏ nhưng cực kỳ hữu dụng khi bạn cần tạo các tính năng liên quan đến gamification, thưởng cho user, hoặc đơn giản là đo lường mức độ tương tác thực sự của người dùng. Gọn nhẹ, không cần server, dễ tích hợp vào bất kỳ dự án nào.