Solving:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
.simple-countdown-labels{
font-size: small;
text-align: center;
}
.simple-countdown-nums{
font-size: xx-large;
text-align: center;
}
.simple-countdown-cell{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
<table>
<tbody class="simple-countdown-nums">
<tr>
<td>
<span id="simple-countdown-days" class="simple-countdown-cell">00</span>
</td>
<td>
<span id="simple-countdown-hours" class="simple-countdown-cell">00</span>
</td>
<td>
<span id="simple-countdown-minutes" class="simple-countdown-cell">00</span>
</td>
<td>
<span id="simple-countdown-seconds" class="simple-countdown-cell">00</span>
</td>
</tr>
</tbody>
<tfoot class="simple-countdown-labels">
<tr>
<td>Days </td>
<td>Hours</td>
<td>Min </td>
<td>Sec </td>
</tr>
</tfoot>
</table>
<script type="text/javascript" >
function SimpleCountDown( from, to , daysId, hoursId, minId, secId ){
var from = Date.parse(from);
var to = Date.parse(to);
var interval = 0; //in milliseconds
var days = document.getElementById(daysId);
var hours = document.getElementById(hoursId);
var minutes = document.getElementById(minId);
var seconds = document.getElementById(secId);
var timer;
var self = this;
this.init = function( ){
interval = to - from ;
this.updateCountDown();
timer = setInterval( this.updateCountDown, 1000);
};
this.millisecondsToDaysHoursMinutesSeconds = function( milliSeconds ){
var milliseconds, days, hours, minutes, seconds;
if( milliSeconds > 0 ){
milliseconds = milliSeconds;
days = Math.floor( milliseconds / ( 24 * 60 * 60 * 1000 ) );
if ( days < 0 ) { days = 0; }
milliseconds -= days * 24 * 60 * 60 * 1000;
hours = Math.floor( milliseconds / ( 60 * 60 * 1000 ) );
if ( hours < 0 ) { hours = 0; }
milliseconds -= hours * 60 * 60 * 1000;
minutes = Math.floor( milliseconds / ( 60 * 1000 ) );
if ( minutes < 0 ) { minutes = 0; }
milliseconds -= minutes * 60 * 1000;
seconds = Math.floor( milliseconds / ( 1000 ) );
if ( seconds < 0 ) { seconds = 0; }
}else{
days = hours = minutes = seconds = 0;
}
var result = new Object;
result.days = days;
result.hours = hours;
result.minutes = minutes;
result.seconds = seconds;
return result;
};
this.updateCountDown = function(){
if( interval > 0 ){
interval = interval - 1000;
}else{
interval = 0;
}
var left = self.millisecondsToDaysHoursMinutesSeconds( interval );
days.innerHTML = left.days < 10 ? '0' + left.days : left.days;
hours.innerHTML = left.hours < 10 ? '0' + left.hours : left.hours;
minutes.innerHTML = left.minutes < 10 ? '0' + left.minutes : left.minutes;
seconds.innerHTML = left.seconds < 10 ? '0' + left.seconds : left.seconds;
};
};
var from = new Date();
var to = new Date();
to.setDate( to.getDate() + 2 );
var countdown = new SimpleCountDown(
from.toString()
, to.toString()
, 'simple-countdown-days'
, 'simple-countdown-hours'
, 'simple-countdown-minutes'
, 'simple-countdown-seconds'
);
countdown.init();
</script>
</body>
</html>
No comments:
Post a Comment