Php jQuery；单击以显示html内容和倒计时，然后显示其他内容

我想在我的论坛上显示直接链接之前创建一个显示内容的链接

显示下载附件的链接

单击后，它会在下面5秒的倒计时中显示html内容

当倒计时结束时，显示直接链接

我尝试了以下代码：

$("button").click(function() { 
  $(function() {
    var count = 10; 
    countdown = setInterval(function() { 
      $("p.countdown").html(count + " seconds remaining!").show("slow"); 

      if (count == 0) { 
        $("p.new").show("slow");
      } 

      count--; 
    }, 1000);
  });
});

查看jQuery的and和JavaScript本机。

函数countdownformation（）{
$（“#某些链接”）.innerHTML=“5”；
$（'some#u link'）。innerHTML=setTimeout（“4”，1000）；
$（'some_link'）。innerHTML=setTimeout（“3”，1000）；
$（“#某些链接”）.innerHTML=setTimeout（“2”，1000）；
$（'some#u link'）。innerHTML=setTimeout（“1”，1000）；
$（“#某些链接”）.innerHTML=”；
};
$（“#某些链接”）。单击（倒计时函数（））；

魔法函数怎么样

谈到@Bradley Foster的回答，多次调用setTimeout是不可靠的<如果浏览器延迟，code>setTimeout将停止，因此有四种不同，您无法确定顺序是否正确。嵌套

setTimeout

，就像我在下面展示的那样，效果更好

$('#button').click(function() {
    var seconds = 5, // Declare some variables for reuse
        el = $('#some_link')
    el.text(seconds) // Put it a five!
    // Name your function so that you can call it later
    setTimeout(function countdown() {
        // Your countdown is already at 5, so decrement it
        // Remember that you've already waited for 1000ms before reaching this line the first time
        seconds--
        el.text(seconds) // Set the new time left
        // If the countdown is not over, recall this function after 1000ms
        if (seconds > 0) {
            setTimeout(countdown, 1000)
        }
        // If it is over, display the link
        // Note that js will stop there and not try to call itself another time as it would with setInterval()
        else {
            el.html('<a href="link">Download</a>')
        }
    }, 1000)
})

$（“#按钮”）。单击（函数（）{
var seconds=5，//声明一些变量以供重用
el=$（“#某些链接”）
el.text（秒）//打个5分！
//命名您的函数，以便以后可以调用它
setTimeout（函数倒计时（）{
//你的倒计时已经是5点了，所以减小它
//记住，在第一次到达这条线之前，您已经等待了1000毫秒
秒--
el.text（秒）//设置新的剩余时间
//如果倒计时未结束，请在1000毫秒后调用此功能
如果（秒>0）{
设置超时（倒计时，1000）
}
//如果结束，则显示链接
//请注意，js将停止在那里，而不会像setInterval（）那样尝试在另一次调用自己
否则{
el.html（“”）
}
}, 1000)
})

顺便说一句，在你的问题中，当你在做

$（function（）{…

）时，你实际上在做

$（document）.ready（function（）{…

。我想这不是你想要的：）

jshiddle这里：

HTML:

<button>Download</button>

<p class="countdown" />
<p class="link">
    <a href="www.stackoverflow.com">StackOverflow</a>
</p>​

p { display: none; padding: 50px; border: solid 1px black; }
p.countdown { color: red; font-size: 24px; }​

var $countdown = $("p.countdown"),
    $link = $("p.link"),
    $button = $("button");

$button.click(function() { 

    $countdown.hide(0);
    $link.hide(0);        

    var count = 10,
        countdown = setInterval(function() { 

           $countdown.html(count + " seconds remaining!").show("slow"); 

           if (count == 0) { 

               $countdown.hide(0);
               $link.show("slow");
               clearInterval(countdown);

           } 

           count--; 

       }, 1000);

});​

jQuery:

<button>Download</button>

<p class="countdown" />
<p class="link">
    <a href="www.stackoverflow.com">StackOverflow</a>
</p>​

p { display: none; padding: 50px; border: solid 1px black; }
p.countdown { color: red; font-size: 24px; }​

var $countdown = $("p.countdown"),
    $link = $("p.link"),
    $button = $("button");

$button.click(function() { 

    $countdown.hide(0);
    $link.hide(0);        

    var count = 10,
        countdown = setInterval(function() { 

           $countdown.html(count + " seconds remaining!").show("slow"); 

           if (count == 0) { 

               $countdown.hide(0);
               $link.show("slow");
               clearInterval(countdown);

           } 

           count--; 

       }, 1000);

});​

---

你也可以设置一个html示例吗？我使用的html似乎不适用。谢谢你的帮助！非常感谢。这非常有用。只有一个问题。我想显示其他内容（例如广告），并且内容在第1秒->后发生变化，因此我想知道是否可以将附加内容放入html或其他变量中？-1用于使用

setInterval

。这不可靠。请查看此极好的答案以检查原因：@FlorianMargaine-对不起，您是否阅读了自己的链接？他在自己的结论：“我会考虑一次性动画的间隔，我希望尽可能平滑，而链式超时对正在加载页面的动画来说更为礼貌。”OP的场景是一个一次性动画，应该尽可能平滑，setInterval符合要求。@FlorianMargaine-事实上，我想进一步声明，我总是更喜欢

setInterval（）

而不是

setTimeout（）

。试图在javascript中保持时间是不可靠的，而且每个浏览器的时间都会有所不同。在链接中，我更多的是指以下句子：

链接超时为浏览器提供了一个有保证的空闲时间；Interval尝试确保它正在运行的函数尽可能接近其预定时间执行，而以牺牲浏览量为代价er UI可用性。

我不喜欢使我客户的浏览器崩溃。@FlorianMargaine-同样，这是一个一次性的动画，不可能使他的客户的浏览器崩溃。这绝对不应该是一个否决票。