jQuery; Klicken Sie, um HTML-Inhalt und Countdown anzuzeigen, und dann zusätzlichen Inhalt

Question

Ich wollte einen Link erstellen, der Inhalt vor dem Anzeigen eines direkten Links in meinem Forum anzeigen würde.

1. anzeigen Link Befestigung
2. Nach einem Klick auf den Download starten, zeigt es HTML-Inhalt mit 5 Sekunden Countdown unter
3. Wenn Countdown beendet hat, es eine direkte Verbindung zeigt.

Ich habe den folgenden Code versucht:

$("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

Wie wäre es mit einer magischen Funktion?

Um über @Bradley Foster's Antwort zu sprechen, ist es nicht zuverlässig, mehrere Male zu rufen setTimeout. setTimeout stoppt, wenn Ihr Browser zurückbleibt. Sie sind sich also nicht sicher, ob die Bestellung richtig ist. Verschachteln der setTimeout, wie ich da unten zeige, ist besser.

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

Btw, in Frage, wenn Sie $(function() {... tun, bist du eigentlich $(document).ready(function() {... tun. Ich denke, das ist nicht das, was Sie :)

Jsfiddle hier wollte: http://jsfiddle.net/Ralt/kTbcm/

Answer 2

Blick in jQuery show und hide und JavaScript native 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); 

});​