純規の暇人趣味ブログ

手を突っ込んで足を洗う

時間が切り替わった時にWebページをリロードするJavaScript

      2015/12/27    HimaJyun

こんにちは。
ここ最近、Webサイトを色々と作ってみたりして居るのですが

時間が切り替わった時(例:1;59→2;00)にWebページをリロードする必要がありまして
探してもイマイチ欲しい物が見当たらなかったので
JavaScriptを使って自分で作ってみました
もし良ければ使ってみて下さい。

先程、例として挙げましたが、時間が切り替わったと言うのは
1:59→2:00みたいな感じの事です。

上手く説明出来ませんが……
とにかく時(Hour)が切り替わった時です。
あくまで、「切り替わった」であって
Webページに「アクセスしてから1時間」では無いです。

例えば、1:46にアクセスしたならば、これが2:00に変わる時
つまり、14分後にページを更新

もし、5:23にアクセスしたならば、これが6:00に変わる時
つまり、37分後にページを更新

って感じです。
そのため、ただ単にページをリロードしただけでは、思っていた事と違います。

<meta http-equiv="refresh" content="3600;URL=">

これだと、1:46にアクセスしたならば、3600秒後(1時間)にリフレッシュされちゃうので
つまり、2:46分後にページを更新が実行されますけど、普通に考えて遅いです。
「2:00」になった時点で更新してほしいです。

まず、JavaScriptで一定時間経過後にイベントを発生させるには
「setTimeout」と言う物があります。
ですが、これは「一定時間経過後」にイベントを発生させるので、このままでは使えません。

ならば、残り時間の所に動的に値を入れてしまえ!!
って訳です。

なので、現在の時間を取得し
そこから次の時間へと切り替わるまでの時間を算出します。

やり方は説明すれば長くなるので、後述のJavaScriptから読み解いて下さい。
てな訳で組んでみました。

<script>
<!--
window.onload = function()
{
Time = new Date();
M = Time.getMinutes(); //現在の分を取得、変数Mに代入
Rest = ((60 - M)* 60) * 1000; //ここがその残り時間(ミリ秒)を計算する処理
setTimeout(function(){
alert("時間が切り替わりました、リロードします。")
location.reload(true)
}, Rest);
};
// -->
</script>

これでとりあえず出来ました、が、
このままだと、8時59分59秒でも8時59分00秒として扱われてしまうので
結果として約1分遅れてしまいます。(まぁ、1分程度は誤差の範囲ではありますが……)

そのため、現在の「秒」も取得して、誤差を無くそうと思います。

<script>
<!--
window.onload = function()
{
Time = new Date();
M = Time.getMinutes();
Sec = Time.getSeconds(); //ここで秒を取得
Rest = (((60 - M)* 60)- Sec)* 1000; //ここが計算
setTimeout(function(){
alert("時間が切り替わりました、リロードします。")
location.reload(true)
}, Rest);
};
// -->
</script>

これで完成です、これで、先程の「時間が切り替わったら更新」が出来ます
良ければ参考にして下さい。
詳しい方は改良して下さい。
閏秒?もちろん考えていません、はい。

ちなみに、閲覧者のPCの時計が狂ってたら意味が無いです
もし、PHPが使えるのであれば、JavaScriptとPHPを合体させてハイブリッドに行きましょう

そうしましょう、ね?

<script>
<!--
window.onload = function()
{
Msec = (((60 - <?php echo"".date("i").""; ?>)* 60) * 1000) - (<?php echo"".date("s").""; ?> * 1000);
setTimeout(function(){
alert("時間が切り替わりました、リロードします。")
location.reload(true)
}, Msec);
};
// -->
</script>

 - Web制作