Countdown Timer can be very useful in our applications. There are lot of Countdown timer plugin on the web but in web development speed and size matters, using a third party plugin can be expansive in terms of size and libraries that need to be imported. But in this tutorial we are going to be using a simple JavaScript codes to countdown time as given to the timer function. It simple you can download the Source and try it.
Download Script
Live DemoLet see the JavaScript function that is reponsible for the countdown. The countdown time also change color when the time is less than 10 minutes and when the time is less than five minutes.
<script>
function timer(){
var countdown = document.getElementById('time');
var dur = countdown.getAttribute("duration");
var d1 = new Date(),d2 = new Date(d1);
var time = dur.match(/(\d+)(?::(\d\d))?\s*(p?)/);
d2.setHours( d1.getHours()+(parseInt(time[1]) + (time[3] ? 12 : 0)) );
d2.setMinutes( d1.getMinutes()+(parseInt(time[2]) || 0) );
var end = d2.getTime();
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
dur = distance; if (distance < 600000 && distance>300000){
countdown.style.color = "#F90";
}else{countdown.style.color = "#060";}
if (distance < 300000){ countdown.style.color = "#F00"; }
if (distance < 0 ) {
clearInterval( timer );
timeUp(countdown);
return; }
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
countdown.innerHTML = ''; dur = hours+":"+minutes+":"+seconds; countdown.innerHTML = "Time Left: ";
if (days) { countdown.innerHTML += 'Day(s): ' + days + '; '; }
if (hours) {
countdown.innerHTML += hours+ ' Hr.; '; }
countdown.innerHTML += minutes+ ' Min.; ';
countdown.innerHTML += seconds+' Sec.;'; }
timer = setInterval(showRemaining, 1000); }
</script>
function timer(){
var countdown = document.getElementById('time');
var dur = countdown.getAttribute("duration");
var d1 = new Date(),d2 = new Date(d1);
var time = dur.match(/(\d+)(?::(\d\d))?\s*(p?)/);
d2.setHours( d1.getHours()+(parseInt(time[1]) + (time[3] ? 12 : 0)) );
d2.setMinutes( d1.getMinutes()+(parseInt(time[2]) || 0) );
var end = d2.getTime();
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
dur = distance; if (distance < 600000 && distance>300000){
countdown.style.color = "#F90";
}else{countdown.style.color = "#060";}
if (distance < 300000){ countdown.style.color = "#F00"; }
if (distance < 0 ) {
clearInterval( timer );
timeUp(countdown);
return; }
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
countdown.innerHTML = ''; dur = hours+":"+minutes+":"+seconds; countdown.innerHTML = "Time Left: ";
if (days) { countdown.innerHTML += 'Day(s): ' + days + '; '; }
if (hours) {
countdown.innerHTML += hours+ ' Hr.; '; }
countdown.innerHTML += minutes+ ' Min.; ';
countdown.innerHTML += seconds+' Sec.;'; }
timer = setInterval(showRemaining, 1000); }
</script>
If the time is up you can put whatever you want to do in the Timeup function.
function timeUp(counter){
counter.innerHTML=" TIME UP!!!!!!!!";
}
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment