Member Avatar for dandixon

Have this little countdown timer that counts down to 18:00 everyday and then resets as soon as it completes, the problems is I need to get it to work on the server time and not locally but I have no idea how?

Let me know if you need to look at the .js file!

Thanks in advance, Dan

<script language="javascript" type="text/javascript">
// Initiate Countdown
jQuery(document).ready(function() {
	$('#countdown_dashboard').countDown({
		targetDate: {
			'day': 		10,
			'month': 	11,
			'year': 	2999,
			'hour': 	18,
			'min': 		00,
			'sec': 		00,
			// time set as UTC 
			'utc':		true
		},
		
// onComplete function
						onComplete: function reset() {
					$('#countdown_dashboard').stopCountDown();
					$('#countdown_dashboard').setCountDown({
						targetOffset: {
							'day': 		10,
							'month': 	11,
							'year': 	2999,
							'hour': 	18,
							'min': 		00,
							'sec': 		00
						}
					});				
					$('#countdown_dashboard').startCountDown();
				}, 
				
				'omitWeeks': true,
				'serverStartTime' : true
					});
				});
				Cufon.replace('.digit');

				
		</script>
  • 3 Contributors
  • 4 Replies
  • 633 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by bdanie

Dani AI

Generated

wanted the countdown tied to the server clock (18:00 every day) but has no PHP; correctly noted plugins with built‑in serverSync are easiest, and showed a purely client‑side approach (which will misbehave if the client clock is wrong). The approach below works on plain static hosting: fetch a same‑origin response, read the HTTP Date header, compute the client↔server offset (compensating for RTT), then drive the countdown from server time.

// get client↔server offset (ms). requires same-origin or CORS-exposed Date header.
function getServerOffset() {
  const t0 = performance.now();
  return fetch('/', { method: 'HEAD', cache: 'no-cache' })
    .then(res => {
      const t1 = performance.now();
      const date = res.headers.get('date');
      if (!date) throw new Error('Server Date header not available');
      const serverMs = new Date(date).getTime() + ((t1 - t0) / 2);
      return serverMs - Date.now(); // positive => server ahead of client
    });
}

Use that offset to compute "server now" and the next server 18:00, then render/update seconds remaining from targetMs - (Date.now() + offset). Example helper:

function nextServer18(offset) {
  const sNow = new Date(Date.now() + offset);
  const tgt = new Date(sNow);
  tgt.setHours(18,0,0,0);
  if (sNow >= tgt) tgt.setDate(tgt.getDate() + 1);
  return tgt.getTime();
}

Integration notes and troubleshooting:

  • If your countdown plugin accepts an absolute millisecond target or an offset, feed it the computed targetMs or drive a simple tick with Date.now()+offset.
  • Some CDNs/proxies may remove or change Date/headers; if Date is missing use a tiny server script or a serverless function that returns JSON {time: Date.now()} (or a public time API, but check CORS).
  • Accuracy is roughly RTT/2; for sub-second precision use server push / NTP.
  • If switching plugins is acceptable, a plugin with built‑in serverSync (as suggested) is the least work.

This method keeps everything client‑side while using the server's clock as the authoritative time source.

Recommended Answers

All 4 Replies

Member Avatar for Airshow

Dan,

I don't know which countdown plugin that is but this one by Keith Wood has a serverSync capability and is very well documented.

Airshow

Edited by Airshow because: n/a
Member Avatar for dandixon

this is the page i got it from, its very useful and ive managed to tweak it to what i need but im struggling on this server time becuase i dont have php on my server

Member Avatar for Airshow

The timer appears not to have a sych() method and you don't have php available.

Other than choosing a different timer and a different host, it's difficult to see what the way ahead might be.

Airshow

Member Avatar for bdanie

First define the tag where you want to display the countdown timer !

<h1 id=countdown></h1>

and then type in this javascript !

<script>     
        $(function(){
    var BigDay = new Date("08 Sept 2015, 09:30:00");
    var msPerDay = 24 * 60 * 60 * 1000 ;


    window.setInterval(function(){
        var today = new Date();
        var timeLeft = (BigDay.getTime() - today.getTime());

        var e_daysLeft = timeLeft / msPerDay;
        var daysLeft = Math.floor(e_daysLeft);

        var e_hrsLeft = (e_daysLeft - daysLeft)*24;
        var hrsLeft = Math.floor(e_hrsLeft);

        var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
        var minsLeft = Math.floor(e_minsLeft);

        var e_secsLeft = (e_minsLeft - minsLeft)*60;
        var secsLeft = Math.floor(e_secsLeft);


        var timeString = daysLeft + " d:" + hrsLeft + " h:" + minsLeft + " m:" + secsLeft+" s";
        $('#countdown').html(timeString);
    }, 1000);
})

</script>

This should work well !!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.