JP Countdown

Countdown library for GumGum creatives

Working example creatives can be found on the downloads-examples page.

CDN latest release:

• //cdn.justpremium.com/Justpremium/boilerplate/js/jp-countdown_1.0.1.js

Installation

• Include the script tag in your html file:

<script src="//cdn.justpremium.com/Justpremium/boilerplate/js/jp-countdown_1.0.1.js" charset="utf-8"></script>

Implementation

Create a new instance of JPCountdown, with the target HTML container and the end Date as the arguments. The only required parts of the HTML are text elements with class names prefixed with 'jp-countdown-'. This is where JPCountdown will put the time values. Days will be in .jp-countdown-days, hours in .jp-countdown-hours etc. Omiting any of these is fine, the ones it can find will be populated.

<div id="countdown-container">
    <div class="countdown-weeks">
        <p class="jp-countdown-weeks">-</p>
        <p class="units">weeks</p>
    </div>
    <div class="countdown-days">
        <p class="jp-countdown-days">-</p>
        <p class="units">days</p>
    </div>
    <div class="countdown-hours">
        <p class="jp-countdown-hours">-</p>
        <p class="units">hours</p>
    </div>
    <div class="countdown-minutes">
        <p class="jp-countdown-minutes">-</p>
        <p class="units">minutes</p>
    </div>
    <div class="countdown-seconds">
        <p class="jp-countdown-seconds">-</p>
        <p class="units">seconds</p>
    </div>
</div>

const jpCountdown = new JPCountdown("#countdown-container",new Date("Sept 04 2025 18:15"));

API

JPCountdown(target, endDate)

Constructor to create a new JPCountdown instance.

Parameter	Definition
target	HTML countdown display elements container required
endDate	Date object instance of the countdown end time required

const jpCountdown = new JPCountdown("#countdown-container",new Date("Sept 04 2025 18:15"));

start()

Starts the countdown.

 jpCountdown.start();

on(evt, func)

Registers JPParallax events with a function callback.

Parameter	Definition
event	event name required
func	function callback required

jpCountdown.on("update", function(timeInfo, totalSecondsLeft){
    // timeInfo is all time info at current time
    // totalSecondsLeft is total remaining seconds
})
jpCountdown.on("finished", function(timeInfo){
    // timeInfo is all time info at current time 
})

// timeInfo example: 
{wholeWeeks: 6, wholeDays: 3, wholeHours: 2, wholeMinutes: 47, wholeSeconds: 31}

Events

JPCountdown.Event_Update === "update";
JPCountdown.Event_Finished === "finished";

JPCountdown.updateView(target, timeInfo)

Static function to update the HTML element. Useful for syncing across panels.

JPCountdown.updateView("#countdown-container", timeInfo)