Chia sẽ code plugin tạo thời gian chờ tải cho nút download

https://webantam.com/code-tao-thoi-gian-cho-tai-cho-nut-download

Chia sẽ code plugin tạo thời gian chờ tải cho nút download

Nhập mã webantamgiam30% được giảm 30% khi đăng ký hosting hay vps tại inet.vn

Mục lục

Mở đầu viết gì nhỉ, thôi thì hôm nay mình sẽ chia sẽ code tạo thời gian chờ tải cho nút download, để các bạn có thể tham khảo xem code, sửa code, mình viết khá là clean… có plugin cho bạn cài vào nếu bạn không rành code

Ưu điểm

Tăng thời gian onsite cho website tốt cho seo
Phát hiện nếu người dùng chuyển sang cửa sổ khác sẽ ngừng nhảy giây
Tự động nhảy sang tab mới của link download khi hết số giây chờ

Video hướng dẫn

Chèn code vào funtion.php hoặc cài plugin do Web An Tâm phát triển

Cách 1: chèn code vào file funtion.php

các bạn chèn code sau vào file funtion.php của child theme và xóa cache đi nhé

// code tao thoi gian cho tai cho nut download webantam.com

// Thêm shortcode để gọi button download
function download_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'href' => '', // Không cần giá trị mặc định
            'text' => 'Tải ngay', // Giá trị mặc định của nội dung button
        ),
        $atts,
        'download_button'
    );

    ob_start();
    ?>
    
    <style>
        .download-btn button {
            border-radius: 99px;
            padding: 5px 30px 5px 30px;
            background: #1e7dff;
            color: white;
            border: none;
            cursor: pointer;
        }

        .download-btn button:hover {
            background: linear-gradient(270.5deg, #f79922 -.62%, #ff7a00 99.14%);
            border: 1px solid #3658d1;
        }
    </style>
    
    <div class="download-btn" style="text-align: center;">
        <button data-download-href="<?php echo esc_url($atts['href']); ?>"><?php echo esc_html($atts['text']); ?></button>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var countdownTimer;
            var timeLeft = 30; // Thời gian chờ trong giây
            var isWaiting = false; // Biến kiểm tra xem có đang chờ không
            var isActiveTab = true; // Biến kiểm tra xem tab có đang active không
            var hasRedirected = false; // Biến kiểm tra xem đã chuyển hướng chưa
            var hasCountdownStarted = false; // Biến kiểm tra xem đã bắt đầu đếm ngược hay chưa
            var originalButtonText = "<?php echo esc_html($atts['text']); ?>";
            var isDownloadButtonVisible = true; // Biến kiểm tra xem nút "Download" có hiển thị không

            // Function to start the countdown
            function startCountdown(button) {
                // Start the countdown
                countdownTimer = setInterval(function () {
                    timeLeft--;

                    // Display countdown on the button
                    button.innerHTML = "Bạn vui lòng chờ " + timeLeft + " giây";

                    if (timeLeft <= 0) {
                        clearInterval(countdownTimer);

                        // Perform the download here
                        var download_href = button.getAttribute('data-download-href');
                        if (isActiveTab && !hasRedirected) {
                            window.open(download_href, '_blank');
                            hasRedirected = true; // Đặt lại biến đã chuyển hướng
                        } else if (!hasRedirected) {
                            // Open link in a new tab/window
                            var newWindow = window.open(download_href, '_blank');
                            if (newWindow) {
                                newWindow.focus();
                                hasRedirected = true; // Đặt lại biến đã chuyển hướng
                            } else {
                                // Handle the case when the window couldn't be opened
                                alert('Popup blocked! Please allow popups to download.');
                            }
                        }

                        // You can update the UI as needed
                        button.innerHTML = originalButtonText; // Hiển thị lại nút download
                        isDownloadButtonVisible = true; // Đặt lại biến đã hiển thị nút download
                        isWaiting = false; // Reset biến khi đã hoàn thành quá trình chờ
                        timeLeft = 30; // Reset giá trị timeLeft
                        hasCountdownStarted = false; // Đặt lại biến đã bắt đầu đếm ngược
                    }
                }, 1000);
            }

            // Function to pause the countdown
            function pauseCountdown() {
                clearInterval(countdownTimer);
            }

            // Function to resume the countdown
            function resumeCountdown(button) {
                startCountdown(button);
                hasCountdownStarted = true; // Đặt biến đã bắt đầu đếm ngược
            }

            // Event listener for clicks on elements with class 'download-btn'
            var downloadButtons = document.querySelectorAll('.download-btn button');
            for (var i = 0; i < downloadButtons.length; i++) {
                downloadButtons[i].addEventListener('click', function (event) {
                    var button = event.target.closest('.download-btn button');
                    if (button && !isWaiting && !hasCountdownStarted && isDownloadButtonVisible) {
                        event.preventDefault(); // Ngăn chặn chuyển hướng mặc định của nút
                        isWaiting = true;
                        resumeCountdown(button);
                        isDownloadButtonVisible = false; // Đặt biến ẩn nút download
                        hasRedirected = false; // Reset biến đã chuyển hướng
                    }
                });
            }

            // Sự kiện khi thay đổi trạng thái của tab
            document.addEventListener('visibilitychange', function () {
                isActiveTab = !document.hidden;

                if (isActiveTab && countdownTimer && hasCountdownStarted) {
                    resumeCountdown(document.querySelector(".download-btn button"));
                } else {
                    pauseCountdown();
                }
            });

            // Initial setup to avoid automatic countdown when returning to the main tab
            if (!isActiveTab) {
                pauseCountdown();
            }
        });
    </script>
    <?php
    $output = ob_get_clean();
    return $output;
}
add_shortcode('download_button', 'download_button_shortcode');

