The
Lab

Test libraries, replacement codes, and more here.

Call Directions

Countdown Timer

About

The code for this tool was pulled from DKB-505.

This countdown timer works well in a bonus block. It displays a countdown clock until the timer runs out, at which point the content is replaced with new content, such as a link to the event page.

This tool works well in a bonus block, but can also be used in other page sections. Because it is coded with JavaScript as opposed to jQuery, the entire contents of the code can be added to any page block or editable content section by any user role without requiring custom code access.

If the timer should still display after the countdown ends, change autoreplace = true to autoreplace = false.

Back to top

Display

Below you can see how the countdown block will display before and after the timer runs out.

Timer runs out on:

Default block! Big sale, get in here!

Back to top

Demo

Below is an example of how this widget displays.


  • Days
  • Hours
  • Minutes
  • Seconds

Default block! Big sale, get in here!

Back to top

Code Snippet

Click below to copy the code snippet to your clipboard.

Back to top

<style>
.countDown { color: #333; }
.countDown li { padding: 0 1.5em; font-size: 0.75em; text-transform: uppercase; }
.countDown li span { display: block; font-size: 5em; }
#defaultBonusBlock { display: none; }
</style>
<div id="countDown" class="countDown text-center">
	<a class="" href="/newspecials.aspx" target="_blank" onclick="DealerOnTrack.event('cta','click',window.location.href)">
		<ul class="list-unstyled list-inline margin-x">
			<li><span id="days"></span>Days</li>
			<li><span id="hours"></span>Hours</li>
			<li><span id="minutes"></span>Minutes</li>
			<li><span id="seconds"></span>Seconds</li>
		</ul>
	</a>
</div>
<!-- hidden unti timer is up. -->
<div id="defaultBonusBlock" class="container-fluid bg-cta">
	<div class="row text-center pad-vert-2x text-white">
		<div class="col-sm-12">
			<h2 class="margin-x">Default block! Big sale, get in here!</h2>
		</div>
	</div>
</div>
<script>
const second = 1000,
		minute = second * 60,
		hour = minute * 60,
		day = hour * 24;
let countDown = new Date('Oct 1, 2019 12:06:00').getTime(),
	x = setInterval(function() {
	 let now = new Date().getTime(),
		distance = countDown - now;
		// set to false if you don't want the countdown to go away after it ends.
		autoReplace = true;
		if (distance < 0 && autoReplace) {
			document.getElementById('countDown').setAttribute("style", "display:none;");
			document.getElementById('defaultBonusBlock').setAttribute("style", "display:block;");
		}
		document.getElementById('days').innerHTML = Math.floor(distance / (day)),
		document.getElementById('hours').innerHTML = Math.floor((distance % (day)) / (hour)),
		document.getElementById('minutes').innerHTML = Math.floor((distance % (hour)) / (minute)),
		document.getElementById('seconds').innerHTML = Math.floor((distance % (minute)) / second);
	}, second)
</script>