Javascript 显示重定向在..倒数计时器 PHP
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4575789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Redirecting In.. CountDown Timer PHP
提问by max_
I have this code so far that redirects the user after 5 seconds to the correct URL:
到目前为止，我有这段代码可以在 5 秒后将用户重定向到正确的 URL：
<?php
$url = $_GET['url'];
header("refresh:5;url=$url");
include('ads.php');
?>
<?php
$url = $_GET['url'];
header("refresh:5;url=$url");
include('ads.php');
?>
Please could you tell me how i could display a countdown timer saying Redirecting In.. with .. being the amount of seconds left. I am new to web development so all code will be helpful!
请你告诉我如何显示一个倒数计时器，上面写着 Redirecting In.. .. 是剩余的秒数。我是 Web 开发的新手，所以所有代码都会有所帮助！
回答by Kyle
<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>.
You can try this.
你可以试试这个。
回答by adm
As this is a common beginner question; I just wanted to highlight that for best practise setIntervalshould, and canusually be avoided by using setTimeoutrecursively within a function.
因为这是一个常见的初学者问题；我只是想强调，对于最佳实践setInterval应，并且可以通常可以通过避免使用setTimeout递归函数内。
For example:
例如：
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.
}
}());
回答by Mike Starov
Here is my take on it, without variables outside of the function. Depends on jQuery.
这是我的看法，没有函数之外的变量。取决于 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)
}
?
?
Here is an example using it http://jsfiddle.net/VJT9d/
这是一个使用它的例子http://jsfiddle.net/VJT9d/
回答by Devjyoti Bagchi
Excellent code by Kyle. I have modified the timer with a pause and resume button.
凯尔的优秀代码。我用暂停和恢复按钮修改了计时器。
<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>
