Quiero crear un botón de cuenta regresiva que muestre texto oculto después de cierto tiempo. Aquí está el código sobre la descarga de archivos después de 5 segundos.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> <title>Download Button With Timer</title> </head> <body> <div class="download-container"> <a href="#" class="download-btn"> <i class="fas fa-cloud-download-alt "></i> Download Now</a> <div class="countdown"></div> </div> <script type="text/javascript"> const downloadBtn = document.querySelector(".download-btn"); const countdown = document.querySelector(".countdown"); const pleaseWaitText = document.querySelector(".pleaseWait-text"); const manualDownloadText = document.querySelector(".manualDownload-text"); const manualDownloadLink = document.querySelector(".manualDownload-link"); var timeLeft = 5; downloadBtn.addEventListener("click", () => { downloadBtn.style.display = "none"; countdown.innerHTML = "Your download will start in <span>" + timeLeft + "</span> seconds." //for quick start of countdown var downloadTimer = setInterval(function timeCount() { timeLeft -= 1; countdown.innerHTML = "Your download will start in <span>" + timeLeft + "</span> seconds."; if(timeLeft <= 0){ clearInterval(downloadTimer); pleaseWaitText.style.display = "block"; let download_href = "Testfile.rar"; //enter the downlodable file link here window.location.href = download_href; manualDownloadLink.href = download_href; setTimeout(() => { pleaseWaitText.style.display = "none"; manualDownloadText.style.display = "block" }, 4000); } }, 1000); }); </script> </body> </html>Ahora quiero cambiarlo a un botón, que mostrará un texto después de 5 minutos y se puede poner en una publicación de WordPress, pero no sé cómo hacerlo. Por favor, ayúdame.
Aquí está el código para poner en wordpress, mostrará el texto después de hacer clic y esperar unos segundos. Pero no sé por qué no funciona.
Este código se utiliza para el botón.
<div id="references40" code-ref="ref51" countdown="8" style="text-align: center; font-weight: 600;"> BUTTON CHỈ HIỆN MẬT KHẨU KHI TÌM TỪ KHÓA "SHARE COOKIES NETFLIX" TRÊN GOOGLE </div>Este código se pone en el cuerpo de wordress
<script type = "text/javascript" > var referrer = document.referrer; ifm_list_browser = ['google.com', 'google.com.vn']; function checkFefer(f, e) { var i = 0; for (i = 0; i < e.length; i++) { if (f.indexOf(e[i]) > -1) return true; } return false; } let stores = { 'ref48': 'ký tự đặc biệt', 'ref49': 'các bạn có thể chèn số 122344', 'ref50': 'đây là demo vui vẻ', 'ref51': '343596', } var flagref = checkFefer(referrer, ifm_list_browser) if (flagref) { var html = '<p style="text-align:center;"><button style="background: #e81e1e;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;" id="countDown40" get-code="true" class="coundownmobile" onclick="startcountdown(); this.onclick=null;">Lấy mã bảo mật</button></p>'; jQuery(document).ready(function($) { $("#references40").empty(); html = $.parseHTML(html); $("#references40").append(html); }); } function startcountdown() { document.getElementById('countDown40').setAttribute("style", "background: #0b1df5;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;"); let cNode = jQuery("#references40"); let cKey = cNode.attr('code-ref'); let cCount = cNode.attr('countdown'); let counter = parseInt(cCount) || 40; var countdownCode = setInterval(function() { counter--; document.getElementById('countDown40').innerHTML = 'Mã bảo mật sẽ hiện sau ' + counter + ' giây' + ' bạn nhé'; if (counter == 0) { document.getElementById('countDown40').innerHTML = `Mã bảo mật của bạn là: ${stores[cKey]}`; document.getElementById('countDown40').setAttribute("style", "background: #ea3b7b;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;"); clearInterval(countdownCode); return false; } }, 1000); } </script>