• ベストアンサー

時間によって表示される画像を替えたい

はじめまして。 私は自分のお店(お菓子のお店)ホームページをつくってます。 時間、曜日によって<open>、<close>の二枚の画像を入れ替えたいのですが上手くいきません。 オープン時間は12:00-19:30で、定休は水曜なので自分なりに書いてみたのですがダメでした。12-19時なら稼働したのですが30分が入ってくるとごっちゃなってしまいます。そうこうしているうちに文自体ごっちゃです。すみませんお助けねがえないでしょうか？？ 宜しくお願い致します。 <script language="JavaScript"><!-- d = (new Date()).getDay(); h = (new Date()).getHours(); m = (new Date()).getMinutes(); if (d == 3) Discg = "tokei/close.png"; else if ((h > 0) && (h < 12)) Discg = "tokei/close.png"; else if ((h > 12) && (h < 19)) Discg = "tokei/open.png"; {document.write("<IMG src='" + Discg + "' border='0'>");} </script>

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

  • ベストアンサー
回答No.6

時間の問題、続くね～ 短く書こうと思ったけど、ほどほどにしました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <body> <p> <img src="tokei/0.png" alt="*" id="hour1"> <img src="tokei/0.png" alt="*" id="hour2"> <img src="tokei/0.png" alt="*" id="min1"> <img src="tokei/0.png" alt="*" id="min2"> <img src="tokei/0.png" alt="*" id="open"> </p> <script type="text/javascript"> (function ( ) { 　var images = [ ], cnt = 12; 　 　while( cnt-- ) 　　(images[ cnt ] = new Image()).src = 'tokei/' + cnt + '.png'; 　 　images[10].src = 'tokei/close.png', images[11].src = 'tokei/open.png'; 　setInterval( function ( ) { 　　with( new Date ) { 　　　var n = 10000 + getHours() * 100 + getMinutes() + ''; 　　　var t = getHours()*100+getMinutes(); 　　　var s = getDay() == 3 || t < 1200 || 1930 < t ? 11: 10; 　　} 　　document.getElementById( 'hour1' ).src = images[ n.charAt(1) ].src; 　　document.getElementById( 'hour2' ).src = images[ n.charAt(2) ].src; 　　document.getElementById( 'min1' ).src = images[ n.charAt(3) ].src; 　　document.getElementById( 'min2' ).src = images[ n.charAt(4) ].src; 　　document.getElementById( 'open' ).src = images[ s ].src; 　}, 500); })(); </script>

その他の回答 (15)

回答No.16

あの・・・・ あなたのやりたかったことは、 No6の回答で、目的が達成されていると思うのですが・・・。 あとは、スタイルシートでデザインだけ。 ついでに言わせてください。 教科書的にというなら <script language="JavaScript"> は、 <script type="text/javascript"> に。 d = (new Date()).getDay(); のような変数宣言の前に、できるだけvarをつける var d = (new Date()).getDay(); に。 <img src="tokei/0.png" name="hour2"> のnameはidに。後方互換のためのものを今も使う必要なし。 なので、 document.hour1.src = などは、 document.getElementById( 'hour1' ).src = に。 tm = setInterval("change()",500); は、文字列を引数に渡しているので効率が悪い。やるなら tm = setInterval( change, 500); もし上のchange関数を一度しか利用しないなら、 無名関数にして、 tm = setInterval(function(){ ～},500); のように、中にいれちゃう。 で、自分の結果としてNo6にいたる。 もうひとつ言わせてもらいます。 たくさんの疑問のそれぞれの解決方法は、できるだけ１箇所にあったほうが良いと思う。 今後同じような疑問をもったかたが、解決方法を探したときに、あちこちに、同じような 質問があり、解決するまでに時間がかかっていては、時間の無駄。 例えばQNo.5620923の回答を alert(['こんばんは','おはようございます','こんにちは'][((5<h)+(10<h))*(h<19)]); みたいにして、簡略化しすぎたことは、お詫びします

alaska217
質問者

お礼

正直なところ、スタイルシートでデザインすることもどういうことなのか、わからないんです！！ 本当にもうしわけありません！！

回答No.15

> このオープン画像表示の下に > 時計を表示させたいと思っています。 そこにdocument.write()で書き出すとか、 画像のsrcを書き換えるとかで良いんじゃないんですか？ それから、制作依頼は質問掲示板ではなく、制作会社にお願いして下さい。 http://www.hyuki.com/writing/techask.html 他の人は制作依頼を受けてくれる人もいるかもしれませんが、 先も言ったとおり、私はあくまでアルゴリズムの説明しかしません。 アルゴリズムの説明ができない場合は例で答えることがありますが、（質問掲示板上での）制作依頼は受け付けていませんので。 http://search.goo.ne.jp/web.jsp?MT=%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%80%80%E5%88%B6%E4%BD%9C%E4%BC%9A%E7%A4%BE&STYPE=web&IE=UTF-8&from=gootop&bt_search.x=51&bt_search.y=14

