- ベストアンサー
Javascriptで指定した日付と時間に画像を入れ替える方法
Javascriptで指定した日付と時間に画像を入れ替える方法 WEBページ上のある画像を、指定した日付と時間に画像を入れ替える方法がわかりません。 ちなみに日付と時間はサーバー上のデータを取得したいと考えています。 例えば、10:00に「画像Ａ」から「画像Ｂ」に切り替える。という感じです。 どのように書けばいいのか、ご指導よろしくお願い致します。
- nico2kikuz
- お礼率47% (9/19)
- JavaScript
- 回答数4
- ありがとう数18
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
サーバ時刻については既に回答があるみたいなので… ローカル時刻で実行するサンプルを。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div> <img id="target" src="A.jpg" alt="A"> </div> <div id="res"></div> <script type="text/javascript"> <!-- (function() { var schedule = "10:00"; // ←指定時刻 var target = "target" // ←対象の画像要素のid var targetSrc = "B.jpg"; // ←取替え後の画像アドレス var interval = 10 * 1000; // ←確認する時間のピッチ（10秒） var now = new Date(); schedule = schedule.split(":"); var h = +schedule[0] || 0; var m = +schedule[1] || 0; var s = +schedule[2] || 0; now.setHours(h), now.setMinutes(m), now.setSeconds(s); (function R(){ if ((new Date()) - now > 0) { document.getElementById("target").src = targetSrc; } else { setTimeout(R, interval); } })(); })(); //--> </script> </body> </html>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
さ～ば～のじかんなら・・でもてきとうだな～ var getUTCDateByServer = function ( ) { try { var req = new XMLHttpRequest; var sa, time, time0, time1; req.open( 'HEAD', '#', false ); time0 = new Date; req.send( null ); time1 = new Date; sa = time1 - time0; time = new Date( req.getResponseHeader( 'Date' ) ); time.setMilliseconds( time.getMilliseconds() - (sa / 2 |0) ); return time; } catch ( err ) { return false; } };
お礼
コードのサンプルまで書いて頂いてありがとうございます。 理解できるまで時間がかかりそうですが、解読してみます。
- tasoh
- ベストアンサー率45% (19/42)
ページをずっと何もせずに眺めていても、時間がきたら画像が勝手に変わるようにしたいという事ですか？ タイマーで何秒か毎に指定した時間かどうかをチェックしておけばいけるのではないでしょうか。 やらないといけないこととしては ・何秒か毎にある関数を呼ぶタイマーを設定 ・日時分の取得 ・指定した日時分と比較 ・画像を入れ替える処理（srcの書き換え） ・サーバー上から日付と時間を取得（Ajaxとかでできそうです） ここら辺を調べてできるようになれば作れると思います。
お礼
Ajaxはハードルが高そうですが・・・、自分なりに調べてみます。 回答して頂いてありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
「ちなみに日付と時間はサーバー上のデータを取得したい」 ＝＞サーバー上のデータって何ですか？ 「xxxx年xx月xx日はxxxxx画像、みたいな指示データをサーバー上に 準備しておく」の意味合いですか？
補足
回答して下さってありがとうございます。 サーバーで持っているシステム日付を取得したいという意味です。 （xxxx年xx月xx日xx時xx分xx秒） クライアント側ではなく、サーバー側の日時を取得できればパソコンの時計が狂っていても間違いがないかと考えました。。
お礼
詳しく書いてくださってありがとうございます。 さっそく試してみます。