实现点击button1按钮后，倒计时结束再显示id为Watch的按钮

功能说明 #

• 初始状态下，id为Watch的按钮默认隐藏
• 点击class为button1的按钮后，显示倒计时提示并启动10秒倒计时
• 倒计时结束后，隐藏提示内容并显示Watch按钮

JavaScript 代码 #

function showWatchBtnAfterCountdown() {
    var seconds = 10;
    var countdownContainer = document.getElementById("countdownContainer");
    var countdownText = document.getElementById("countdownText");
    var watchBtn = document.getElementById("Watch");
    
    // 显示倒计时容器，初始化数值，确保按钮处于隐藏状态
    countdownContainer.style.display = "block";
    countdownText.innerHTML = seconds;
    watchBtn.style.display = "none";
    
    // 启动倒计时定时器
    setInterval(function () {
        seconds--;
        countdownText.innerHTML = seconds;
        if (seconds === 0) {
            // 倒计时结束，隐藏容器并显示目标按钮
            countdownContainer.style.display = "none";
            watchBtn.style.display = "block";
        }
    }, 1000);
}

HTML 代码 #

<button class="button1" onclick="showWatchBtnAfterCountdown()">继续</button>

<div id="countdownContainer" style="display:none">
倒计时结束后将显示按钮 <span id="countdownText"></span> 秒
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<button id="Watch" style="display:none">观看</button>

内容的提问来源于stack exchange，提问作者ramy ibrahim