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.
Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0