Weekday Countdown

October 20, 2021

Worked on a subscription service website recently that had specific weekly cutoffs for ordering in order to have ordering available for the following week.

JS countdown function to Thursday at midnight (0 hour):

function update(){
	// Get current date and time
	var today = new Date();
	
	// Get number of days to Friday
	var dayNum = today.getDay();
	var daysToThur = 4 - (dayNum < 4? dayNum : dayNum - 7); // adjust weekday here
		
	// Get milliseconds to noon friday
	var thursStart = new Date(+today);
	thursStart.setDate(thursStart.getDate() + daysToThur);
	thursStart.setHours(0,0,0,0);
	// Round up ms remaining so seconds remaining matches clock
	var ms = Math.ceil((thursStart - today)/1000)*1000;
	var d =  ms / 8.64e7 | 0;
	var h = (ms % 8.64e7) / 3.6e6 | 0;
	var m = (ms % 3.6e6)  / 6e4 | 0;
	var s = (ms % 6e4)    / 1e3 | 0;
			
	// Return remaining 
	return '<div class="time"><span>'+ d + '</span><span>Days</span></div><div class="time"><span>' + h + '</span><span>Hours</span></div><div class="time"><span>' + m + '</span><span>Minutes</span></div>'; 
	// seconds excluded:
	// <div class="time"><span>' + s + '</span><span>Seconds</span></div>
}
		
// Run update just after next full second
function runUpdate() {
	var el = document.getElementById('weekly-counter');
	el.innerHTML = update();
	setTimeout(runUpdate, 1020 - (Date.now()%1000));
}
		
runUpdate();

Template:

<div class="weekly-counter">
	<p>Order in time for next week's delivery!</p>
	<div id="weekly-counter"></div>
</div>

Show Alternate Message on Specific Weekdays:

<?php $today = date('N'); ?>
<?php if ($today == 4 || $today == 5 || $today == 6) { // Thursday, Friday, Saturday ?>
	<p><?php the_field('delivery_cutoff_message','option'); ?></p>
<?php } ?>

Style:

/* weekly countdown clock */

.weekly-counter {
	position: fixed;
	bottom: 1em;
	right: 5%;
	background: #E3AB43;
	color: #330F22;
	padding: 1em;
	text-align: center;
}
.weekly-counter p {margin: 0 0 .15em;}
.weekly-counter .time {
	display: inline-block;
	vertical-align: middle;
	width: 23%;
}
.weekly-counter .time span {
	display: block;
	font-weight: bold;
	line-height: 1;
	font-size: 12px;
	text-transform: uppercase;
}
.weekly-counter .time span:first-child {
	font-size: 2.5em;
}

Front end:

Source.