//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>
<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>
.nums{
color:#1AA855;
font-size: 48px;
}
.numSeperator
{
color:#F59E18;
}
</style>
No comments:
Post a Comment