10 Second Countdown Download Button | Advance Download Timer Script

 10 Second Countdown When I Click Download Button | Advance Download Timer Script

Hello friends, welcome to the Droidnur123 tech blog. So today in this amazing article, we will know about the 10-sec countdown when I Click the Download Button. By the way, for your information, Advance Download Button Script is available. But this article is different. So keep watching this post till the last.

Also, Read 

3 Best Download Button With Timer

By the way, I have made some download timer scripts available earlier also. But the code that I had provided in those scripts. It used to show the download button only after the Countdown Timer was over. But now there are many friends who need advanced download button scripts.

That means in that script, after clicking on the Download Button, the timer will show them and then the Download button should show again. That is when I click on Download Button then Start people like HTML, CSS, JavaScript-like Countdown Timer.

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;
}
.dntech4u{
    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="dntech4u">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>

Demo

©Droidnur123

Go to Link