Start 10 sec countdown for Download Button


Hello friends! Today in this article we are going to talk about Start 10 sec countdown Button. And How to add the Start 10-sec countdown Button. We will know all these things in detail in this article. So stay with this article to know in more detail.


Start 10-sec countdown When I Click Button

Today, I have made some timer scripts available for you in this article. But the code that I had provided in this scripts. When you apply this script then the button was shown after the Countdown Timer was over. But now there are many friends who need that button script.

When the user gets anything to click the button then after clicking on the Button, the timer should show which you decide and then the button should show again, and then the user gets things which you provide. When I click on Button then Start people like HTML, CSS, JavaScript-like Countdown Timer.


Advance 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;
}
.wikitechlibrary{
    background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
    color: white;
}
</style>

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

<button id="btn" class="wikitechlibrary">Click to Get thing</button>

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

dButton.parentNode.replaceChild(newElement, dButton);

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

var clickbtn = document.getElementById("btn");
clickbtn.onclick = startD;
</script>


Steps to add Start 10-sec countdown Button

  • Go to your Blogger.com Dashboard
  • Click on Pages Section
  • Then Create a new Page
  • Click on the pencil icon and then click on HTML view
  • Copy the above code and paste it here.
  • Replace # with your link and if you want to change 10 sec to 15 sec time of downloading then replace 10 with 15.
  • Publish your page and copy the link of that page 
  • Paste this link on your post button.

Conclusion

You will get this add Start 10-sec countdown for Button and How to add Start 10-sec countdown for Button. You also want to give some kind of Suggestion, then you can share your opinion with us in the Comment Box below.



Post a Comment

Please do not enter any spam link in the comment box.