2011-01-01 9 views
4

Ich habe diesen Code so weit, dass der Benutzer nach 5 Sekunden auf die korrekte URL umleitet:anzeigen Umleiten In .. Countdown-Timer PHP

<?php $url = $_GET['url']; header("refresh:5;url=$url"); include('ads.php'); ?>

Bitte könnten Sie mir sagen, wie ich einen Countdown-Timer angezeigt werden könnte Umleiten in .. mit .. ist die Anzahl der verbleibenden Sekunden. Ich bin neu in der Webentwicklung, daher wird der gesamte Code hilfreich sein!

+1

Sie müssen JavaScript verwenden. –

+1

Um Sie wissen zu lassen, ist PHP eine serverseitige Sprache. Es gibt niemanden auf der Serverseite, dem man seinen Timer zeigen kann. –

Antwort

17
<script type="text/javascript"> 

(function() { 
    var timeLeft = 5, 
     cinterval; 

    var timeDec = function(){ 
     timeLeft--; 
     document.getElementById('countdown').innerHTML = timeLeft; 
     if(timeLeft === 0){ 
      clearInterval(cinterval); 
     } 
    }; 

    cinterval = setInterval(timeDec, 1000); 
})(); 

</script> 

Redirecting in <span id="countdown">5</span>. 

Sie können dies versuchen.

+0

Danke, gibt es eine Möglichkeit, den Timer zu stoppen, wenn er 0 erreicht? –

+0

Ich habe es gerade bearbeitet. Ich denke, die Änderungen, die ich vorgenommen habe, sollten dafür sorgen. – Kyle

+0

das funktioniert auch gut mit coderigniter –

0

Hervorragender Code von Kyle. Ich habe den Timer mit einer Pause- und Fortsetzen-Taste modifiziert.

<HTML> 
<HEAD> 
    <SCRIPT LANGUAGE="JavaScript"> 

    var time_left = 50; 
    var cinterval; 
    var timestatus=1; 

    function time_dec(){ 
     time_left--; 
     document.getElementById('countdown').innerHTML = time_left; 
     if(time_left == 0){ 
      clearInterval(cinterval); 
     } 
    } 

    function resumetime() 
    { 
     //time_left = 50; 
     clearInterval(cinterval); 
     cinterval = setInterval('time_dec()', 1000); 
    } 

    function defaultstart() 
    { 
     time_left = 50; 
     clearInterval(cinterval); 
     cinterval = setInterval('time_dec()', 1000); 
    } 

    function stopstarttime() 
    { 
     if(timestatus==1) 
    { 
     clearInterval(cinterval); 
     document.getElementById('stopbutton').value="Start"; 
     timestatus=0; 
    } 
     else 
    { 
     clearInterval(cinterval); 
     cinterval = setInterval('time_dec()', 1000); 
     document.getElementById('stopbutton').value="Stop"; 
     timestatus=1; 
    } 
    } 

    defaultstart(); 

    </SCRIPT> 
</HEAD> 

<body> 
    Redirecting In <span id="countdown">50</span>. 
    <INPUT TYPE="button" value="stop" id="stopbutton" onclick="stopstarttime()"> 
</body> 
</HTML> 
+0

Außer der Seite wird immer noch in 5 Sekunden umgeleitet, unabhängig davon, was Ihr Timer sagt. – sachleen

5

Da dies eine allgemeine Anfängerfrage ist; Ich wollte nur hervorheben, dass setIntervalund normalerweise vermieden werden sollte, indem setTimeout rekursiv innerhalb einer Funktion verwendet wird.

Zum Beispiel:

var timer = 5, 
    el = document.getElementById('countdown'); 

(function t_minus() { 
    'use strict'; 
    el.innerHTML = timer--; 
    if (timer >= 0) { 
     setTimeout(function() { 
      t_minus(); 
     }, 1000); 
    } else { 
     // do stuff, countdown has finished. 
    } 
}()); 
0

Hier ist mein nehmen auf sie, ohne Variablen außerhalb der Funktion. Hängt von jQuery ab.

function count_down_to_action(seconds, do_action, elem_selector) 
{ 
    seconds = typeof seconds !== 'undefined' ? seconds : 10; 
    $(elem_selector).text(seconds) 
    var interval_id = setInterval(function(){ 
     if (seconds <= 0) 
     { 
      clearInterval(interval_id); 
      if (typeof do_action === 'function') 
       do_action(); 
     } 
     else 
      $(elem_selector).text(--seconds); 
    },1000) 
} 

Hier ist ein Beispiel für das http://jsfiddle.net/VJT9d/

+0

Geige entfernt. – AdRock