LABO IWASAKI

Javascript Settimeout

カウントダウンタイマー

カウントダウンタイマーはたまに使う。
ちょっとしたアプリケーションを作る時。
制限時時間を設けたクイズを作る時にも使った。

社内管理システムにも導入した。
settimeoutは結構便利で時間差ページ遷移も…。
タイマー作動中のタイマー解除もあります。

基本的な部分

Basic Writing

まずは基本的な使い方から。
指定した時間が経過した後にアクションします。
ページ遷移だったり、再読み込みだったり色々できます。

<script>setTimeout("location.href='home.php'",1000*60);</script>
<script>setTimeout("location.reload()",1000*300);</script>

setTimeoutの中にアクションを記述します。
その後に時間を指定します。

応用する

Application

次に、ボタンを押したら指定のページへ移動するようにします。
指定する時間はミリ秒で書きます。下の例だと3秒を指定しています。

<script>
function time_over(){
location.href='遷移先のURL'; 
}
</script>
<input type=button value="3秒で移動" onClick="setTimeout('time_over()',3000)" >

解除する

Release

例えば時間制限のあるクイズを作るとします。
クイズが始まって指定時間以内に回答しないとゲームオーバーのページに…。
時間以内に回答するとSetTimeOutを止めて回答を評価する時などにも使えます。

<script>
function time_over(){
location.href='game-over.php'; 
}
</script>
// go というclassのボタンを押した時に実行されます
<script>
$('.go').click(function(){
timerID = setTimeout( function() {
time_over();
}, 10000);
});
</script>
// stop というclassのボタンを押した時に実行されます
<script>
$('.stop').click(function(){
clearTimeout(timerID);
});
</script>

timerIDには任意の文字列を入れる事ができます。
例えば「timerA = setTimeout…」とかです。

ズラ〜っと書きます。ここからは殆どメモです。すみません。
いちから説明するのは困難なので勘弁してください。
昔、どこかのサイトを参考にさせてもらって、勉強しながら作ったものです。
もう随分前なので記憶が…。

カウント

CountDown Timer

例えばシフトがあるとします。
出勤日と出勤時間はDBに入っています。それをphpで配列に入れて呼び出します。
出勤時間を過ぎるまでは待機としてカウントダウンします。
出勤時間を過ぎると、何時間働いたかわかるようにカウントアップします。

<script>
function CountdownTimer2(elm2,tl2,mes2){
this.initialize.apply(this,arguments);
}
CountdownTimer2.prototype={
initialize:function(elm2,tl2,mes2) {
this.elem2 = document.getElementById(elm2);
this.tl2 = tl2;
this.mes2 = mes2;
},countDown:function(){
var timer2='';
var today2=new Date();
var day2=Math.floor((this.tl2 - today2)/(24*60*60*1000));
var hour2=Math.floor(((this.tl2 - today2)%(24*60*60*1000))/(60*60*1000))%60;
var min2=Math.floor(((this.tl2 - today2)%(24*60*60*1000))/(60*1000))%60;
var sec2=Math.floor(((this.tl2 - today2)%(24*60*60*1000))/1000)%60%60;
var milli2=Math.floor(((this.tl2 - today2)%(24*60*60*1000))/10)%100;
var me2=this;

//-----------------
// カウントアップ
//-----------------
if( ( this.tl2 - today2 ) < 0 ){
var min3 = min2 + 1;
var hour3 = hour2 + 1;
//----------
// 60分以上
//----------
if (hour3 <= -1) {
if (min3 > -10) { timer2 += '<span class="omin">'+this.addZeroc(hour3)+'時間</span><span class="omin">'+this.addZeroc(min3)+'分</span>'; }
else { timer2 += '<span class="omin">'+this.addZeroc(hour3)+'時間</span><span class="omin">'+this.addZeroa(min3)+'分</span>'; }
}
//----------
// 1分未満
//----------
else if (min3 > -1) { 
if (sec2 > -10) { timer2 += '<span class="osec">'+this.addZeroc(sec2)+'秒</span>'; }
else { timer2 += '<span class="osec">'+this.addZeroa(sec2)+'秒</span>'; }
}
//----------
// 10分未満
//----------
else if (min3 > -10) { 
if (min3 == -1) { timer2 += '<span class="omin">'+this.addZeroc(min3)+'分</span>'; }
else{ timer2 += '<span class="omin">'+this.addZeroc(min3)+'分</span>'; }
}
//----------
// 10分以上
//----------
else if (min3 <= -10) { 
if (sec2 > -10) { timer2 += '<span class="omin">'+this.addZeroa(min3)+'分</span>'; }
else { timer2 += '<span class="omin">'+this.addZeroa(min3)+'分</span>'; }
}

 

this.elem2.innerHTML = timer2;
tid2 = setTimeout( function(){me2.countDown();},10 );
//-----------------
// カウントダウン
//-----------------
} else if( ( this.tl2 - today2 ) > 0 ){
var day5=Math.floor((this.tl2-today2)/(24*60*60*1000));
var hour5=Math.floor(((this.tl2-today2)%(24*60*60*1000))/(60*60*1000))%60;
var min5=Math.floor(((this.tl2-today2)%(24*60*60*1000))/(60*1000));
var sec5=Math.floor(((this.tl2-today2)%(24*60*60*1000))/1000)%60%60;
var milli5=Math.floor(((this.tl2-today2)%(24*60*60*1000))/10)%100;
//----------
// 10分未満
//----------
if (min5 < 10) { timer2 += '<span class="min">'+this.addZeroc(min5)+'分</span><span class="sec">'+this.addZeroa(sec5)+'秒</span>'; }
//----------
// 100分以上
//----------
else if (min5 >= 100) { timer2 += '<span class="min">'+this.addZero(min5)+'分</span><span class="sec">'+this.addZeroa(sec5)+'秒</span>'; }
//----------
// 100分未満
//----------
else if (min5 < 100) { timer2 += '<span class="min">'+this.addZeroa(min5)+'分</span><span class="sec">'+this.addZeroa(sec5)+'秒</span>'; }
this.elem2.innerHTML = timer2;
tid2 = setTimeout( function(){me2.countDown();},10 );
}
},addZero:function(num){ return ('0'+num).slice(-3); },addZeroa:function(num){ return ('0'+num).slice(-2);},addZerob:function(num){ return ('0'+num).slice(-4);},addZeroc:function(num){ return ('0'+num).slice(-1); }
}

