- 締切済み
続・時間によって表示される画像を替えたい
画像(サンプル画像アップ致しました)のようにしたいです。 先日私のご質問にお答え頂きました方に大変感謝申し上げます。 じつは昨日からずっとスクリプトと格闘しています。 もうお手上げです。ヒントでもいいです。お願いします。 詳細===== オープン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>
- alaska217
- お礼率32% (31/94)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
前の質問に補足が出てたのね？！見てませんでした。 ＞デクリメント HTML文書の中に"--"が出てきては、文法上まずい。 なので外部ファイルにしてね。という意味。 ＞悪意は・・・ それは、himajin100000さんに向けてでした。 たぶん、himajin100000さん、いわく、 「普段回答者としているものよ、UTCも考えろよ！ そして、どうせやるなら、小手先の数値でごまかすのではなく dateオブジェクトがあるんだから、計算も「その型」でやることも覚えろ～！」 と言いたかったのかもしれません。（単に暇だったかもしれませんが・・） と、解釈できているのに、あえて、その小手先の数値で計算して短くコードを書き、 苦労しただろうあの長いコードを無視したかのような事だったので・・・。 さて、ご要望のもの書いてみましたよ。どうですか？
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> #clock { margin: 0px; background-color: #000; text-align: center; color: white; } </style> <body> <p id="clock"> <img src="tokei/tekitou.png" alt="*" id="open"><br> <img src="tokei/0.png" alt="*" id="hour1"> <img src="tokei/0.png" alt="*" id="hour2"> <img src="tokei/colon.png" alt=":" id="colon"> <img src="tokei/0.png" alt="*" id="min1"> <img src="tokei/0.png" alt="*" id="min2"><br> Openhour 12:00-19:30 / Close Wednesday </p> <script type="text/javascript"> (function ( ) { var images = [ ] var cnt = 14; var path = 'tokei/'; var state = 12; var colon = document.getElementById( 'colon' ); while( cnt-- ) (images[ cnt ] = new Image()).src = path + cnt + '.png'; images[10].src = path + 'close.png'; images[11].src = path + 'open.png'; images[12].src = path + 'colon.png'; images[13].src = path + 'black.png'; setInterval( function ( ) { state = 12 == state ? 13: 12; colon.src = images[ state ].src; }, 500); setInterval( function ( ) { var d = new Date; var t = d.getHours() * 100 + d.getMinutes() var n = 10000 + t + ''; var s = d.getDay() == 3 || t < 1200 || 1930 < t ? 10: 11; 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; }, 1000); })(); </script> 全角空白は半角に。スクリプトが動かない人のことも考えましょう～！
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> このファイルを外部に分けたいのですが、 http://www.tohoho-web.com/js/write.htm#jsfile
- mitarashi
- ベストアンサー率59% (574/965)
phpをお勉強中で、JavaScriptにも箸を付けざるをえなくなっている初心者ですが、試しにやってみました。質問者さんの考えられているデザインに添っているとは思えませんが、何かの足しになるかもしれませんので、投稿させていただきます。 <HTML> <TITLE>rclock1</TITLE> <SCRIPT language="JavaScript"> function getClock(){ now = new Date(); hou = now.getHours(); min = now.getMinutes(); if(10<=hou && hou<22){ document.myImg.src="kaiten.gif" } else { document.myImg.src="heiten.gif" } document.form1.clock.value=hou + ":" + min; setTimeout("getClock()",60000); } </SCRIPT> <BODY onLoad="getClock()" bgcolor="black"> <IMG src="dummy.gif" name="myImg"> <FORM name="form1"> <INPUT TYPE="text" name="clock" size=10" style="border:0; color:white; background:transparent;"> </FORM> </BODY> </HTML>
