dark_mode

How to Add a Countdown Timer on links in HTML and JavaScript


Countdown Timer on links


Your link will appear in



                                                              
<!By GadTool>
<html>
<head>
<script>
var a=;
var x = setInterval(function() {
a=a-1;
document.getElementById("GadTool.blogspot.com").innerHTML= a+" seconds";
if(a<0){
document.getElementById("GadTool.blogspot.com").innerHTML= "";
document.getElementById("GadTool").innerHTML= "";
document.getElementById("GadTool_12").innerHTML= "Click here";
} }, 1000);
</script>
</head>
<body>
<span id="GadTool">Your link will appear in </span><span id="GadTool.blogspot.com"></span><!By GadTool><a href="" target="_blank"><span id="GadTool_12"></span></a>
</body>
</html>




➡️ Enter the time in seconds from which the timer countdown will start.
➡️ Enter link of the website that you want to provide.



Explaination

First of all, we have set the value of the variable   a   as the number of seconds we want timer to countdown after which the link will be displayed. Then, in order to reduce the value of variable   a   every second, we have added a setInterval() method in the JavaScript. We have made the method to repeat itself every 1000 milliseconds or 1 second. Inside the method we have added a statement reading   a=a-1  . This statement is added so that every time the method setInterval() repeats itself, the value of   a   gets reduced by 1. Hence the value of   a   gets reduced by 1 every second.
Then, we added an if statement bearing a conditon that if the value of   a   is less then 0, that is the countdown is over, then perform the following↴

1)Empty the contents of the   span   with the id as GadTool.blogspot.com.
2)Empty the contents of the   span   with the id as GadTool.
3)Replace the contents of the   span   with the id as GadTool_12 with text "Click here".

The link of the desired website is added subsequently in the   a   tag just before the   span   with the id as GadTool_12.
This makes the text "Click here" of the span a hyperlink.


Post a Comment

0 Comments

Translate