function dailyMissionTimer(duration) {
var timer = duration * 3600;
var hours, minutes, seconds;
var interval = setInterval(function(){
hours = parseInt(timer / 3600, 10);
minutes = parseInt(timer / 60 % 60, 10);
seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
$('#time-hour').text(hours);
$('#time-min').text(minutes);
$('#time-sec').text(seconds);
if (--timer < 0) {
timer = 0;
clearInterval(interval);
}
}, 1000);
}
dailyMissionTimer(24); // hour base
<span id="time-hour"></span>
<span id="time-min"></span>
<span id="time-sec"></span>
function countdown( elementName, minutes, seconds )
{
var element, endTime, hours, mins, msLeft, time;
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
function updateTimer()
{
msLeft = endTime - (+new Date);
if ( msLeft < 1000 ) {
element.innerHTML = "countdown's over!";
} else {
time = new Date( msLeft );
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
}
}
element = document.getElementById( elementName );
endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
updateTimer();
}
countdown( "countdown", 1, 5 );
countdown( "countdown2", 100, 0 );
<div id="countdown"></div>
<div id="countdown2"></div>
div {
color: #1B232F;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}