jQuery;点击以显示html内容和倒计时，然后附加内容

Question

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

1. 显示链接，下载附件
2. 点击后，显示HTML内容下面
3. 当倒计时结束时，它显示了一个直接链路5秒倒计时。

我曾尝试下面的代码：

$("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将会停止，所以有四个不同点，您不确定订单是否合适。嵌套0​​，因为我显示更好。

$('#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/

Answer 2

查找到jQuery的show和hide和JavaScript的原生setTimeout。

Answer 3

function countdownfunction() { 
    $('#some_link').innerHTML = "5"; 
    $('#some_link').innerHTML = setTimeout("4",1000); 
    $('#some_link').innerHTML = setTimeout("3",1000); 
    $('#some_link').innerHTML = setTimeout("2",1000); 
    $('#some_link').innerHTML = setTimeout("1",1000); 

    $('#some_link').innerHTML = '<a href="newlink.php">download now</a>; 
}; 

$('#some_link').click(countdownfunction()); 

Answer 4

You could do something like this:

HTML：

<button>Download</button> 

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

CSS：

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

的jQuery：

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

});​