2011-01-01 4 views
4

У меня есть этот код до сих пор, что перенаправляет пользователя через 5 секунд на правильный URL:Показать Перенаправление В .. CountDown Таймер PHP

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

Пожалуйста, вы можете сказать мне, как я мог бы показать таймер обратного отсчета говоря, что перенаправление In .. с .. будет количеством секунд осталось. Я новичок в веб-разработке, поэтому весь код будет полезен!

+1

Вам нужно JavaScript для этого. –

+1

Чтобы вы знали, PHP - это серверный язык. На стороне сервера нет никого, чтобы показать ваш таймер. –

ответ

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

Вы можете попробовать это.

+0

Спасибо, есть ли способ остановить таймер, когда он достигнет 0? –

+0

Я только что отредактировал его. Я думаю, что изменения, которые я сделал, должны позаботиться об этом. – Kyle

+0

это хорошо работает с codeigniter, а также –

0

Отличный код от Kyle. Я изменил таймер кнопкой паузы и возобновления.

<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

За исключением того, что страница будет перенаправлена ​​через 5 секунд независимо от того, что говорит ваш таймер. – sachleen

5

Поскольку это общий вопрос для начинающих; Я просто хотел подчеркнуть, что для наилучшей практики setInterval следует, и может обычно избегать, используя setTimeout рекурсивно внутри функции.

Например:

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

Вот мой взгляд на него, без переменных за пределами функции. Зависит от jQuery.

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) 
} 

Вот пример его использования http://jsfiddle.net/VJT9d/

+0

скрипка удален. – AdRock

Смежные вопросы