Easy To Configure Lightweight JQuery Countdown Timer Plugin

You can also append a callback function which is called when countdown finishes.

Integrate downCount Countdown timer plugin

Libraries

Include jquery latest minified library after that add jquery.downCount.js on page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.downCount.js"></script>

HTML

Create a unordered list container for countdown timer which display days, hours, minutes and seconds.

<ul class="countdown">
	<li>
		<span class="days">00</span>
		<p class="days_ref">days</p>
	</li>
	<li class="seperator">.</li>
	<li>
		<span class="hours">00</span>
		<p class="hours_ref">hours</p>
	</li>
	<li class="seperator">:</li>
	<li>
		<span class="minutes">00</span>
		<p class="minutes_ref">minutes</p>
	</li>
	<li class="seperator">:</li>
	<li>
		<span class="seconds">00</span>
		<p class="seconds_ref">seconds</p>
	</li>
</ul>

CSS

Add CSS on page for styling your countdown timer.

ul.countdown {
	list-style: none;downCount
	margin: 75px 0;
	padding: 0;
	display: block;
	text-align: center;
}
ul.countdown li {
	display: inline-block;
}
ul.countdown li span {
	font-size: 80px;
	font-weight: 300;
	line-height: 80px;
}
ul.countdown li.seperator {
	font-size: 80px;
	line-height: 70px;
	vertical-align: top;
}
ul.countdown li p {
	color: #a7abb1;
	font-size: 14px;
}

JS

Finally call plugin function on page and set countdown date with offset and callback countdown finish message.

<script>
	$('.countdown').downCount({
		date: '06/10/2018 12:00:00',
		offset: +10
	}, function () {
		alert('WOOT WOOT, done!');
	});
</script>

I hope it can help you. Download source code here.