How to Create a Countdown Timer using HTML, Javascript

If you have some knowledge of HTML, CSS, and JavaScript, you can create a custom countdown timer for your website or blog.

To create a countdown timer using HTML, JavaScript, and CSS, you can follow these steps:

HTML Structure: Create the HTML structure for your countdown timer. You’ll need a container for the timer display and optional controls like start, pause, and reset buttons.

CSS Styles: Add some basic styles to make your countdown timer visually appealing. You can customize this according to your preferences:

JavaScript Logic: Write the JavaScript code to create and manage the countdown timer.

Testing: Open the HTML file in your web browser, and you should see the countdown timer with start, pause, and reset buttons. Click the “Start” button to begin the countdown, “Pause” to pause it, and “Reset” to reset the timer.

You can customize the countdown duration and styling to fit your specific requirements.

Download Timer Button Code

<div style="text-align: center;"><a class="button" id="Count_Time">Download a file</a> </div>
 <div id="Stop_Timer" target="_blank">
  
   <!-- Add your content here to show after the timer finish -->
   <div style="text-align: center;">
<p>Click the Button Below to Download the File.<p/> 
 <a class="button" href="#" >Download</a> </div>

</div>

<style>
 Cnt-Timer{font-size:26px;opacity:.8;display:inline-flex;align-items:center}
 Cnt-Timer svg{width:26px; height:20px;}
</style>  
   <script>/*<![CDATA[*/
var counter = 30; // Add time here in seconds 
var id,downloadButton=document.getElementById("Stop_Timer"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Count_Time");clickbtn.onclick=startDownload;
/*]]>*/ </script> 

Download Timer Button Code

<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown">You have to wait 60 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Generating Download Link...</b><br />
<a class='button' href="#" target="_blank" id="download_link" style="display: none;">Download Now</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 60;
   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></div></div>