- ベストアンサー
PCの時間に合わせて画像を変化させたい
- PCの時間に合わせて画像を変化させる方法を探しています
- 現在試しているスクリプトでは、画像が切り替わるタイミングがPCの時刻と一致しない
- 「美人時計」のようにPCの時間と画像が一緒に切り替わる方法を知りたい
- slowMay
- お礼率68% (75/109)
- JavaScript
- 回答数3
- ありがとう数11
- みんなの回答 （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"> <!-- window.onload = function() { update(); function update() { var hour, minute, msec , sec; with (new Date()) { hour = zero(getHours()); minute = zero(getMinutes()); sec = zero(getSeconds()); msec = getMilliseconds(); } document.getElementById('clock').innerHTML = hour+':'+minute+':'+sec+' 誤差 '+msec+'/1000'; setTimeout(arguments.callee, 1000-msec); } function zero(n) { return n<10?'0'+n:''+n; } } //--> </script> </head> <body> <div id="clock"></div> </body> </html>
その他の回答 (2)
- askaaska
- ベストアンサー率35% (1455/4149)
画像の変更はupdateClock()で行っている。 まずここまでいい？ setTimeout('updateClock()', 60 * 1000); ここが重要。 これは何をしているかというと 60秒後にupdateClock()を実行する を意味しているわ。 ページ表示後60秒経ったら切り替えているのよ。 当然PCの時計の分切り替えタイミングとは一致していないわ。 setTimeout('updateClock()', 1 * 1000); こうすれば１秒以内の誤差はあるけど毎秒切り替えるようになるので PCの時計とほとんど同じタイミングで切り替わるわね。 ただし、PCの負荷も上がるけどね。
お礼
回答ありがとうございます。 60秒後にupdateClock()を実行してるから、ずっと同じ時間だけ誤差が出てるんですね。 setTimeout('updateClock()', 1 * 1000); で試してみたところ、1秒ごとに画像がフェードアウトして表示されます。なるほどなぁと思いました。ありがとうございます！
- LOHA
- ベストアンサー率52% (203/388)
JavaScriptで現在時刻取得できるので、後は適宜プログラムを組みましょう。 http://beginners.atompro.net/smpjvsc_ontim01.html
お礼
ありがとうございました。参考サイトを読んでみます。
お礼
書いていただいたソースをhtmlで表示させたら時刻が出ました。ありがとうございます。 これと元のソースを組み合わせれば、パソコンの時間に合わせて画像が変わるんでしょうか？そこのところはチンプンカンプンなので勉強します(^-^;