• 締切済み

javascript、指定時刻での画像切換について

こんにちは。 javascriptで、時刻を指定して 2/1 10:00～10:30と2/2 11:00～11:30はAの画像、(複数の時間帯で) それ以外はBの画像というように画像を切り替えたいのですが うまくいかずに困っています。 どのような記述をすればいいでしょうか？ また、この時刻というのはどこを基準とした時刻になるのでしょうか？ (閲覧者の使用PCなのか、どこからか時刻をひっぱってくるのか…) 別の国からのアクセスの時にも、その国の時刻に対応して動くようにしたいのですが これは可能でしょうか。 (日本時間とアメリカ時間だけでいいのですが) 初心者で、質問が多くなってしまい申し訳ありません。 どなたかお教えいただけると幸いです。 よろしくおねがいします。

みんなの回答

noname#137826
noname#137826
回答No.2

こんな感じでどうでしょう？ 日付の指定個所で、月は0から始まる(1月は0, 2月は1)であることに注意してください。時刻は24時間制で現地時刻(閲覧者のPCの設定に依存)です。 --- <html> <head> <title>test</title> <script type="text/javascript"> window.onload = function(){ var t = [ { start: new Date(2010,1,1,10,0).getTime(),// 2010年2月1日10時0分 end: new Date(2010,1,1,10,30).getTime()// 2010年2月1日10時30分 }, { start: new Date(2010,1,2,11,0).getTime(),// 2010年2月2日11時0分 end: new Date(2010,1,2,11,30).getTime()// 2010年2月2日11時30分 } ] var now = new Date().getTime(); for (var i = 0, n = t.length; i < n; i++) { if (t[i].start < now && now < t[i].end) { document.getElementById('img0').src = "B.jpg"; break; } } } </script> </head> <body> <img id="img0" src="A.jpg"/> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

＞また、この時刻というのはどこを基準とした時刻になるのでしょうか？ まず、JavaScriptを何で使用しているかですよね。それを記載しましょう。あなたは知らないかもしれないが、サーバーサイドスクリプトとして、クライアントサイドスクリプトで別れますね。 さらにHTMLから、WSHから、いろんな所から使われます。まず、どこから使っているのか記載しましょう。 それでその答えが決まります。 つまり、JavaScriptを実行した場所が基準です。その実行した、マシンのシステム時間が基準です。 ＞別の国からのアクセスの時にも、その国の時刻に対応して動くようにしたいのですが 前述の通り、ホームページでHTMLからの使用なら、それをダウンロード（閲覧）した、マシンの時間です(これをクライアントサイドスクリプトといいます)。これをサーバーサイドの実行となると、サーバーの時間です（CGIとか呼ばれています）。 まずHTMLとブラウザの仕組みで、初歩から勉強しましょう。特に、ホームページを見るという事はどういうことなのか「さるでもわかるホームページ」を買って勉強しましょう。そうすれば、このような疑問はまずでなくなります。 なお、スクリプトの中の「基準とした時刻 」とは別の意味になるので、気おつけましょう（グリニッジ標準時、及びある日からの加算です）。計算時はGMTとの格闘になります。単純に数字として計算した方が速いです。 ここに投稿する前に、まずネットでサンプルを検索しましょう。キーワードとして JavaScript リファレンス 時刻計算 などを組み合わせてください。たくさんあるので、あらためてここで計算方法を示す必要がありません。それくらいたくさんあるので、見てください。 例 "JavaScript リファレンス" "JavaScript 時刻計算"

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascriptで画像の大きさを%指定したい

    imgタグで、画像の大きさをwidth="50%"と元の大きさを基準に指定できます。 そしてJavaScript中で 　　window.event.srcElement.width = 123 として、大きさを指定できますが、JavaScript中で 　　window.event.srcElement.width = "50%" とすると失敗します。 JavaScript中にて、パーセントで指定できないのでしょうか。

    • ベストアンサー
    • HTML
  • JavaScriptで出来ること

    javascriptでは、次のようなことはできますか？ 1,　指定時刻（またはランダムな時刻）に指定の音楽を鳴らす。 2,　指定時刻（またはランダムな時刻）に、既存の画像を指定の画像に切り替える。 3,　お絵かき掲示板を設置する javascriptを勉強しようかどうか迷っています。しかし、初心者でも勉強すれば上記のようなプログラムは作れますでしょうか？ 具体的には、指定時刻に、たとえば夜の２１時に、「２１時になりました。」とホームページに喋らせたり、ランダムな時刻に、ランダムなセリフを喋らせたりしたいのです。 また、上記の様なことはすべて、PHPでも可能ですか？

  • 指定した時刻にhtmlを切り替えるには？

    JavaScriptで、現在表示しているhtmlを、指定した年月日と時刻に別のhtmlに切り替えるといった方法はありますでしょうか？　前回は、解説本を参考にして、どうにか「指定した何時から何時までの境で切り替わる」といった仕組みを作ったのですが、今回は一度切り替えたらそのままでいいんです。 当方、Javascript初心者です・・・。シンプル＆イージーな仕組みですと、大変、助かります。よろしくお願いいたします。

  • (HTML,JavaScript)指定した時刻に対応した画像を表示したい。

    ページ内の画像を時刻によって変化させるようなページを作りたいと思っています。 アクセスした時刻により画像を変化させるだけならonLoadに呼び出す関数を割り当てて、その関数内で表示する画像ファイル名を生成すればいい。。。と思いつくのですが、ページ表示中でも時間が経つと画像が切り替わるようにしたいのです。 上記のようなことは可能でしょうか。ご教授ください。簡単な例を教えていただけるとありがたいです。

  • javascript　時間指定　画像更新

    初めて質問させてもらいます。 javascriptで指定日時になったら画像を更新するソースを教えていただけますでしょうか？ 例：表示している画像を1月31日午前9：59になったら見えなくする（1pxの空白gifとか？） いろいろ検索をしたんですが何ぶん初心者なものでわかってるようでわかっていない感じです。 経験豊富な方にズバリのソースを教えていただけたらと思っております。 わがままな質問で申し訳ないですがよろしくお願いいたします。

  • 【JavaScript】時差を考慮して時刻を求める

    javaScriptでブラウザを開いている国(タイムゾーン)と日本との時差を考慮して時刻を求めるメソッドを作りたいです。 例えば ・アメリカでブラウザを開いている場合。(時差を17時間とする) メソッドの引数を”0:00”とした場合に"17:00"を算出。 ”20:00”を引数をした場合に"13:00"を算出。 ・中国でブラウザを開いている場合。(時差を1時間とする) ”0:00”を引数とした場合に"1:00"を算出。 ”20:00”を引数をした場合に"21:00"を算出。 どのようにすればよいのでしょうか？ どうかよろしくお願いいたします。

  • 時刻に対応した画像表示。

    アクセスする度に異なる画像が表示されるやりかたはわかるんです。 なんですが、指定した時刻によって異なる画像は表示できるものなのでしょうか。 テキスト（メッセージ）だとそのやり方は載っているのですが、画像でやりたいのです。 わかる方、どうぞお願い致します。

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

    Javascriptで指定した日付と時間に画像を入れ替える方法 WEBページ上のある画像を、指定した日付と時間に画像を入れ替える方法がわかりません。 ちなみに日付と時間はサーバー上のデータを取得したいと考えています。 例えば、10:00に「画像Ａ」から「画像Ｂ」に切り替える。という感じです。 どのように書けばいいのか、ご指導よろしくお願い致します。

  • JavaScriptで画像から選択肢へ切り替え

    JavaScript全くの初心者です。よろしくお願いします。 パナソニックさんのホームページ（http://panasonic.jp/）の様に、 最初に写真が表示されていて、mouseoverで選択肢が現れる、 と言ったページが作りたいのです。 フラッシュが使われていますが、画像で作りたいです。 勉強を始めましたが、画像と内容文への入れ替え方法は見つからず悩んでいます。 JavaScript記述して頂ける方いらっしゃいましたら、宜しくお願いいたします。

  • javascript画像切り替えにサイズ指定

    何時間探ってもわかりません。。。。 どなたか回答していただけたら幸いです。 下記を参考とても簡単で正常に動きました！ しかし。。。 問題は、画像のサイズを指定したいのですが。。。 どこに挿入したらいいのでしょうか。。？ (現在サイズ指定できていないから画像サイズがばらばら。。) あらゆる場所に width= height= みたいなタグを 入れてみたのですが。。。入れると、起動しない。。 ********************* 表示したい場所に <IMG SRC="画像ＵＲＬ１(*1)"NAME="SP"> <SCRIPT language="javaScript"> <!-- var NO=1; img=new Array(5(*2)); img[1]="画像ＵＲＬ１(*3)"; img[2]="画像ＵＲＬ２(*3)"; img[3]="画像ＵＲＬ３(*3)"; img[4]="画像ＵＲＬ４(*3)"; img[5]="画像ＵＲＬ５(*3)"; UP(); function UP(){ setTimeout("UP()",5000(*4)); document.SP.src=img[NO]; NO=NO+1 if(NO>5(*5)){NO=1;} } //--> </SCRIPT> (*1)－最初から表示されている画像のＵＲＬ (*2)－切り替わる画像の全体数 (*3)－順番切り替わる画像のＵＲＬ (*4)－画像の切り替えスピード(単位はミリ秒) (*5)－一番最後の画像のナンバーを入力します。 ****************************** 参考: http://www.devicereign.net/TOP/support/Jscript/S18.html おまけに、今までは下記のように、 写真に白枠を入れていました。 下記は、三枚の写真が(背景白枠入り)横に並んでいる状況です。 同じ構成で、 この三枚を同時にいくつかの画像と切り替えというのが目的です。 ＊これはページの真ん中に配置しているので、 </table>とかは下の方で行っています。 <tr> <td><div align="center"> <table width="590" border="0" cellspacing="0" cellpadding="0"> <td width="173"><img src="画像1" alt="画像1" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a> <img src="画像2" alt="画像2" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a> <img src="画像3" alt="画像3" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a> </tr> よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する