javascript - 倒计时javascript后显示标签

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);
};

Fiddle演示