はじめまして。
私は自分のお店(お菓子のお店)ホームページをつくってます。
時間、曜日によって<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>
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にいたる。
もうひとつ言わせてもらいます。
たくさんの疑問のそれぞれの解決方法は、できるだけ1箇所にあったほうが良いと思う。
今後同じような疑問をもったかたが、解決方法を探したときに、あちこちに、同じような
質問があり、解決するまでに時間がかかっていては、時間の無駄。
例えばQNo.5620923の回答を
alert(['こんばんは','おはようございます','こんにちは'][((5<h)+(10<h))*(h<19)]);
みたいにして、簡略化しすぎたことは、お詫びします
No.15
- 回答日時:
> このオープン画像表示の下に
> 時計を表示させたいと思っています。
そこにdocument.write()で書き出すとか、
画像のsrcを書き換えるとかで良いんじゃないんですか?
それから、制作依頼は質問掲示板ではなく、制作会社にお願いして下さい。
http://www.hyuki.com/writing/techask.html
他の人は制作依頼を受けてくれる人もいるかもしれませんが、
先も言ったとおり、私はあくまでアルゴリズムの説明しかしません。
アルゴリズムの説明ができない場合は例で答えることがありますが、(質問掲示板上での)制作依頼は受け付けていませんので。
http://search.goo.ne.jp/web.jsp?MT=%E3%83%9B%E3% …
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>
別に回答のをコピーペーストされてらっしゃる用ですのでどんなものを書いても良いと思いますが、
開店時間や閉店時間を変更された場合、また質問(制作依頼)をされるつもりなのかなあ、と思うわけで。
別に制作依頼があるたびに作り直すつもりがあるなら、私はそれに対して何も言いませんが。
> あなたのために相当な時間を割いてくれている。コードの量・質ともに・・・。
私は質問という呼び方で制作依頼をされるのには答えないようにしていますから、
質問者さんが作られたコードを改変するのが中心です。
(解答ではなく解法、プログラム的に言えばアルゴリズムを答えるようにしています。)
それほど時間を割いている訳じゃないので、お気になさらずに。
一から作った物を気まぐれで投稿するときはありますが、
作っただけで投稿しない、または自分のサイトにアップするというのが多いです。
ありがとうございます。
質問なのですが、以前のトピから伝えているように、このオープン画像表示の下に
時計を表示させたいと思っています。
ホームページは広告と同じですし、あり程度拘りたいのが私の見解です、ですので時計関連はヘルベチカという書体で統一したいため、すべて画像になっています。
また、今回は質問ですが、このように沢山の方が時間を割いてコードを提供していただいており、とても感謝しています。
次回からは制作依頼という形でお願いしたいとおもっておいることも事実です。
これをどう組み込めばいいのでしょうか?
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
- 回答日時:
なぜここの回答の補足やお礼に書き込んで続けないのか?
難しいなら難しいので、噛み砕いて教えてほしいとか書けばよいのに。
俺は好きで書いているのだから、どうでもよいが、他の回答者様は、
あなたのために相当な時間を割いてくれている。コードの量・質ともに・・・。
ちなみに、要望のあった画像は、そもそも数字を画像にする必要があるのか?
スタイルシートで飾るだけでいいんじゃない?
スタイルシートにてどう飾るのでしょうか?
本当に申し訳ないのですが初心者なもので、まったく分かりません。
どうかご教授いただけますでしょうか?
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の利用率よりも低いレアケースとして無視しています。
あしからずご了承ください。
ありがとうございます!!
||を使って...なるほどです!!
実はレイアウト的にこのオープン画像やクローズ画像の下にデジタル時計をつけたいと思い、
<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' );
こんなのはどうでしょう?
悪意はけっしてありませんよ。(笑)
むしろ勉強になってます。
悪意はけっしてありませんよ。(笑)
というのは私にとってということでしょうか??
それともスクリプトを書き込んでくれた方に、ということでしょうか??
混乱しています。笑
No.10
- 回答日時:
>#5 お礼
これだけ見る限りではおかしいところが見当たらない。実際のサイトで検証できればわかるかもしれないけど。
===
>ALL
#それにしても皆UTCスルーしているなぁ。俺が一番努力したところなのに(少しイラついた笑い)。
#個人的には文字列と数値の足し算や比較(文字列連結は文字列同士行うべきって思っているし、数値から真偽値への暗黙変換とかも嫌い。
#数値として比較すべきものは明示的に数値の型にしないといつかこういう目に遭うと思う
http://www.tokumaru.org/d/20090924.html
#自分の#1の反省点としては変数rangeのスコープをちゃんと小さく抑えなかったことかな。なお、IEがDOM 2 Traversal and Rangeに対応してないことは知っていて書いてるので反省はしていない。
#まだポイント厨モード(プロフィール参照)じゃないので少し多めに出現しております。
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
画面遷移を行わずに同一ページ...
-
スマホ上で、左右スワイプで次...
-
Outlookのアカウントがあるとメ...
-
Colorboxがうまく設置できません
-
<tr>指定した表の行要素をボ...
-
【GAS】WEBアプリでハイパーリ...
-
GASでチェックボックスを一括of...
-
セレクトボックスで配列を呼び...
-
jqueryのselect2で検索欄の文字...
-
セレクトを全て選択されていな...
-
読み込んだQRコードをフォーム...
-
初心者です。gulpでコンパイル...
-
jquery 診断コンテンツにチェッ...
-
jsで質問です。 ボタンが二つ存...
-
jsonテキストデータの並び替え...
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
複数のボールの落下、バウンド...
-
連番画像「次へ」「前へ」で、...
-
複数の画像の中から複数の画像...
-
javascript 時計24時間表示
-
HPB_SCRIPT_ROV_50
-
imgのaltとtitleの要素を抜き出...
-
JavaScriptでシンプルなスライ...
-
クリックとダブルクリック
-
画像の座標位置取得
-
JavaScriptで画面サイズによっ...
-
HPに複数の画像をクリックで切...
-
スロットが変な動きをします
-
オンマウスで画像と文字を同時...
-
画像の入れ替え
-
テーブル幅を自動で画像幅にし...
-
Dreamweaver CS3を使用してい...
-
jQueryで画像を重ねる
おすすめ情報