countdown javascript with php

Question

I want a countdown on my website that starts with a value from php (out of a MySQL database).

Currently I use the following function:

<script type="text/javascript">
  var seconds;
  var temp;
  var tijd = <? echo json_encode($t); ?>
 
  function countdown() {
    seconds = document.getElementById('countdown').innerHTML;
    seconds = parseInt(seconds, tijd);
 
    if (seconds == 1) {
      temp = document.getElementById('countdown');
      temp.innerHTML = "0";
      return;
    }
 
    seconds--;
    temp = document.getElementById('countdown');
    temp.innerHTML = seconds;
    timeoutMyOswego = setTimeout(countdown, 1000);
  } 
 
  countdown();
</script>

But in case $t is not 10 the value is increasing with strange steps. How can I solve this? I don't have experience with javascript, so that's the problem.

Besides that, when I adding this script, the following code:

header('Content-Type: text/html; charset=iso-8859-1');

isn't working anymore, because for example " ë " is represented with a ? in the text. I don't know why this is happening?

Who can helps me? Thanks in advance.

Did you read the documentation of ParseInt? "Tijd" is not the same as radix. — Jeroen Heier
– Jeroen Heier, Commented Dec 18, 2016 at 12:50
<meta charset="UTF-8"> Doesn't solve the problem that a ë in a php string is changed to a ?. — user2051376
– user2051376, Commented Dec 18, 2016 at 20:14

Diego Arboleda · Accepted Answer · 2016-12-18 14:40:06Z

1

If you want a human-readable counter you must use 10 in the second parameters of parseInt function

"Specify 10 for the decimal numeral system commonly used by humans."

Then the only number you want to retrieve from database is the start of the counter.

I think you have some like this in your HTML code:

<div id="countdown"><?php echo $startCounterFromDB; //This is the start of the counter ?></div>

And in you want to keep your code, in your JavaScript you only have to change the second parameter of the parseInt function.

<script type="text/javascript">
  var seconds;
  var temp;
  var tijd = 10; //always use 10

  function countdown() {
    seconds = document.getElementById('countdown').innerHTML;
    seconds = parseInt(seconds, tijd);

    if (seconds == 1) {
      temp = document.getElementById('countdown');
      temp.innerHTML = "0";
      return;
    }

    seconds--;
    temp = document.getElementById('countdown');
    temp.innerHTML = seconds;
    timeoutMyOswego = setTimeout(countdown, 1000);
  } 

  countdown();
</script>

Finally UTF-8 is a PSR standard for all files, but you don't need to use json_encode function, because you only need to print a single number.

This code will work.

answered Dec 18, 2016 at 14:40

Diego Arboleda

824 bronze badges

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

2 Comments

user2051376 Over a year ago

Thanks, the problem with the countdown is solved. But if I add the header

user2051376 Over a year ago

Thanks, the problem with the countdown is solved. But if I add the header header('Content-Type: text/html; charset=iso-8859-1'); to my code. The countdown doesn't work anymore, Any idea why?

cristalix · Accepted Answer · 2016-12-18 14:13:45Z

0

What's about some PREMADE beautifull jquery countdown?

answered Dec 18, 2016 at 14:13

cristalix

1011 silver badge6 bronze badges

Collectives™ on Stack Overflow

countdown javascript with php

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related