将倒计时下载按钮更改为文本显示按钮答案

【问题标题】：Change Countdown Download button to text display button将倒计时下载按钮更改为文本显示按钮
【发布时间】：2021-12-10 03:48:48
【问题描述】：

我想创建一个倒计时按钮，它会在一定时间后显示隐藏的文本。下面是5秒后下载文件的代码。

<!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>

现在我想把它改成一个按钮，它会在 5 分钟后显示一个文本，并且可以放在 WordPress 帖子中，但我不知道该怎么做。请帮帮我。

【问题讨论】：

您正在尝试访问标记中不存在的元素，因此您遇到了错误。
你能告诉我更清楚吗？抱歉，我对代码 html 了解不多
在提供的代码中，您引用了 manualDownloadText 或 pleaseWaitText 等元素，但这些元素不会出现在 HTML 中，因此您的 Javascript 代码中会出现错误。
谢谢@Professor Abronsius，但我想创建一个倒计时按钮以在几秒钟后显示文本。例如：“点击获取您的代码”，点击并等待几秒钟后，用户将获得他们的代码。
如果您要准确描述应该发生的事情可能会有所帮助？

标签： javascript html wordpress

【解决方案1】：

这是放入wordpress的代码，点击后会显示文本并等待几秒钟。但我不知道为什么它不起作用。

此代码用于按钮

&lt;div id="references40" code-ref="ref51" countdown="8" style="text-align: center; font-weight: 600;"&gt; BUTTON CHỈ HIỆN MẬT KHẨU KHI TÌM TỪ KHÓA "SHARE COOKIES NETFLIX" TRÊN GOOGLE &lt;/div&gt;

这段代码放在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>

【讨论】：

这与原始问题中的代码没有任何相似之处
是的，但目的相同。我尝试了很多代码来创建一个具有倒数计时器并且可以更改文本的按钮。