回答No.14

一応、UTC考慮バージョン、、、に、なってるはず。 未検証です。 <script language="JavaScript"><!-- var dt=new Date(); dt.setMinutes(dt.getMinutes()+(dt.getTimezoneOffset()+9*60)); d = dt.getDay(); h = dt.getHours(); m = dt.getMinutes(); if (d == 3) { Discg = "tokei/close.png"; }else if ((h>=12 && h<19) || (h == 19 && m <= 30)) { Discg = "tokei/open.png"; }else { Discg = "tokei/close.png"; } document.write('<IMG src="' + Discg + '" border="0">'); //--></script> 別に回答のをコピーペーストされてらっしゃる用ですのでどんなものを書いても良いと思いますが、 開店時間や閉店時間を変更された場合、また質問（制作依頼）をされるつもりなのかなあ、と思うわけで。 別に制作依頼があるたびに作り直すつもりがあるなら、私はそれに対して何も言いませんが。 > あなたのために相当な時間を割いてくれている。コードの量・質ともに・・・。 私は質問という呼び方で制作依頼をされるのには答えないようにしていますから、 質問者さんが作られたコードを改変するのが中心です。 （解答ではなく解法、プログラム的に言えばアルゴリズムを答えるようにしています。） それほど時間を割いている訳じゃないので、お気になさらずに。 一から作った物を気まぐれで投稿するときはありますが、 作っただけで投稿しない、または自分のサイトにアップするというのが多いです。

alaska217
質問者

お礼

ありがとうございます。 質問なのですが、以前のトピから伝えているように、このオープン画像表示の下に 時計を表示させたいと思っています。 ホームページは広告と同じですし、あり程度拘りたいのが私の見解です、ですので時計関連はヘルベチカという書体で統一したいため、すべて画像になっています。 また、今回は質問ですが、このように沢山の方が時間を割いてコードを提供していただいており、とても感謝しています。 次回からは制作依頼という形でお願いしたいとおもっておいることも事実です。 これをどう組み込めばいいのでしょうか？ hour = hour.toString(); if(hour.length == 1) { hour = "0" + hour; } document.hour1.src = imgs[hour.charAt(0)].src; document.hour2.src = imgs[hour.charAt(1)].src; min = min.toString(); if(min.length < 2) { min = "0" + min; } document.min1.src = imgs[min.charAt(0)].src; document.min2.src = imgs[min.charAt(1)].src; } function tm() { tm = setInterval("change()",500); }

回答No.13

なぜここの回答の補足やお礼に書き込んで続けないのか？ 難しいなら難しいので、噛み砕いて教えてほしいとか書けばよいのに。 俺は好きで書いているのだから、どうでもよいが、他の回答者様は、 あなたのために相当な時間を割いてくれている。コードの量・質ともに・・・。 ちなみに、要望のあった画像は、そもそも数字を画像にする必要があるのか？ スタイルシートで飾るだけでいいんじゃない？

alaska217
質問者

お礼

スタイルシートにてどう飾るのでしょうか？ 本当に申し訳ないのですが初心者なもので、まったく分かりません。 どうかご教授いただけますでしょうか？

回答No.12

