ysCountDown.js – A simple and easy-to-use Countdown Script

ysCountDown

Create a simple and easy CountDown script using ysCountDown.js, a pure vanilla JavaScript library. It requires no single dependency and offers an extended Date/Time Support to create an exact CountDown Output. The script itself is also usable as AMD, UMD or nodeJS Module.

Download the latest version of ysCountDown.js as .ZIP or as .TAR package!

npm i yscountdown --save

yarn add yscountdown --save

Instructions

The package itself just contains the main JavaScript file, also in a minified version. The script doesn’t handle any HTML output or design setup. So the Visualization of the returning counter value is complete up to you!

 

Load ysCountDown.js

Just include the respective JavaScript file wherever you want, we recommend it to embed the file directly after the opened <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/yscountdown.min.js"></script>
    </body>
</html>

 

Configure ysCountDown.js

The script itself doesn’t offer any settings or configurations. It just comes up with an constructor, which allows the respective date (as “Date” instance or any string format, which is supported by the Date constructor) as first parameter. The second parameter is the respective callback function, where you can define the respective output.

document.addEventListener("DOMContentLoaded", {
    var countdown = new ysCountDown("2022/02/02", function(remaining, finished){
        if(finished){
            document.body.innerHTML = "Expired";
        } else {
            document.body.innerHTML = remaining.hours + "h " + remaining.minutes + "m " + remaining.seconds + "s";
            
            // Remaining Object
            /*
                remaining = {
                    seconds:        <integer>,
                    minutes:        <integer>,
                    hours:          <integer>,
                    days:           <integer>,
                    daysToWeek:     <integer>,
                    daysToMonth:    <integer>,
                    weeks:          <integer>,
                    weeksToMonth:   <integer>,
                    months:         <integer>,
                    monthsToYear:   <integer>,
                    years:          <integer>,
                    totalDays:      <integer>,
                    totalHours:     <integer>,
                    totalMinutes:   <integer>,
                    totalSeconds:   <integer>
                };
            */
        }
    });
    
});

 

Leave a Reply

Top