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

締切済

質問者：alaska217
質問日時：2010/01/23 21:07
回答数：4件

画像(サンプル画像アップ致しました)のようにしたいです。

先日私のご質問にお答え頂きました方に大変感謝申し上げます。
じつは昨日からずっとスクリプトと格闘しています。
もうお手上げです。ヒントでもいいです。お願いします。

詳細=====
オープン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>

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： babu_baboo
回答日時：2010/02/01 16:52

前の質問に補足が出てたのね？！見てませんでした。

＞デクリメント
HTML文書の中に"--"が出てきては、文法上まずい。
なので外部ファイルにしてね。という意味。

＞悪意は・・・
それは、himajin100000さんに向けてでした。

たぶん、himajin100000さん、いわく、
「普段回答者としているものよ、UTCも考えろよ！
そして、どうせやるなら、小手先の数値でごまかすのではなく
dateオブジェクトがあるんだから、計算も「その型」でやることも覚えろ～！」
と言いたかったのかもしれません。（単に暇だったかもしれませんが・・）

と、解釈できているのに、あえて、その小手先の数値で計算して短くコードを書き、
苦労しただろうあの長いコードを無視したかのような事だったので・・・。

さて、ご要望のもの書いてみましたよ。どうですか？

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2010/01/31 20:16

<!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>

全角空白は半角に。スクリプトが動かない人のことも考えましょう～！

- 0
- 件

通報する

No.2

回答者： taloo
回答日時：2010/01/25 09:00

> このファイルを外部に分けたいのですが、

http://www.tohoho-web.com/js/write.htm#jsfile

- 0
- 件

通報する

No.1

回答者： mitarashi
回答日時：2010/01/24 00:18

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>