PHP/ Javascript Countdown Timer Script

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

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>

edited Nov 14 '18 at 16:30

asked Nov 14 '18 at 1:30

shane

add a comment |

<!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>

edited Nov 14 '18 at 16:30

asked Nov 14 '18 at 1:30

shane

add a comment |

<!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>

edited Nov 14 '18 at 16:30

asked Nov 14 '18 at 1:30

shane

<!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>

javascript php html

edited Nov 14 '18 at 16:30

asked Nov 14 '18 at 1:30

shane

edited Nov 14 '18 at 16:30

asked Nov 14 '18 at 1:30

shane

edited Nov 14 '18 at 16:30

asked Nov 14 '18 at 1:30

shane

asked Nov 14 '18 at 1:30

shane

asked Nov 14 '18 at 1:30

shane

add a comment |

2 Answers
2

active

oldest

votes

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 1:44

Frish

831414

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

– shane
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:50

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

– Frish
Nov 14 '18 at 1:51

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 2:40

|
show 6 more comments

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 9:50

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

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 2: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 5: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

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291906%2fphp-javascript-countdown-timer-script%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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 1:44

Frish

831414

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

– shane
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:50

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

– Frish
Nov 14 '18 at 1:51

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 2:40

|
show 6 more comments

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 1:44

Frish

831414

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

– shane
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:50

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

– Frish
Nov 14 '18 at 1:51

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 2:40

|
show 6 more comments

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 1:44

Frish

831414

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 1:44

Frish

831414

answered Nov 14 '18 at 1:44

Frish

831414

answered Nov 14 '18 at 1:44

Frish

831414

answered Nov 14 '18 at 1:44

Frish

831414

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

– shane
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:50

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

– Frish
Nov 14 '18 at 1:51

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 2:40

|
show 6 more comments

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

– shane
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:50

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

– Frish
Nov 14 '18 at 1:51

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 2:40

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

– shane
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:49

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

– Frish
Nov 14 '18 at 1:50

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

– Frish
Nov 14 '18 at 1:51

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 2:40

|
show 6 more comments

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 9:50

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

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 2: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 5: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

add a comment |

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 9:50

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

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 2: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 5: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

add a comment |

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 9:50

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

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>

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>

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 9:50

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

edited Nov 16 '18 at 9:50

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

answered Nov 14 '18 at 3:57

Adrian Brand

4,96821124

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 2: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 5: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

add a comment |

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 2: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 5: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

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 2: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 5: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

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt