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演示

在倒计时javascript后显示标记

1 个答案: