DevOps Central
how to create countdown script using javascript
how to create countdown script using javascript

How to Create a Countdown Timer Before Displaying Hyperlinks

August 22, 2014 /

Last updated on November 7th, 2024 at 12:59 pm

This HTML and JavaScript code creates a countdown timer that counts down from a specified time (in minutes and seconds) and then shows a link once the countdown reaches zero. The countdown is displayed in the browser, and when the countdown finishes, the message changes to indicate that the download link has been generated and the link is made visible.

HTML Structure

<html><body><title>CountDown Before Link Appears</title>
  • This defines the basic structure of the HTML page. It has a <title> element to set the browser tab title to “CountDown Before Link Appears.”

JavaScript Section

<script type="text/javascript">
  • This starts the JavaScript code block inside the <script> tags.

Declare Variables:

var minutes = 0;           // Initial minutes count
var seconds = 40;          // Initial seconds count
url = 'http://webtutorials.dev';  // URL for the download link
LINK_NAME = 'Webtutorials Website';  // Name of the link
  • minutes and seconds are initialized to 0 minutes and 40 seconds. These represent the countdown time.
  • url holds the target URL for the link that will be displayed after the countdown finishes.
  • LINK_NAME holds the name of the link that will be shown after the countdown.

Timer Setup:

var timer = setInterval(function() { myCounter(); }, 1000);
  • This line sets up a timer using setInterval(). The myCounter() function will be called every 1000 milliseconds (1 second), which means the countdown will be updated every second.

Countdown Function (myCounter):

function myCounter() {
    if (minutes > 59 || minutes < 0) {
        document.getElementById("time").innerHTML = "<font color='red'>Please check the minutes variable, Set it in between 0 to 59</font>";
    } else {
        seconds--;
        if (seconds == 0) {
            minutes = minutes - 1;
            seconds = 60;
        }
        document.getElementById("time").innerHTML = minutes + " Minutes " + seconds + " Seconds";

        if (minutes == -1) {
            clearTimeout(timer);
            document.getElementById("time").innerHTML = "Your Download Link Has Been Generated";
            document.getElementById("data").innerHTML = "<a target='_blank' href='" + url + "'>" + LINK_NAME + "</a>";
        }
    }
}
  • First Check: The function first checks if minutes is outside the valid range (0-59). If so, it displays an error message indicating that the minutes value should be between 0 and 59.
  • Countdown Logic:
    • The seconds variable is decremented by 1 every second.
    • If seconds reaches 0, it resets seconds to 60 and reduces minutes by 1 to update the countdown.
    • The countdown time (minutes and seconds) is displayed inside the <div id="time"> element in the format “X Minutes Y Seconds.”
  • When Countdown Finishes:
    • Once minutes reaches -1 (i.e., the countdown reaches zero), the timer is stopped by calling clearTimeout(timer).
    • The content of the time div is updated to indicate that the download link is ready: "Your Download Link Has Been Generated".
    • The content of the data div is updated with an anchor (<a>) element that points to the url with the link text LINK_NAME. This creates the clickable link.

HTML Body Content:

<center><h2><div id="data">Please wait for the link to be generated.<p></div>
<div id="time"></div></h2></center>
  • This part of the HTML contains two <div> elements:
    • The first one (id="data") initially shows the message "Please wait for the link to be generated."
    • The second one (id="time") will display the countdown timer (e.g., 0 Minutes 40 Seconds).
    The page uses the <center> tag to center the content on the page and <h2> for the heading style.

How It Works:

  1. Initial State:
    • When the page is loaded, the countdown starts from 0 Minutes 40 Seconds, and the message "Please wait for the link to be generated." is displayed.
  2. Countdown:
    • Every second, the myCounter() function decreases the seconds variable. When seconds reach zero, it subtracts one from minutes and resets seconds to 60.
    • The remaining time is updated in the time element, which will continuously show the countdown in “X Minutes Y Seconds” format.
  3. When Countdown Reaches Zero:
    • After 40 seconds (as per the initial value of seconds), the minutes value will reach -1, at which point the timer stops, and the message changes to "Your Download Link Has Been Generated".
    • The link to http://webtutorials.dev will be displayed in place of the countdown message.

Example of the User Experience:

  1. When the page loads:
    • The user sees the message: "Please wait for the link to be generated."
    • The countdown shows: 0 Minutes 40 Seconds.
  2. As time passes, the countdown reduces every second, e.g., 0 Minutes 39 Seconds, 0 Minutes 38 Seconds, and so on.
  3. When the countdown reaches 0 Minutes 0 Seconds, the message changes to "Your Download Link Has Been Generated", and a link to the URL (http://webtutorials.dev) appears with the text “Webtutorials Website.”
  4. The user can now click on the link to visit the specified URL.

Here is the complete code,

<html><body><title>CountDown Before Link Appears</title>
<script type="text/javascript">
//Script from webtutorials.dev Please support our website and please don't delete this line 
//declare variables
//Intial Minutes Count
var minutes =0;
//Intial Seconds Count
var seconds=40;
//URL Details
url='https://webtutorials.dev';
LINK_NAME='webtutorials.dev Website'
//Please dont edit anything below if you are not sure what you are doing
var timer=setInterval(function(){myCounter()},1000);
function myCounter()
{
  
if(minutes > 59 || minutes < 0)
{
document.getElementById("time").innerHTML="<font color='red'>Please check the minutes variable, Set it in between 0 to 59</font>";
}else
{
     seconds--;
     if(seconds==0)
        {
          minutes=minutes-1;
          seconds=60;
        }
     document.getElementById("time").innerHTML=minutes +" Minutes "+seconds+" Seconds";
         if(minutes==-1)
             {
               clearTimeout(timer);
               document.getElementById("time").innerHTML="Your Download Link Has Been Generated";
               document.getElementById("data").innerHTML="<a target='_blank' href='"+url+"'>"+link_name+"</a>";
                 
 }            }
}
</script>
<center><h2><div id="data">Please wait for the link to be generated.<p></div>
<div id="time"></div></h2>
</center></body></html>

Please find the demo below.
DEMO

Html, JavaScripts

6 Comments

  1. Akshay

    Broo I Need your help how to use this code in post i added this code directly in post but it wont work then i added it with some html plugin then it works but when i change +url+ to my url it wont work again please help me i need your help

    • admin (Post author)

      Hello Akshay,

      What is the error you are seeing? Please change the URL variable to lowercase url as shown below and then provide your own hyperlink.

      //URL Details
url='http://mistonline.in';
  2. Ashwani Garg

    hi,Thanks for this nice tutorials.
    I want to use “Countdown timer before displaying download link or hyperlink using javascript”, in my website.But it is not generating any link, it just outputs “time”element ,but not data element..I have not changed anything from your code.Please reply soon.
    Thanks.

    • admin (Post author)

      Please check the demo webpage. Try using the below code. This should work.

      <script>var minutes =0;
var seconds=40;
url='http://mistonline.in';
link_name='Mistonline.in Website'
var timer=setInterval(function(){myCounter()},1000);
function myCounter()
{

if(minutes > 59 || minutes < 0)
{
document.getElementById("time").innerHTML="<font color='red'>Please check the minutes variable, Set it in between 0 to 59</font>";
}else
{
     seconds--;
     if(seconds==0)
        {
          minutes=minutes-1;
          seconds=60;
        }
     document.getElementById("time").innerHTML=minutes +" Minutes "+seconds+" Seconds";
         if(minutes==-1)
             {
               clearTimeout(timer);
               document.getElementById("time").innerHTML="Your Download Link Has Been Generated";
			   document.getElementById("data").innerHTML="<a target='_blank' href='"+url+"'>"+link_name+"</a>";
 }            }
}
</script>
<center><h2><div id="data">Please wait for the link to be generated.<p></div><div id="time"></div>
  3. Dev Khandelwal

    Is this possible that given link web page open automatically after the given time is over?
    Please reply soon.

    • admin (Post author)

      You may try using window.location in javascript.

© 2025 DevOps Central

From Anders Noren — Up ↑