Custom Countdown Timer jQuery Plugin

April 19, 2018September 6, 2018 Harinder Singh

Create Countdown with jQuery with adding simple custom code. In this example you can add custom date to set countdown. Change the structure of timer as your requirement. I have create two functions to calculate the timer. jQuery, HTML and CSS used to create it.

HTML Structure:

<div class="text-center" >
      <p id="Countdown"></p>
      <h2>Time Left to Celebration New Year</h2>
</div>

<h2>Time Left to Celebration New Year</h2>

</div>

CSS:

#Countdown
    	{
    	    font-size: 30px;
    		font-weight: 900;
		    width: 70%;
		    margin: auto;
		    padding: 11px;
		    background-color: #4e4e4e;
		    color: #fff;
    	}

#Countdown

{

font-size: 30px;

font-weight: 900;

width: 70%;

margin: auto;

padding: 11px;

background-color: #4e4e4e;

color: #fff;

}

jQuery:

var NewDate = new Date('12/31/2018');
var month = parseInt(NewDate.getMonth() + 1);
var year = NewDate.getFullYear();
var endday = parseInt(NewDate.getDate());

var wSetTimeOutPeriod;
var wdthen;
var wdnow;
var wTargetDate = month+"/"+endday+"/"+year+" 12:00 AM";
var wCountActive = true;
var wCountStepper = -1;
var wLeadingZero = false;
var wDisplayFormat = "%%D%% Days: %%H%% Hrs: %%M%% Min: %%S%% Seconds";
var wFinishMessage = "Happy New Year";

$(document).ready(function()
{
    wCountStepper = Math.ceil(wCountStepper);
    
    if (wCountStepper == 0)
        wCountActive = false;
     
    wSetTimeOutPeriod = (Math.abs(wCountStepper)-1)*1000 + 990;
      
	wdthen = new Date(wTargetDate);
	wdnow = new Date();

	if(wCountStepper>0)
		ddiff = new Date(wdnow-wdthen);
	else
		ddiff = new Date(wdthen-wdnow);

    gsecs = Math.floor(ddiff.valueOf()/1000);
    wCountBack(gsecs);
});

function calcage(secs, num1, num2)
{
	s = ((Math.floor(secs/num1))%num2).toString();
  	if (wLeadingZero && s.length < 2)
    	s = "0" + s;
  	return "<b>" + s + "</b>";
}

function wCountBack(secs) {
	if (secs < 0) {
		$('#Countdown').html(wFinishMessage);
		return;
	}
	DisplayStr = wDisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
	DisplayStr = DisplayStr	.replace(/%%H%%/g, calcage(secs,3600,24));
	DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
	DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
 
  	$('#Countdown').html(DisplayStr);
  	if (wCountActive)
    	setTimeout("wCountBack(" + (secs+wCountStepper) + ")", wSetTimeOutPeriod);
}

var NewDate = new Date('12/31/2018');

var month = parseInt(NewDate.getMonth() + 1);

var year = NewDate.getFullYear();

var endday = parseInt(NewDate.getDate());

var wSetTimeOutPeriod;

var wdthen;

var wdnow;

var wTargetDate = month+"/"+endday+"/"+year+" 12:00 AM";

var wCountActive = true;

var wCountStepper = -1;

var wLeadingZero = false;

var wDisplayFormat = "%%D%% Days: %%H%% Hrs: %%M%% Min: %%S%% Seconds";

var wFinishMessage = "Happy New Year";

$(document).ready(function()

{

wCountStepper = Math.ceil(wCountStepper);

if (wCountStepper == 0)

wCountActive = false;

wSetTimeOutPeriod = (Math.abs(wCountStepper)-1)*1000 + 990;

wdthen = new Date(wTargetDate);

wdnow = new Date();

if(wCountStepper>0)

ddiff = new Date(wdnow-wdthen);

else

ddiff = new Date(wdthen-wdnow);

gsecs = Math.floor(ddiff.valueOf()/1000);

wCountBack(gsecs);

});

function calcage(secs, num1, num2)

{

s = ((Math.floor(secs/num1))%num2).toString();

if (wLeadingZero && s.length < 2)

s = "0" + s;

return "<b>" + s + "</b>";

}

function wCountBack(secs) {

if (secs < 0) {

$('#Countdown').html(wFinishMessage);

return;

}

DisplayStr = wDisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));

DisplayStr = DisplayStr .replace(/%%H%%/g, calcage(secs,3600,24));

DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));

DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

$('#Countdown').html(DisplayStr);

if (wCountActive)

setTimeout("wCountBack(" + (secs+wCountStepper) + ")", wSetTimeOutPeriod);

}

If you like this small code for countdown please comment and share it.

View Demo

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

Yes0

No0

Post Views: 430