Init HTML

Xem demo

Để làm được điều này, chúng ta đơn giản chỉ cần sử dụng Local Storage để lưu trữ thời gian online của người dùng và điều kiện !document.hidden để kiểm tra người dùng có đang xem web của bạn hay không.

Với phương pháp này, người dùng có thể chuyển trang thoải mái trên web của bạn mà thời gian online vẫn được tính một cách chính xác. Ví dụ dưới đây sẽ trả về sự kiện khi người dùng online đủ 5 phút, với 300 là số giây.

var ruTimeout = localStorage.getItem('ruTimeout') || 300;
var ruT = setInterval(function() {
    if (ruTimeout >= 0 && !document.hidden) {
        if (ruTimeout == 0) {
            // Sự kiện khi đã online đủ
            alert('Bạn đã online đủ 5 phút!');
        }
        if (ruTimeout <= 0) clearInterval(ruT);
        if (ruTimeout > 0) ruTimeout--;
        $('#ru-timeout').html(convertHMS(ruTimeout));
        localStorage.setItem('ruTimeout', ruTimeout);
    }
}, 1000);

// Định dạng thời gian thành hh:mm:ss
function convertHMS(value) {
    const sec = parseInt(value, 10);
    let hours   = Math.floor(sec / 3600);
    let minutes = Math.floor((sec - (hours * 3600)) / 60);
    let seconds = sec - (hours * 3600) - (minutes * 60);
    if (hours   < 10) { hours   = "0" + hours; }
    if (minutes < 10) { minutes = "0" + minutes; }
    if (seconds < 10) { seconds = "0" + seconds; }
    return hours + ':' + minutes + ':' + seconds;
}

Chúc các bạn thành công!