Hướng dẫn thêm tính năng hiển thị code sau khi đếm ngược để hiển thị nội dung ẩn

Theo yêu cầu của bạn Quản trị viên từ nhận xét này

Em thấy có cách này để làm tăng thứ hạng từ khóa, như trên hình thì người tải cần nhập mã mới download được. Bác có hướng dẫn này không ạ? Cho em xin với

Giới thiệu

• Hiển thị 1 mã code 6 ký tự ngẫu nhiên cả số và chữ sau khi đếm ngược về 0 theo thời gian cài đặt
• Nhập đoạn mã code để hiển thị nội dung ẩn
• Nội dung ẩn sử dụng HTML nằm trong JS, có thể kết hợp với các công cụ mã hóa JS để bảo mật nội dung hơn

Demo

HTML để hiển thị đếm ngược và khung nhập mã

    <div id="countdown"></div>
    <div id="hidden-content" style="display: none;">
        <div id="hidden-text">Nhập code <span id="generated-code"></span> vào để download</div>
    </div>
    <div id="code-input">
        <input type="text" id="user-code" maxlength="6" autocomplete="off" placeholder="Nhập mã ở đây...">
        <button onclick="checkCode()">Download</button>
    </div>

JS

        document.getElementById('code-input').style.display = 'none';

        let countdown = 30;
        let countdownDisplay = document.getElementById('countdown');
        let countdownInterval = setInterval(() => {
            countdown--;
            countdownDisplay.innerText = `Bạn có thể xem nội dung ẩn sau ${countdown} giây`;
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                document.getElementById('hidden-content').style.display = 'block';
                document.getElementById('code-input').style.display = 'block';
                generateRandomCode();
            }
        }, 1000);

        function checkCode() {
            let userCode = document.getElementById('user-code').value;
            let generatedCode = document.getElementById('generated-code').innerText;
            if (userCode === generatedCode) {
                document.getElementById('hidden-text').innerHTML = "<a href='#chapitre-02' class='button'>Xem hướng dẫn</a>";
                document.getElementById('hidden-content').style.display = 'block';
                document.getElementById('code-input').style.display = 'none';
                document.getElementById('countdown').style.display = 'none';
            } else {
                alert('Mã không đúng! Hãy thử lại.');
            }
        }

        function generateRandomCode() {
            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let code = '';
            for (let i = 0; i < 6; i++) {
                code += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            document.getElementById('generated-code').innerText = code;
        }

Kết luận

Như vậy là đã đáp ứng đủ các tính năng theo yêu cầu, tuy nhiên để có một giao diện đẹp hơn thì anh em tự tùy chỉnh nhé