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 [DAYS – HOURS – MINUTES - SECONDS]. You can see the result after click in the below mention demo link.
Stay Informed – Demo Link…
Try the “Live examples” of the code shown in this page.
Examples as,
<script> $(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); }); </script>
Live demo Example,
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="style.css" /> <style> 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; } </style> <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script> $(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); }); </script> </head> <body> <h1>Happy New Year!</h1> <div id="happyNewYear-div"> <div> <span class="days"></span><div class="smalltext">Days</div> </div> <div> <span class="hours"></span><div class="smalltext">Hours</div> </div> <div> <span class="minutes"></span><div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span><div class="smalltext">Seconds</div> </div> </div> </body> </html>
Result look like,
Stay Informed – Demo Link…
I hope you are enjoying with this post! Please share with you friends. Thank you!!