Countdown timer to unlock link

Discussion in 'Programming' started by Wulkanen, Sep 19, 2012.

  1. #1
    Hey there, I just wanted to ask if someone knew a simple way of hiding a hyper-link until a
    countdown timer reaches 0 seconds.

    The countdown timer will be used on a website of mine and should be counting down for about 45 seconds.
    I posted this in the general "programming" section because I don't know which programming language
    that works best for these things (I assume Javascript is the way to go).

    Thanks!
     
    Wulkanen, Sep 19, 2012 IP
  2. GMF

    GMF Well-Known Member

    Messages:
    855
    Likes Received:
    113
    Best Answers:
    19
    Trophy Points:
    145
    #2
    Found something via Google

    http://stackoverflow.com/questions/1123562/javascript-countdown-show-link
    http://forum.codecall.net/topic/51639-how-to-create-a-countdown-timer-in-javascript/
    http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer
    Code (markup):
    I hope that helps
     
    GMF, Sep 20, 2012 IP
  3. Wulkanen

    Wulkanen Well-Known Member

    Messages:
    2,429
    Likes Received:
    47
    Best Answers:
    3
    Trophy Points:
    175
    #3
    Thanks for the help, though I didn't get them to work properly.

    I did however find another code that worked for me:

    <span id="countdown"></span>
    <a id="download_link" href="http://www.google.com" style="display:none;">Continue</a>
    <noscript>JavaScript needs to be enabled in order to be able to continue.</noscript>
    <script type="application/javascript">
    (function(){
       var message = "%d seconds before you can continue";
       // seconds before link becomes visible
       var count = 20;
       var countdown_element = document.getElementById("countdown");
       var download_link = document.getElementById("download_link");
       var timer = setInterval(function(){
          // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
          if (count) {
              // display text
              countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
              // decrease counter
              count--;
          } else {
              // stop timer
              clearInterval(timer);
              // hide countdown
              countdown_element.style.display = "none";
              // show link
              download_link.style.display = "";
          }
       }, 1000);
    })();
    </script>
    
    Code (markup):
    Source: http://stackoverflow.com/a/5207031
     
    Wulkanen, Sep 20, 2012 IP