按钮与等待计数器交互逻辑调整：点击触发计数后转a标签

架构老林

2026-8-13

实现调整方案

按照需求，我们要改成点击按钮后才启动倒计时，计数结束后将按钮转为可跳转的<a>标签，具体代码调整如下：

修改后的HTML

把原按钮内嵌套的<a>标签移除，保留纯按钮作为触发元素：

<button id="download">观看</button>

修改后的JavaScript

核心调整逻辑：

给按钮绑定点击事件，仅在点击后触发倒计时流程
倒计时结束后，直接创建<a>标签替换计时器元素，而非还原原按钮

var downloadButton = document.getElementById("download");
var counter = 10;
var timerElement = document.createElement("p");
var intervalId;

// 绑定按钮点击事件
downloadButton.addEventListener('click', function() {
    // 点击后将按钮替换为倒计时提示
    downloadButton.parentNode.replaceChild(timerElement, downloadButton);
    updateTimerText();
    
    // 启动每秒一次的倒计时
    intervalId = setInterval(function() {
        counter--;
        if (counter < 0) {
            // 倒计时结束，创建可跳转的a标签
            var linkElement = document.createElement("a");
            linkElement.href = "https://www.youtube.com/";
            linkElement.textContent = "观看";
            timerElement.parentNode.replaceChild(linkElement, timerElement);
            clearInterval(intervalId);
        } else {
            updateTimerText();
        }
    }, 1000);
});

// 封装倒计时文本更新逻辑，避免重复代码
function updateTimerText() {
    timerElement.innerHTML = `你可以在 ${counter} 秒后观看。`;
}