ads

Wednesday, July 9, 2014

Countdown clock Sample with date diff

//html
<h1 >Countdown clock Sample</h1>
<h1 id="demo" ></h1>

//java script
<script>
//declare variables
var days,hours ,minutes ,seconds=60;

//set future date
var d1=new Date(2015,08,30); // Sep,31 2011
//set Time future
d1.setHours(23) ;//Set the hour (0-23) 
d1.setMinutes(59) ;//Set the minutes (0-59) 
d1.setSeconds(59) ;//Set the seconds (0-59) 


var d2=new Date(); // now

//calc diff date
var diff=d2-d1,sign=diff<0?-1:1,milliseconds,seconds,minutes,hours,days;
diff/=sign; // or diff=Math.abs(diff);
diff=(diff-(milliseconds=diff%1000))/1000;
diff=(diff-(seconds=diff%60))/60;
diff=(diff-(minutes=diff%60))/60;
days=(diff-(hours=diff%24))/24;

//inerval  each second
var timer=setInterval(function(){myCounter()},1000);
//interval function  
function myCounter()
{
     seconds--;
     if(seconds==0)
        {
          minutes=minutes-1;
          seconds=60;
        }
     document.getElementById("demo").innerHTML="<div class='nums'>"+days+" days<span class='numSeperator'>:</span >"+hours+" hours<span  class='numSeperator'>:</span>"+ minutes +" minutes <span class='numSeperator'>:</span >"+seconds+" seconds</div>";
         if(minutes==0)
             {
           hours =hours -1;
           minutes=59;
           seconds=60;

             }

     
     if(hours==0)
        {
          days=days-1;
           hours=23;
           minutes=59;
           seconds=60;
        }

         if(days==0&&hours==0&&minutes==0&&seconds==0)
             {

               clearTimeout(timer);
               document.getElementById("demo").innerHTML="00:00:00:00";
             }
}
</script>


//css
<style>
.nums{
color:#1AA855;
font-size: 48px;
}
.numSeperator
{
color:#F59E18;

}
</style>

Result ...

days:hours:58 minutes:20 seconds

No comments:

Post a Comment