how to create simple countdown timer

1.  via javascript

HTML

<p>My count down</p>
<p id="demo"></p>


Java script

<script>
//declare variables
var hours =0;
var minutes =5;
var seconds=60;
var timer=setInterval(function(){myCounter()},1000);
function myCounter()
{
     seconds--;
     if(seconds==0)
        {
          minutes=minutes-1;
          seconds=60;
        }
     document.getElementById("demo").innerHTML=minutes +":"+seconds;
         if(minutes==0)
             {
               clearTimeout(timer);
               document.getElementById("demo").innerHTML="Time's Up!";
             }
}
</script>

demo timer

2.  via Jquery with progress bar

*add jquery reference

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
var hours =0;
var minutes =5;
var seconds=60;
var myprogressbar=100;

var timer=setInterval(function(){myCounter()},1000);
function myCounter()
{
     seconds--;
     if(seconds==0)
        {
          minutes=minutes-1;
          seconds=60;
        }
     $("#demo").text(minutes +":"+seconds);
     myprogressbar-=100/(minutes *60+seconds);

     $( "#progressbar" ).progressbar({
       value: myprogressbar
        });
         if(minutes==0)
             {
               clearTimeout(timer);
               $("demo").val("Time's Up!");
             }
}
</script>

HTML

<div id="progressbar"></div>
<p>My count down</p>
<p id="demo"></p>
 

you like the post buy me a coffee.