ansaurus

Question

Answer 1

+11 A:

This is best not done in PHP, because it would require the web server to keep the connection to the client open while the count down runs.

This would (IMHO) be far better done in Javascript with setInterval().

Alnitak 2009-05-13 09:42:21

Answer 2

+2 A:

Short answer: You can't.

Long answer: PHP is serverside and as such as soon as the page is sent PHP has nothing to do with it. What you're looking for is possible in a number of ways. You can either use javascript (which allows you to do the 'visual' countdown) or set the meta refresh tag in the element of your document, as such: <meta http-equiv="refresh" content="5;url=http://yoursite.com">

Christian P. 2009-05-13 09:42:44

try to avoid the meta refresh tag! awful for search engines.

Nona Urbiz 2009-09-01 18:21:23

Answer 3

+7 A:

I'm pretty sure javascript is your best option. The only other way to do it would be to redirect to a new URL every second, which is overkill in my opinion.

Here's full source code for a sample countdown:

<html>
  <head>
    <meta http-equiv="refresh" content="5;url=http://example.com" />
    <title>Countdown Sample</title>
  </head>
  <body>
    you will be redirected to example.com in <span id="seconds">5</span>.
    <script>
      var seconds = 5;
      setInterval(
        function(){
          document.getElementById('seconds').innerHTML = --seconds;
        }, 1000
      );
    </script>
  </body>
</html>

Edit

Here's an improved version with Alnitak's advice:

I've changed the JavaScript to redirect users and prevent the countdown from going below 1 and I've added a <noscript> tag around the <meta> for users without JavaScript.

<html>
  <head>
    <noscript>
      <meta http-equiv="refresh" content="5;url=http://example.com" />
    </noscript>
    <title>Countdown Sample</title>
  </head>
  <body>
    you will be redirected to example.com in <span id="seconds">5</span>.
    <script>
      var seconds = 5;
      setInterval(
        function(){
          if (seconds <= 1) {
            window.location = 'http://example.com';
          }
          else {
            document.getElementById('seconds').innerHTML = --seconds;
          }
        },
        1000
      );
    </script>
  </body>
</html>

brianpeiris 2009-05-13 09:51:34

I'd prefer not to mix the HTTP refresh tag with javascript myself. There's a chance that the two won't be in perfect sync, so the user could see '0 seconds' (or worse '-1 seconds')

Alnitak 2009-05-13 10:29:45

The refresh tag (or header) will ensure that users without JavaScript will be redirected as well. You're right though, it's best not to mix the two. I'll update my answer.

brianpeiris 2009-05-13 10:52:55

I don't really know how it works but if seconds <= 1 then if it takes them longer than a second to connect to the new host won't the js keep running and they could just keep trying to connect?

PintSizedCat 2009-05-13 10:56:56

@PintSizedCat I'm pretty sure the javascript will not execute again after window.location is changed. I'm not sure how to test that though.

brianpeiris 2009-05-13 11:17:54

perspx answer is cleaner, because it records the interval timer's ID and clears the timer when the 5 count expires.

Alnitak 2009-05-13 11:30:09

Answer 4

+3 A:

You should use javascript to visualize a countdown, in php you can set a timer for the redirection like this:

header('refresh: 5; url=http://www.stackoverflow.com');

where refresh: x set the time in seconds to wait for the redirection.

0plus1 2009-05-13 09:52:12

Answer 5

+2 A:

You can implement a Javascript countdown with the setInterval() function, called every second for 5 seconds to create a timer function to count down the time. When the time has elapsed, then you can use the document's location.href property to redirect the user to the page; it would also be beneficial to create a hard link to direct them to the page, in case Javascript is turned off, for instance.

For example:

var timeLeft, id;

function startCountDown()
{
    timeLeft = 5;
    id = setInterval(countDown, 1000);
}

function countDown()
{
    timeLeft -= 1;

    //Update the text which states how much time is remaining until the
    //user is redirected here..

    if(timeLeft==0)
    {
        clearInterval(id);

        //Redirect to the desired URL
        document.location.href = "http://domain.com";
    }
}

Perspx 2009-05-13 09:53:41

Answer 6

A:

You can mix javascript and php, when you enter page you get a date you need to countdown to from database through php and then count it down with javascript. Something like that is used by http://free-countdown.co.nr/

myincome 2009-07-08 16:16:31

ansaurus

tags:

views:

answers:

PHP, how to create count down timer?

Edit

related questions