«

Delayed Link Activation in JavaScript

Delayed Link Activation in JavaScript: Here we are provide you the how to create a download link with interval of time. It’s a very simple to make this, using some jquery function setInterval() and ClearInterval() given below step by step. Copy the source code and paste a html page, check how it s working.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
    <title>Delayed Link Activation</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<center>
<button type="button" onclick="DownloadFunction()" id="countdown" style="background-color: Crimson; font-family: verdana; font-size: 20px; color: white;cursor: pointer; padding: 12px 30px; border-radius: 30px; ">Download</button>
</center>
<center>
<a href="https://drive.google.com/file/d/1Pmlz-8aOLoFFP5MMifxZacRMUQ3UIMg6/view?usp=sharing" id="download_link" style="display: none;" target="_blank" rel="noopener"><button style="background-color: Crimson; border: none;  color: white; padding: 12px 30px; cursor: pointer; font-size: 20px; border-radius: 30px; ">Download Free</button></a></center>
<center><noscript>JavaScript needs to be enabled in order to be able to download.</noscript></center>
 
 
 
<script>
 
function DownloadFunction(){
 
   var message = "%d seconds before download link appears";
 
   // seconds before download link becomes visible
 
   var count = 15;
 
   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 download link
 
          download_link.style.display = "";
 
      }
 
   }, 1000);
 
}
 
</script>
 
</body>
</html>
 

 



«