“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 [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!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2