check null values in JavaScript

“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,

<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!!
ANIL SINGH

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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.