Javascript Simple Countdown Timer – YsCountDown.js

The “YsCountDown.js” is a pure Javascript simple countdown timer that shows days, hours, minutes and seconds. It is a tiny plugin that allows to quickly implement any kind of website.

It is a simple and easy-to-use countdown plugin. All you have to include one Js file.

This Javascript countdown timer is a simple and easy to use countdown timer plugin which is superbly easy to customize. You can customize the timmer by add or be removing the few lines of code.

• No need any plug-in – does not need any plugin or library.
• Easy to use – Choose a date and start using it.
• Extensile – Extended time support.

How to Use Javascript Simple Countdown Timer

Compiled and production-ready code can be found in the dist directory. The src directory contains a development code.

<script src="path/to/yscountdown.js"></script>

You can define a timer class and then place the unordered list inside it.

<div class="timer">
    <ul>
      <li><span id="days">0</span>days</li>
      <li><span id="hours">0</span>Hours</li>
      <li><span id="minutes">0</span>Minutes</li>
      <li><span id="seconds">0</span>Seconds</li>
    </ul>
</div>

In the footer or header of your page, initialize YsCountDown. And that’s it, you’re done. Nice work!

<script>
var daysElement = document.querySelector("#days");
var hoursElement = document.querySelector("#hours");
var minutesElement = document.querySelector("#minutes");
var secondsElement = document.querySelector("#seconds");
var containerElement = document.querySelector(".timmer");
var endDate = (new Date().getFullYear() + 1) + "/01/01";

var myCountDown = new ysCountDown(endDate, function (remaining, finished) {

  if (finished) {
	containerElement.textContent = "Expired";
  }

  daysElement.textContent = remaining.totalDays;
  hoursElement.textContent = remaining.hours;
  minutesElement.textContent = remaining.minutes;
  secondsElement.textContent = remaining.seconds;

});
</script>