Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

“Happy New Year” Count Down [JavaScript Code]

In this post, I am going to share the “JavaScript” code sample download link to get “Happy New Year!” Count down watch.

Actually, I am using a JavaScript functions to calculate and execute automatically your upcoming “NEW YEAR” Remaining times [DAYSHOURSMINUTES - SECONDS]. You can see the result after click in the below mention demo link.

Stay InformedDemo Link…

Try the “Live examples” of the code shown in this page.

Examples as,


$(function() {
var initializeWatchClock = function(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

var updateWatchClock = function() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total 0) {
clearInterval(interval);
}
}

//Update clock Watch!
updateWatchClock();
var interval = setInterval(updateWatchClock, 1000);
};

var getTimeRemaining = function(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));

return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
};

//Calculation for happy new year!
nextYear = new Date(new Date().getFullYear() + 1, 0, 1);
today = Date.parse(new Date());
newYearDay = new Date(nextYear);
remaningDT = newYearDay - today;
remanning = new Date(Date.parse(new Date()) + remaningDT);

initializeWatchClock('happyNewYear-div', remanning);
});


Live demo Example,





charset="utf-8" />

rel="stylesheet" href="style.css" />

body {
text-align: center;
font-family: sans-serif;
font-weight: 100;
}

h1 {
color: #20c1dd;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}

#happyNewYear-div {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}

#happyNewYear-div > div {
padding: 10px;
border-radius: 3px;
background: #5aa628;
display: inline-block;
}

#happyNewYear-div div > span {
padding: 15px;
border-radius: 3px;
background: #20c1dd;
display: inline-block;
}

.smalltext {
padding-top: 5px;
font-size: 16px;
}

"jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">

$(function() {
var initializeWatchClock = function(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

var updateWatchClock = function() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total 0) {
clearInterval(interval);
}
}

//Update clock Watch!
updateWatchClock();
var interval = setInterval(updateWatchClock, 1000);
};

var getTimeRemaining = function(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));

return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
};

//Calculation for happy new year!
nextYear = new Date(new Date().getFullYear() + 1, 0, 1);
today = Date.parse(new Date());
newYearDay = new Date(nextYear);
remaningDT = newYearDay - today;
remanning = new Date(Date.parse(new Date()) + remaningDT);

initializeWatchClock('happyNewYear-div', remanning);
});




Happy New Year!
id="happyNewYear-div">

class="days">
class="smalltext">Days



class="hours">
class="smalltext">Hours



class="minutes">
class="smalltext">Minutes



class="seconds">
class="smalltext">Seconds






Result look like,


Stay Informed – Demo Link…






I hope you are enjoying with this post! Please share with you friends. Thank you!!

Share the post

“Happy New Year” Count Down [JavaScript Code]

×

Subscribe to Angular 2 Javascript Asp.net C# Sql Server Knockoutjs Angularjs Kendo Ui Html 5 Web Api Wpf Wcf Etc.

Get updates delivered right to your inbox!

Thank you for your subscription

×