Start 10 sec countdown When I Click Download Button | Advance Download Timer Script

Hello friends, welcome to the MANtek blog. So today in this amazing article we will know about the countdown of the start of 10 seconds when I click the download button. By the way, Advance Download Button Script is available for information. But this article is different. So keep this message to the last.  

Start 10 sec countdown When I Click Download Button

 

By the way, I have made some download timer scripts available even earlier. But the code I had given in those scenarios. The download button appeared only after the Counter Timer had finished. But now there are many friends who need the Pre-download button script.

This means that the timer should appear in the script after clicking the Download button and then the Download button should appear again. That is, when I click the Download button, people like HTML, CSS, JavaScript like Countdown Timer start.

Also Read :

 

Advance Download Button Script with Countdown Timer

<style>
.button {
    background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
    border: 1px solid black;
    color: white;
    font-family: Arial;
    font-size: small;
    text-decoration: none;
    padding: 3px;
}
.techly360{
    background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
    color: white;
}
</style>

<div style="text-align: center;">
<a href="#" id="download" class="button">Download File</a>

<button id="btn" class="techly360">Click to Download</button>

<script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "10 sec";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

function startDownload() {
    this.style.display = 'none';
    id = setInterval(function () {
        counter--;
        if (counter < 0) {
            newElement.parentNode.replaceChild(downloadButton, newElement);
            clearInterval(id);
        } else {
            newElement.innerHTML = +counter.toString() + " second.";
        }
    }, 1000);
};

var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
</script>
  
Conclusion - So guys how can you set a 10 second counter timer before download button link? How is the article Be a commentator and share your ideas and share the posts with your friends.