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

});​