php - 查询；单击以显示 html 内容和倒计时，然后显示其他内容

Question

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

1. 显示下载附件的链接
2. 点击后显示html内容，下方有5秒倒计时
3. 倒计时结束后，会显示一个直接链接。

我试过下面的代码:

$("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);
  });
});

Answer 1

魔法函数呢？

说说@Bradley Foster 的回答，多次调用 setTimeout 是不靠谱的。如果您的浏览器滞后，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)
})

顺便说一句，在您的问题中，当您执行 $(function() {... 时，您实际上是在执行 $(document).ready(function() { ...。我想这不是你想要的:)

Jsfiddle 在这里:http://jsfiddle.net/Ralt/kTbcm/