//------------
// 待機
//------------
function WAIT1(){
var tl2 = new Date('{$nowshifty[1]}/{$nowshiftm[1]}/{$nowshiftd[1]} {$nowshiftwh[1]}:{$nowshiftwm[1]}:{$nowshiftws[1]}');
var timer2 = new CountdownTimer2('WAIT1',tl2,'終了');
timer2.countDown();
}

function WAIT2(){
var tl2 = new Date('{$nowshifty[2]}/{$nowshiftm[2]}/{$nowshiftd[2]} {$nowshiftwh[2]}:{$nowshiftwm[2]}:{$nowshiftws[2]}');
var timer2 = new CountdownTimer2('WAIT2',tl2,'終了');
timer2.countDown();
}

function WAIT3(){
var tl2 = new Date('{$nowshifty[3]}/{$nowshiftm[3]}/{$nowshiftd[3]} {$nowshiftwh[3]}:{$nowshiftwm[3]}:{$nowshiftws[3]}');
var timer2 = new CountdownTimer2('WAIT3',tl2,'終了');
timer2.countDown();
}

function WAIT4(){
var tl2 = new Date('{$nowshifty[4]}/{$nowshiftm[4]}/{$nowshiftd[4]} {$nowshiftwh[4]}:{$nowshiftwm[4]}:{$nowshiftws[4]}');
var timer2 = new CountdownTimer2('WAIT4',tl2,'終了');
timer2.countDown();
}

function WAIT5(){
var tl2 = new Date('{$nowshifty[5]}/{$nowshiftm[5]}/{$nowshiftd[5]} {$nowshiftwh[5]}:{$nowshiftwm[5]}:{$nowshiftws[5]}');
var timer2 = new CountdownTimer2('WAIT5',tl2,'終了');
timer2.countDown();
}

function WAIT6(){
var tl2 = new Date('{$nowshifty[6]}/{$nowshiftm[6]}/{$nowshiftd[6]} {$nowshiftwh[6]}:{$nowshiftwm[6]}:{$nowshiftws[6]}');
var timer2 = new CountdownTimer2('WAIT6',tl2,'終了');
timer2.countDown();
}

function WAIT7(){
var tl2 = new Date('{$nowshifty[7]}/{$nowshiftm[7]}/{$nowshiftd[7]} {$nowshiftwh[7]}:{$nowshiftwm[7]}:{$nowshiftws[7]}');
var timer2 = new CountdownTimer2('WAIT7',tl2,'終了');
timer2.countDown();
}

function WAIT8(){
var tl2 = new Date('{$nowshifty[8]}/{$nowshiftm[8]}/{$nowshiftd[8]} {$nowshiftwh[8]}:{$nowshiftwm[8]}:{$nowshiftws[8]}');
var timer2 = new CountdownTimer2('WAIT8',tl2,'終了');
timer2.countDown();
}

function WAIT9(){
var tl2 = new Date('{$nowshifty[9]}/{$nowshiftm[9]}/{$nowshiftd[9]} {$nowshiftwh[9]}:{$nowshiftwm[9]}:{$nowshiftws[9]}');
var timer2 = new CountdownTimer2('WAIT9',tl2,'終了');
timer2.countDown();
}

function WAIT10(){
var tl2 = new Date('{$nowshifty[10]}/{$nowshiftm[10]}/{$nowshiftd[10]} {$nowshiftwh[10]}:{$nowshiftwm[10]}:{$nowshiftws[10]}');
var timer2 = new CountdownTimer2('WAIT10',tl2,'終了');
timer2.countDown();
}

window.onload=function(){
WAIT1();
WAIT2();
WAIT3();
WAIT4();
WAIT5();
WAIT6();
WAIT7();
WAIT8();
WAIT9();
WAIT10();
}

</script>