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 · Accepted Answer · 2018-11-16 09:50:57Z

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, 2018 at 9:50

answered Nov 14, 2018 at 3:57

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shane Over a year ago

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.

Adrian Brand Over a year ago

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.

shane Over a year ago

I have learnt few new things from your shared code and this will help me in future. Appreciate your help.

Frish · Accepted Answer · 2018-11-14 01:44:22Z

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, 2018 at 1:44

Frish

1,40111 silver badges20 bronze badges

9 Comments

shane Over a year ago

Yeah, I am not sure either, I haven't seen declaring variables in javascripts like this before.

Frish Over a year ago

@shane me neither, I am learning something new! Check this out: stackoverflow.com/questions/23740548/…

Frish Over a year ago

also this: stackoverflow.com/questions/1808108/…

Frish Over a year ago

Consensus appears to be use AJAX instead of using javascript and PHP directly

Mohammad C Over a year ago

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.

|

Collectives™ on Stack Overflow

PHP/ Javascript Countdown Timer Script

2 Answers 2

3 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related