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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book