Countdown for New year in JavaScript showing Days Hours Minutes & Seconds

Time left for New Year

Days : Hours : Minutes : Seconds

To test the script comment the line inside the function setting the variable dt2. This will add 10 seconds to current ( local time ) and start the count down. After 10 seconds Happy New Year message will be displayed.

DEMO : New Year Message after 10 Seconds

<html>
<head>
<title>Count down for New Year</title>

<script>
var dt= new Date();
//document.write(dt + "<br>")
// to test, use the below line by adding 10 seconds to current time //
dt2=new Date(dt.getFullYear(),dt.getMonth(),dt.getDate(),dt.getHours(),dt.getMinutes(),dt.getSeconds()+10,0)
//document.write(dt2 + "<br>")
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}

function display_ct() {
var dt= new Date();
// Un-comment this line for actual countdown, comment this line to test
dt2=new Date(dt.getFullYear()+1, 0,1,0,0,0,0);

var delta =(dt2 - dt) / 1000;
var days = parseInt(delta / 86400);
delta -= days * 86400;

// calculate (and subtract) whole hours
var hours = parseInt((delta / 3600) % 24);
delta -= hours * 3600;

// calculate (and subtract) whole minutes
var minutes = parseInt((delta / 60) % 60);
delta -= minutes * 60;

// Balance seconds 
var seconds = parseInt((delta % 60)); 

if(seconds >0 || minutes>0 || hours >0){
// add zero for single digit numbers ///
seconds = zeroFill(seconds,2)
hours=zeroFill(hours,2)
minutes=zeroFill(minutes,2)
days=zeroFill(days,2)
t_string=days + " : " + hours + " : " +  minutes + " : " + seconds
}else{
t_string='Happy New Year'	
}
document.getElementById('ct').innerHTML = t_string 
display_c();
}

// adding zeor to single digit numbers 
function zeroFill( number, width )
{
 width -= number.toString().length;
 if ( width > 0 )
{
 return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
}
 return number + ""; // always return a string
}
</script>
</head>

<body onload=display_ct();>
<h1 id='ct' ></h1>

</body>
</html>

Date Reference Showing Changing Clock

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com

▼ More on JavaScript Date