// code tao thoi gian cho tai cho nut download webantam.com end

// code tao thoi gian cho tai cho nut download webantam.com

// Thêm shortcode để gọi button download

function download_button_shortcode($atts) {

$atts = shortcode_atts(

array(

'href' => '', // Không cần giá trị mặc định

'text' => 'Tải ngay', // Giá trị mặc định của nội dung button

$atts,

'download_button'

);

ob_start();

<style>

.download-btn button {

border-radius: 99px;

padding: 5px 30px 5px 30px;

background: #1e7dff;

color: white;

border: none;

cursor: pointer;

}

.download-btn button:hover {

background: linear-gradient(270.5deg, #f79922 -.62%, #ff7a00 99.14%);

border: 1px solid #3658d1;

}

</style>

</div>

document.addEventListener('DOMContentLoaded', function () {

var countdownTimer;

var timeLeft = 30; // Thời gian chờ trong giây

var isWaiting = false; // Biến kiểm tra xem có đang chờ không

var isActiveTab = true; // Biến kiểm tra xem tab có đang active không

var hasRedirected = false; // Biến kiểm tra xem đã chuyển hướng chưa

var hasCountdownStarted = false; // Biến kiểm tra xem đã bắt đầu đếm ngược hay chưa

var originalButtonText = "<?php echo esc_html($atts['text']); ?>";

var isDownloadButtonVisible = true; // Biến kiểm tra xem nút "Download" có hiển thị không

// Function to start the countdown

function startCountdown(button) {

// Start the countdown

countdownTimer = setInterval(function () {

timeLeft--;

// Display countdown on the button

button.innerHTML = "Bạn vui lòng chờ " + timeLeft + " giây";

if (timeLeft <= 0) {

clearInterval(countdownTimer);

// Perform the download here

var download_href = button.getAttribute('data-download-href');

if (isActiveTab && !hasRedirected) {

window.open(download_href, '_blank');

hasRedirected = true; // Đặt lại biến đã chuyển hướng

} else if (!hasRedirected) {

// Open link in a new tab/window

var newWindow = window.open(download_href, '_blank');

if (newWindow) {

newWindow.focus();

hasRedirected = true; // Đặt lại biến đã chuyển hướng

} else {

// Handle the case when the window couldn't be opened

alert('Popup blocked! Please allow popups to download.');

}

// You can update the UI as needed

button.innerHTML = originalButtonText; // Hiển thị lại nút download

isDownloadButtonVisible = true; // Đặt lại biến đã hiển thị nút download

isWaiting = false; // Reset biến khi đã hoàn thành quá trình chờ

timeLeft = 30; // Reset giá trị timeLeft

hasCountdownStarted = false; // Đặt lại biến đã bắt đầu đếm ngược

}

}, 1000);

}

// Function to pause the countdown

function pauseCountdown() {

clearInterval(countdownTimer);

}

// Function to resume the countdown

function resumeCountdown(button) {

startCountdown(button);

hasCountdownStarted = true; // Đặt biến đã bắt đầu đếm ngược

}

// Event listener for clicks on elements with class 'download-btn'

var downloadButtons = document.querySelectorAll('.download-btn button');

for (var i = 0; i < downloadButtons.length; i++) {

downloadButtons[i].addEventListener('click', function (event) {

var button = event.target.closest('.download-btn button');

if (button && !isWaiting && !hasCountdownStarted && isDownloadButtonVisible) {

event.preventDefault(); // Ngăn chặn chuyển hướng mặc định của nút

isWaiting = true;

resumeCountdown(button);

isDownloadButtonVisible = false; // Đặt biến ẩn nút download

hasRedirected = false; // Reset biến đã chuyển hướng

}

});

}

// Sự kiện khi thay đổi trạng thái của tab

document.addEventListener('visibilitychange', function () {

isActiveTab = !document.hidden;

if (isActiveTab && countdownTimer && hasCountdownStarted) {

resumeCountdown(document.querySelector(".download-btn button"));

} else {

pauseCountdown();

}

});

// Initial setup to avoid automatic countdown when returning to the main tab

if (!isActiveTab) {

pauseCountdown();

}

});

</script>

<?php

$output = ob_get_clean();

return $output;

}

add_shortcode('download_button', 'download_button_shortcode');

// code tao thoi gian cho tai cho nut download webantam.com end

view raw code tao thoi gian cho tai cho nut download webantam.com hosted with ❤ by GitHub

Cách 2: Cài plugin do Web An Tâm phát triển

TẢI NGAY

Nếu cài plugin thì bạn hãy sử dụng key 13726D05-E1BC3A91-21CF44D5-6DEF4E4D để kích hoạt mới sử dụng được plugin nhé ( xem hình minh họa bên dưới )

PreviousScroll animations! How to add a flowing path like the Lusion site with SVG and Javascript (ok)NextjQuery 1.9 .live,.delegate,.on is not a function (ok)

Last updated 5 months ago