これまでのところ、5秒後にユーザーを正しいURLにリダイレクトする次のコードがあります。
<?php
$url = $_GET['url'];
header("refresh:5;url=$url");
include('ads.php');
?>
Redirecting In..と言うカウントダウンタイマーを表示する方法を教えてください。残りの秒数です。私はWeb開発に不慣れなので、すべてのコードが役に立ちます!
これまでのところ、5秒後にユーザーを正しいURLにリダイレクトする次のコードがあります。
<?php
$url = $_GET['url'];
header("refresh:5;url=$url");
include('ads.php');
?>
Redirecting In..と言うカウントダウンタイマーを表示する方法を教えてください。残りの秒数です。私はWeb開発に不慣れなので、すべてのコードが役に立ちます!
<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>.
あなたはこれを試すことができます。
これは一般的な初心者の質問なので、ベストプラクティスとして、関数内で再帰的に使用することで回避できる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.
}
}());
カイルによる優れたコード。一時停止と再開ボタンでタイマーを変更しました。
<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>
これが、関数外の変数なしでの私の見解です。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)
}
</ p>
これを使用した例を次に示しますhttp://jsfiddle.net/VJT9d/