• ベストアンサー

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

はじめまして。 私は自分のお店(お菓子のお店)ホームページをつくってます。 時間、曜日によって<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

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

    画像(サンプル画像アップ致しました)のようにしたいです。 先日私のご質問にお答え頂きました方に大変感謝申し上げます。 じつは昨日からずっとスクリプトと格闘しています。 もうお手上げです。ヒントでもいいです。お願いします。 詳細===== オープンorクローズの画像の下にデジタル時計をつけるにはどうしたらよいのでしょうか？？ またJSファイルを外部化したいです。 画像は上部に＜オープン画像＞、＜クローズ画像＞がきて、 下段にデジタル時計が入ります。 時計は０～９までを、tokei/x.png...(x=0,1,2,3,,,,)として秒ごとに真ん中の『:』※tokei/chome.pngが点灯させたいです。 ここから下段に時計を入れたいのと、このファイルを外部に分けたいのですが、html内の画像の位置(htmlファイルに何と書いたら良いのか)をどうしたら良いのか分かりません。 お手数かけます。宜しくお願いします。 <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>

  • function open()～ではじまるように書くには？？

    お世話になっております。 この度、以下を function open()～ で書き出したいのですが、初心者のためやり方がわかりません。 また、これらをスタイルシートにて飾る方法もわからないほどの初心者です。 ものすごい初心者で、本当にお手数かけますが何卒宜しくお願い申し上げます。 <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>

  • 時間によって違う文章を出したい

    時間によって違う挨拶を表示したかったのですが、いざ書いてみてブラウザに表示してみると何も現れませんでした。この文章どこか間違っていますか？ <script type=text/javascript>today=new Date();h=today.getHours();m=today.getMinutes();s=today.getSeconds();document.write(h,"時",m,"分",s,"秒","です--");if((h>5)&&(h<=10)){document.fgColor="#ffffff";document.write("おはようございます");}else if((h>10)&&(h<=17)){document.fgcolor="#ffffff";document.write("こんにちは");else{document.fgcolor="#ffffff";document.write("こんばんは");}</script>

  • JAVAで時刻に対して簡単な四則演算をしたい

    初歩の質問ですが、 現時刻の時間や分に+1をしたりしたいのですが、やり方がわかりません。 月+1はできました。 それと、if文が無効になるのはなぜでしょうか。 しょうむない質問ですが、教えてください。 <script language="JavaScript"> <!-- date = new Date(); wday = new Array("日", "月", "火", "水", "木", "金", "土"); mon = date.getMonth() + 1; document.write(date.getFullYear() + "年" + mon + "月" + date.getDate() + "日(" + wday[date.getDay()] + ") "); // --> <!-- time = new Date(); hour = time.getHours(); min = time.getMinutes(); if (min < 10) { min = "0" + min; } document.write(time.getHours() + "時" + time.getMinutes() + "分" ); // --> </script>

  • 一定時間がきたら表示を消したい

    window.statusを使用して、一定時間がきたら表示を消すように記述するにはどうすればよろしいでしょうか？ 以下にソースを記述しています。どなたか教えてください。 <head> <script language="javascript"> <!-- function a() { window.status=new Date().getHours()+"時"+new Date().getMinutes()+"分"+new Date().getSeconds()+"秒"; b=setTimeout("a()",500); } //--> </script> </head> <body onLoad="a()"> </body>

  • 取得した時間の表示について。

    現在デジタル時計を表示しています。が この表示の形を変更したいのです。 //以下スクリプト var now:Date; var h:Number, m:Number, s:Number,l:Number,d:Number,o:Number,p:Number; this.onEnterFrame = function() { now = new Date(); d = now.getFullYear(); o = now.getUTCMonth()+1; p = now.getUTCDate(); h = now.getHours(); m = now.getMinutes(); s = now.getSeconds(); l = now.getMilliseconds(); date.text = d; mon.text =o; day.text =p; Hours.text = h; Minute.text = m; Seconds.text = s; mini.text = l; } // このスクリプトでは現在、静止テキスト"/" 、":"を挟み 2006/12/ 2/ 18: 5:974 のように表示されます。 この時計の表示を 06/12/02/18:05:97 のように表示したい（すべてのデータを二桁に）のですが うまくいきません。 何か良い方法がないか探しております よろしくお願いします。

    • ベストアンサー
    • Flash
  • 一定時間がきたら表示を消すようにしたい

    window.statusを使用して、一定時間がきたら表示を消すように記述するにはどうすればよろしいでしょうか？ 以下にソースを記述しています。どなたか修正してください。 <head> <script language="javascript"> <!-- function a() { window.status=new Date().getHours()+"時"+new Date().getMinutes()+"分"+new Date().getSeconds()+"秒"; b=setTimeout("a()",500); } //--> </script> </head> <body onLoad="a()"> </body>

  • 時間帯○時○分で表示切替

    下記ソースで　AM9:30分～PM12:00の間　02.htmlを表示 それ以外は、01.htmlを表示させたいのですが AM10:00～AM10:29，AM11:00～AM11:29の時間帯は02.htmlを表示するように 考えたのですが、01.htmlを表示してしまいします。 どこか抜けがありますか？ 解決する方法はありますでしょうか？ <script type="text/javascript"> <!-- window.onload = function(){ var date = new Date(); // 時間を取得 var hour = date.getHours(); // 何分か取得 var minute = date.getMinutes(); if(hour >= 9 && minute >= 30 && hour < 12){ // 9時30分から12時までは02.html location.href = "02.html"; } else{ location.href = "01.html"; // 上記以外は01.html } } // --> </script>

  • CSSで、JavaScriptの定義について

    ご覧頂きありがとうございます。 お手数ですが、教えて頂けますでしょうか。 JavaScriptで記入したテキスト表示される時計を CSSを使ってフォントサイズを固定したいのですが、 どのように、CSSに打ち込めばできるのでしょうか？ また、他に手段があれば教えて下さい。 （ブラウザの文字サイズを変更しても、変更されないようにできる手段であれば、何でも構いません） 下記は、Java部分に記入したスクリプトです。 <SCRIPT LANGUAGE="JavaScript"> //AccessTimeの設定 days = new Array("日","月","火","水","木","金","土"); myDate = new Date(); accessDate = (myDate.getMonth()+1) + "月" + myDate.getDate() + "日(" + days[myDate.getDay()] + ")" accessHours = (myDate.getHours() < 10)? "0" + myDate.getHours(): myDate.getHours(); accessMinutes = (myDate.getMinutes() < 10)? "0" + myDate.getMinutes(): myDate.getMinutes(); accessTime = accessHours + "：" + accessMinutes; accessTime2 = accessDate + "　" + accessHours + "：" + accessMinutes; </SCRIPT> 基本的な物だとは思いますが、参考に載せておきます。 それでは、申し訳ございませんが、有識者の方のご返答お待ちしております。

  • 時間ごとにスタイルシートを変える

    <HEAD> <SCRIPT LANGUAGE="JavaScript"> function geth(t){ if ( t <= 05 ) document.write ("<body link="#0000ff">"); else { if ( t <= 17 ) document.write ("<body link="#0000ff">"); else { if ( t <= 23 ) document.write ("<body link="#0000ff">"); }}} </SCRIPT> </HEAD> <SCRIPT LANGUAGE="JavaScript"> h = new Date(); geth(h.getHours()); </SCRIPT> Java Script を使うと時間ごとに異なったフォントの色を のように指定できますが、 リンクの背景色のようなスタイルシートを使わないと出来ない 部分を時間ごとに色を変える方法をお願いします。 a { background-color : ccf ; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する