PCの時間に合わせて画像を変化させたい

2010/04/20 22:40

このQ&Aのポイント

PCの時間に合わせて画像を変化させる方法を探しています
現在試しているスクリプトでは、画像が切り替わるタイミングがPCの時刻と一致しない
「美人時計」のようにPCの時間と画像が一緒に切り替わる方法を知りたい

slowMay
お礼率68% (75/109)

JavaScript
回答数3
ありがとう数11

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/04/21 10:03 回答No.3

＞アクセスした時間に60秒を足して画像を切り替えてるようですコードを見てみれば分かるように、updateClockが走るたびにnew Date()を取得していますので、その時の（PCの）時間にあわせて処理していますよ。誤差の原因はTimeoutが約1分毎に呼び出されているので、最大では1分の誤差が出る可能性があること。解消したいのなら… ＜方法1＞時間をもっと短くすればそれだけ誤差が減ります。（最大誤差はそのインターバル分になる）ただし、現状のままだと、同じ時間で呼び出しても画像の書き換え（同じ画像で）を行なうのでフェードしてしまうから、同じだったら処理しないようにするとかしておかないと変かも。全体を、『あるピッチで時刻を観測して分が変わったら画像を書き直す』というロジックにしたほうがよさそう。＜方法2＞ dateから次の分が変わる時間を予測して、次の実行までの時間を変数として制御する。（すぐに定常≒1分になるだろうけれど）誤差は、スクリプトの実行時間とsetTimeoutの時間計測誤差かな？＜方法3＞ 1と2の組み合わせで、次の分が変わる少し前を予測し、それからはピッチを細かくして時刻を監視するというパターン。一番正確にできるかも…（無駄に細かく監視しないというだけ（負荷が減る）だけど、コーディングはちょっと面倒かも）以下ご参考まで。（2の方法で1秒毎に実行する例）このままで、誤差はおおむね1/100以内くらいになると思う。（もっと縮めたければ、2回目以降の誤差分を差し引くようにすればかなり0に近づくでしょう） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <script type="text/javascript">  </script> </head> <body> <div id="clock"></div> </body> </html>

質問者

お礼 2010/04/21 23:35

書いていただいたソースをhtmlで表示させたら時刻が出ました。ありがとうございます。これと元のソースを組み合わせれば、パソコンの時間に合わせて画像が変わるんでしょうか？そこのところはチンプンカンプンなので勉強します(^-^;

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

askaaska
ベストアンサー率35% (1455/4149)

2010/04/21 09:41 回答No.2

画像の変更はupdateClock()で行っている。まずここまでいい？ setTimeout('updateClock()', 60 * 1000); ここが重要。これは何をしているかというと 60秒後にupdateClock()を実行するを意味しているわ。ページ表示後60秒経ったら切り替えているのよ。当然PCの時計の分切り替えタイミングとは一致していないわ。 setTimeout('updateClock()', 1 * 1000); こうすれば１秒以内の誤差はあるけど毎秒切り替えるようになるので PCの時計とほとんど同じタイミングで切り替わるわね。ただし、PCの負荷も上がるけどね。

質問者

お礼 2010/04/21 23:29

回答ありがとうございます。 60秒後にupdateClock()を実行してるから、ずっと同じ時間だけ誤差が出てるんですね。 setTimeout('updateClock()', 1 * 1000); で試してみたところ、1秒ごとに画像がフェードアウトして表示されます。なるほどなぁと思いました。ありがとうございます！

ログインすると、全ての回答が全文表示されます。