倒计时后显示标签

Question

我想在倒计时后显示<p id='download_link'>，在标签显示后隐藏<div id='countdown'>。

我尝试这样做，但隐藏和显示执行前倒计时去zero。

按钮启动倒计时

<center><a href='#download_link'><input class='btn btn-success' type='submit' value='Show Download Link' style='margin-bottom:10px' onclick='countdown(5)'></a></center>

js开始倒计时

$(document).ready(function(){
    $("input.btn").click(function(){
        $("div#countdown").show();
    });
});

这是我的js倒计时脚本

function countdown(remaining) {
    if(remaining === 0)
    return;
        $("p#download_link").show();
        $("div#countdown").hide();  
    document.getElementById('countdown').innerHTML = remaining;
    setTimeout(function(){ countdown(remaining - 1); }, 1000);
};

显示倒计时的代码和我希望在倒计时后显示的标记

<center><div id='countdown'></div><p id='download_link' style='display:none'>".$url_decode."</p></center>

Answer 1

在您的代码中，函数内部的return;是创建问题。

应该就像

function countdown(remaining) {
  document.getElementById('countdown').innerHTML = remaining;
  if (remaining === 0) {
    $("p#download_link").show();
    $("div#countdown").hide();
    return;
  }
  setTimeout(function() {
    countdown(remaining - 1);
  }, 1000);
};

小提琴演示