重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【解消】通知が届かない不具合について

Javascriptで指定した日付と時間に画像を入れ替える方法

解決済

  • 質問者：nico2kikuz
  • 質問日時：
  • 回答数：4件

Javascriptで指定した日付と時間に画像を入れ替える方法

WEBページ上のある画像を、指定した日付と時間に画像を入れ替える方法がわかりません。
ちなみに日付と時間はサーバー上のデータを取得したいと考えています。

例えば、10:00に「画像Ａ」から「画像Ｂ」に切り替える。という感じです。

どのように書けばいいのか、ご指導よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

サーバ時刻については既に回答があるみたいなので…



ローカル時刻で実行するサンプルを。

<!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>
    • good
    • 1
    • 件
通報する
この回答へのお礼

詳しく書いてくださってありがとうございます。
さっそく試してみます。

通報する
お礼日時：2010/06/29 15:14

No.3

  • 回答者： babu_baboo
  • 回答日時：

さ～ば～のじかんなら・・でもてきとうだな～



　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; }
　};
    • good
    • 0
    • 件
通報する
この回答へのお礼

コードのサンプルまで書いて頂いてありがとうございます。
理解できるまで時間がかかりそうですが、解読してみます。

通報する
お礼日時：2010/06/29 15:13

No.2

  • 回答者： tasoh
  • 回答日時：

ページをずっと何もせずに眺めていても、時間がきたら画像が勝手に変わるようにしたいという事ですか？


タイマーで何秒か毎に指定した時間かどうかをチェックしておけばいけるのではないでしょうか。

やらないといけないこととしては
　・何秒か毎にある関数を呼ぶタイマーを設定
　・日時分の取得
　・指定した日時分と比較
　・画像を入れ替える処理（srcの書き換え）
　・サーバー上から日付と時間を取得（Ajaxとかでできそうです）
ここら辺を調べてできるようになれば作れると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

Ajaxはハードルが高そうですが・・・、自分なりに調べてみます。
回答して頂いてありがとうございました。

通報する
お礼日時：2010/06/24 23:42

No.1

  • 回答者： yyr446
  • 回答日時：

「ちなみに日付と時間はサーバー上のデータを取得したい」


＝＞サーバー上のデータって何ですか？
「xxxx年xx月xx日はxxxxx画像、みたいな指示データをサーバー上に
準備しておく」の意味合いですか？

この回答への補足

回答して下さってありがとうございます。
サーバーで持っているシステム日付を取得したいという意味です。
（xxxx年xx月xx日xx時xx分xx秒）
クライアント側ではなく、サーバー側の日時を取得できればパソコンの時計が狂っていても間違いがないかと考えました。。

補足日時：2010/06/24 23:40
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報