javascript timer enable button with countdown


hello as we know javascript is very popular language in web-development field. because of javascript functions and javascript is client side script because of this javascript is more faster and very easy to write code.

-javascript is use to make dynamic webpages and this time dynamic website is popular and future of website is dynamic and designed website in trend.

Button is use to navigate the user to other page and this java script hold the user in current page for some time after time out user redirect to other page. this script help to hold user for showing ads and earn money


-as we shortly discuss about javascript lets move to the point as i know why you are here...

-lets make a webpage with the help of html,css and javascript , in this page we make 1 button , this button is clickable(enable) when given time is over, means when countdown is over then button is enable and take actions..

-in this article we design a simple web page with the help of javascript and make webpage like shorten links coundown pages...

-i worked hard on this so please give me credit in your site with backlink or share this with your circle.....

-follow steps carefully and spelling mistake are effect on countdown so be careful...lets start

******* javascript countdown button **********


-first you make simple webpage:
<html>
<head><title> javascript timer button niljadav</title></head>
<body>
           simple basic html document by Anil
</body>
</html>

-add button in your page
<button id="myBtn">click me</button>

-add on click event in button tag
<button onclick="countdown()"> 

note:- write button function name and javascript function is same otherwise function is not call..

-design yout button help of css 
lern top eye catchy css button design click link

-also design body and other attributes as per your need

 -lets add Javascript timer script for button
  • simple javascript block
               <script> </script>
  • declare varibles
                  var sec = 3; //you can set your countdown in seconds here
                  var myBtn = document.getElementById('myBtn');
                  window.onload = countDown; //this var is for countdown function call
  • lets make a function
                     function countdown()
                     {      }
  • type this code for countdown 
                       if (sec < 10) {
                       myTimer.innerHTML = "0" + sec;
                       } else {
                      myTimer.innerHTML = sec;                       
                      }
  • this code is for after countdown is over what action to do
                       if (sec <= 0) {
                       $("#myBtn").removeAttr("disabled");
                       $("#myBtn").removeClass().addClass("btnEnable");
                       $("#myTimer").fadeTo(2500, 0);
                       myBtn.innerHTML = "Click Me!";
                       return;
                       }
  •  add this for countdown count management 
                        sec -= 1;
                       window.setTimeout(countDown, 1000);

  •  and last add this link for js timer
       -add in head section
        <script src=""></script>

*********** javascript countdown timer code ************

-design you webpage as per your choice and add this code in last of article we provide a full example webpage you can download and edit as per your choice.


javascript timer enable button designed by Anil jadav so you can use this code and also give me a credit with add my website link in your site or wepage:- copyright link- https://www.niljadav.com/

output :-
www.niljadav.com Aniljadav

example code:-

<!DOCTYPE html>
<html >
<head>
    <title>Countdown Timer</title>
    <style>
 body
 {
     background-color: #616247FF;
   
 }
#wrapper {
  text-align:center;
  border:5px solid white;
  border-radius: 10px;
  width:150px;
  margin:25px auto;
  padding:25px;
  background-color:#FEE715FF;
}
#myTimer {
  font:64px Tahoma bold;
  padding:20px;
  display:block;
}
button {
  width:125px;
  padding:10px;
}
.btnEnable {
  background-color:#616247FF;
  border:3px solid white;
  border-radius: 8px;
  color:white;
  cursor:pointer;
}
.btnDisable {
  background-color:#616247FF;
  border:3px solid white;
  color:white;
  cursor:wait;
  border-radius: 8px;
}
#note
{
    color: white;
}
    </style>
    <script src=""></script>
</head>
<body >
<center>
    <h1>www.niljadav.com</h1>
<div id="wrapper">
  <div id="myTimer"></div>
  <button type="button" id="myBtn" class="btnDisable" disabled onclick="window.open('')">Please wait...</button>
</div>

<p id="note">wait until countdown is over <br> after you can click button</p>
</center>  

<script>
    var sec = 3;
    var myTimer = document.getElementById('myTimer');
    var myBtn = document.getElementById('myBtn');
    window.onload = countDown;

    function countDown()
    {
        if (sec < 10) {
            myTimer.innerHTML = "0" + sec;
        } else {
            myTimer.innerHTML = sec;
        }
        if (sec <= 0) {
            $("#myBtn").removeAttr("disabled");
            $("#myBtn").removeClass().addClass("btnEnable");
            $("#myTimer").fadeTo(2500, 0);
            myBtn.innerHTML = "Click Me!";
            return;
        }
        sec -= 1;
        window.setTimeout(countDown, 1000);
    }
</script>
</body>
</html>

Download Code

thanks for giving your time visit again and if this article helpful for you please share with your friends....

Anil jadav  www.niljadav.com