PHP/ Javascript Countdown Timer Script

Question

I have IRC channel's stats web page which updates every 15 minutes.
I want to display live countdown on web page that links in with my server unix time and goes from 15:00 minutes down to 00:00 and then starts again at 15:00 minutes.
If the web page is refreshed, the timer must not refresh back to 15:00.

I have searched on internet & tried so many scripts but only found countdown's that count to a particular date in the future .
then found the followin solution but I am getting error "Uncaught SyntaxError: Unexpected token < "

How do I fix this error or is there any other script/way?
I would really appreciate it if someone help me out, thank you.
P.S: I am sorry if I made any mistake as this is my first post on stackoverflow.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#time {
 }
</style>

<? 
$currenttime = time(); 
$mins = date('i', (15 * 60) - ($currenttime % (15 * 60))); 
$secs = date('s', (15 * 60) - ($currenttime % (15 * 60)));
$usercount = date('i:s', (15 * 60) - ($currenttime % (15 * 60)));
?>
<script type="text/javascript">
var m = <? echo "$mins"; ?> ;
var s = <? echo "$secs"; ?> ;
window.onload=function() {
   fifteenMinutes();
 }
function fifteenMinutes(){
   s--;
if(s<0) {
   s=59;
   m--;
 }
if(m==-1) {
   m=14; #
 }
if(m<10) {
   mins='0'+m;
 }
else {
   mins=m;
 }
if(s<10) {
   secs='0'+s;
 }
else {
   secs=s;
 }
   document.getElementById('time').firstChild.nodeValue=mins+':'+secs;
   cd=setTimeout('fifteenMinutes()',1000);
}
</script>
</head>
<body>
<div id="time"> <? echo "$usercount"; ?>
</body>
</html>

Adrian Brand · Answer 1 · 2018-11-16T09:50:57.027

1

Here is a simple count down from 15 minutes.

function tick(time) {
  setTimeout(() => {
    const newTime = new Date();
    const diff = Math.floor((newTime.getTime() - time.getTime()) / 1000);
    const timeFrom15 = (15 * 60) - diff; 
    const secs = timeFrom15 % 60;
    const mins = ((timeFrom15 - secs) / 60);
    document.getElementById('time').innerText = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
    if (secs >= 0) {
      tick(time);
    } else {
      document.getElementById('time').innerText = '0:00';
    }
  }, 1000);
}

tick(new Date());

<div id="time"></div>

edited Nov 16 '18 at 09:50

answered Nov 14 '18 at 03:57

Adrian Brand

20,384
4
39
60

It resets to 15 minutes when I refresh page but anyway thank you for sharging the code. I will use it for my next project. – shane Nov 15 '18 at 02:27
It resets to 15 minutes when you refresh the page because it is pure JavaScript, I was just demoing a countdown for you, have the server set your time variable for you on page refresh or store the time in session storage, local storage or a cookie. – Adrian Brand Nov 15 '18 at 05:14
I have learnt few new things from your shared code and this will help me in future. Appreciate your help. – shane Nov 15 '18 at 17:10

score 0 · Accepted Answer · answered Nov 14 '18 at 01:44

0

This is not valid javascript, which is why you are getting a syntax error:

var m = <? echo "$mins"; ?> ;
var s = <? echo "$secs"; ?> ;

Neither is this (remove the #):

m=14; #

Instead, use <?php, like so:

var m = <?php echo "$mins"; ?> ;
var s = <?php echo "$secs"; ?> ;

answered Nov 14 '18 at 01:44

Frish

1,371
10
20

Yeah, I am not sure either, I haven't seen declaring variables in javascripts like this before. – shane Nov 14 '18 at 01:49
@shane me neither, I am learning something new! Check this out: https://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript – Frish Nov 14 '18 at 01:49
also this: https://stackoverflow.com/questions/1808108/how-to-access-php-variables-in-javascript-or-jquery-rather-than-php-echo-vari – Frish Nov 14 '18 at 01:50
Consensus appears to be use AJAX instead of using javascript and PHP directly – Frish Nov 14 '18 at 01:51
Thanks for sharing the links. Seems.useful. – shane Nov 14 '18 at 01:53
1

Make the changes in this answer. Should fix the problem works for me. Declaring variables like this is fine as the php code will be interpreted first by the server then browser will read the number that was echoed. So when the browser renders the javascript its doesnt see the php code only a number, as thats what you told php to print. – Mohammad C Nov 14 '18 at 02:40
@Frish Yes still same error and browser is displaying a blank page. – shane Nov 14 '18 at 06:41
@Frish your solution works. The problem was with my browser's caches. After cleaning the caches everything is working good. Thank you so much. – shane Nov 15 '18 at 02:02
@shane I'm really happy to hear that! It wouldn't be the first time caching was the culprit... – Frish Nov 15 '18 at 03:21

PHP/ Javascript Countdown Timer Script

2 Answers2