Custom Countdown Timer jQuery Plugin

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>

CSS:

#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);
}

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
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.