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

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

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

Hello friends, welcome to the DNTech blog. So today in this amazing article, we will know about the 10 sec countdown when I Click 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.

By the way, I have made some download timer script 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 advance download button script.

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;
}
.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>

Demo

©Dn420