> No.9 すみません、ボケてましたね(^^; <script language="JavaScript"><!-- d = (new Date()).getDay(); h = (new Date()).getHours(); m = (new Date()).getMinutes(); if (d == 3) { Discg = "tokei/close.png"; }else if ((h>12 && h<19) || (h == 12 && m >= 0) && (h == 19 && m <= 30)) { Discg = "tokei/open.png"; }else { Discg = "tokei/close.png"; } document.write('<IMG src="' + Discg + '" border="0">'); </script> (h==12 && m>=0) をわざわざ分けているのは、12:00から開始というのを明確にするためです。 }else if ((h>=12 && h<19) || (h == 19 && m <= 30)) { 開店が12:00からなので省略しても行けます。 > UTCとか最適化とかの話 非常に勉強させて頂いています。 ですが今回のはデザインパターンをやってるわけでもないですし、 質問者さんが理解できなさそうなコードは質問スレッド的にどうなんだろうと思うわけで。 UTCを考慮してないのは、外国で開店時間を見て「店が開いてる時間だから、今から行くぞ」とか思う人はいないと思うので、無視して良いんじゃないでしょうか？ なお、日本国内で外国の時間基準で活動している人はIE6の利用率よりも低いレアケースとして無視しています。 あしからずご了承ください。

alaska217
質問者

お礼

ありがとうございます！！ ||を使って...なるほどです！！ 実はレイアウト的にこのオープン画像やクローズ画像の下にデジタル時計をつけたいと思い、 <html> <body onLoad="tm()"> <center> <img src="tokei/0.png" name="hour1" width="40" height="55"> <img src="tokei/0.png" name="hour2"> <img src="tokei/x.png" width="20" height="55" /> <img src="tokei/0.png" name="min1"> <img src="tokei/0.png" name="min2"></center> </body> <html> 外部js imgs= new Array(); for(i = 0 ; i < 10 ; i++) { imgs[i] = new Image(); imgs[i].src = "tokei/" + i + ".png"; } function change() { today = new Date(); hour = today.getHours(); min = today.getMinutes(); hour = hour.toString(); if(hour.length == 1) { hour = "0" + hour; } document.hour1.src = imgs[hour.charAt(0)].src; document.hour2.src = imgs[hour.charAt(1)].src; min = min.toString(); if(min.length < 2) { min = "0" + min; } document.min1.src = imgs[min.charAt(0)].src; document.min2.src = imgs[min.charAt(1)].src; } function tm() { tm = setInterval("change()",500); } としたところ、firefoxでは動いたのですがsafariでは動きませんでした。。 本当にお手数掛けます。。。どうすればよいでしょうか。。。？？ ※もうごちゃごちゃになってしまったので整理する意味で 新しくトピたてました。そこにレイアウトをのせました。宜しくお願い致します。

回答No.11

＞少しイラついた に、ちょっと油をそそぎぃ～の var d=new Date,t=d/60000-d.getTimezoneOffset(),w=(t/1440+1)%7|0,m=t%1440; alert( 'src=tokei/'+ (!w||m<720||1170<m?'close':'open')+'.png' ); こんなのはどうでしょう？ 悪意はけっしてありませんよ。（笑） むしろ勉強になってます。

alaska217
質問者

お礼

悪意はけっしてありませんよ。（笑） というのは私にとってということでしょうか？？ それともスクリプトを書き込んでくれた方に、ということでしょうか？？ 混乱しています。笑

回答No.10

>#5 お礼 これだけ見る限りではおかしいところが見当たらない。実際のサイトで検証できればわかるかもしれないけど。 === >ALL #それにしても皆UTCスルーしているなぁ。俺が一番努力したところなのに(少しイラついた笑い)。 #個人的には文字列と数値の足し算や比較(文字列連結は文字列同士行うべきって思っているし、数値から真偽値への暗黙変換とかも嫌い。 #数値として比較すべきものは明示的に数値の型にしないといつかこういう目に遭うと思う http://www.tokumaru.org/d/20090924.html #自分の#1の反省点としては変数rangeのスコープをちゃんと小さく抑えなかったことかな。なお、IEがDOM 2 Traversal and Rangeに対応してないことは知っていて書いてるので反省はしていない。 #まだポイント厨モード(プロフィール参照)じゃないので少し多めに出現しております。

回答No.9

>talooさん 14時56分どこ通る？

回答No.8

オリジナルのを（最適化を一切行わず教科書的に）アレンジ。 HTMLの属性はダブルクォーテーションで囲むというルールに合わせ、document.write()のシングルクォーテーションにしました。 未検証です。 <script language="JavaScript"><!-- d = (new Date()).getDay(); h = (new Date()).getHours(); m = (new Date()).getMinutes(); if (d == 3) { Discg = "tokei/close.png"; }else if ((h >= 12 && m >= 0) && (h <= 19 && m <= 30)) { Discg = "tokei/open.png"; }else { Discg = "tokei/close.png"; } document.write('<IMG src="' + Discg + '" border="0">'); </script>

回答No.7

間違いありました。 cnt = 11; でよかった。 それとデクリメントまずかった。 スクリプトは外部ファイルにしてね 全角空白は半角に。 変数tを再利用すると、短くなります 馬鹿まるだしやるなら、さらに短く。 (function(){var i=[],c=11,p='tokei/',q='.png',r='src',$=function(a,b){return document.getElementById(a)[r]=b[r]}; while(c--)(i[c]=new Image())[r]=p+c+q;i[10][r]=p+'close'+q,i[11][r]=p+'open'+q; setInterval(function(){with(new Date)var t=getHours()*100+getMinutes(),n=10000+t+'',s=getDay()==3||t<1200||1930<t?11:10; $('hour1',i[n.charAt(1)]);$('hour2',i[n.charAt(2)]);$('min1',i[n.charAt(3)]);$('min2',i[n.charAt(4)]);$('open',i[s]);},500)})() UTCまでいくとは、さすがです。

alaska217
質問者

お礼

デクリメントがまずいということは、カウンタを1だけ減少させるということがまずい、ということですが正直意味がわかりません。 ご教授ねがえますでしょうか？？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する