3

フォーラムに直接リンクを表示する前に、コンテンツを表示するリンクを作成したかったのです。

  1. 添付ファイルをダウンロードするためのリンクを表示
  2. クリックすると、以下の5秒のカウントダウンでHTMLコンテンツが表示されます
  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);
  });
});
4

4 に答える 4

2

魔法の関数はどうですか？

@Bradley Fosterの答えについて話すために、何度も電話をかけることsetTimeoutは信頼できません。setTimeoutブラウザが遅れると停止します。そのため、4つの異なる方法では、順序が正しいかどうかわかりません。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/

于 2012-04-04T12:16:58.207 に答える
1

あなたはこのようなことをすることができます：

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

});​
于 2012-04-04T12:33:02.097 に答える
0

jQueryの表示と非表示、およびJavaScriptのネイティブsetTimeoutを調べます。

于 2012-04-04T10:59:33.860 に答える
0 
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() );
于 2012-04-04T10:59:35.610 に答える