HTML関係の質問です。

URL先のページ中央に、「残り○○時間○○分○○秒」という表示があるのですが、
これはどうやって表示させているのでしょうか。
http://www.rakuten.ne.jp/gold/angers/
同じようなものを作りたいのですが、どうやったら作れるか教えてください。

回答の条件
  • 1人5回まで
  • 登録:2008/03/27 13:09:12
  • 終了:2008/04/03 13:10:02

回答(5件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332008/03/27 13:15:09

ポイント20pt

JavaScriptを使って実現することができます。下記サイトを参照してください。

なお、クライアントPC(エンドユーザーのPC)の内蔵時計を使っていますので、クライアントPCの内蔵時計が狂っていると期待通りの表示はされません。


参考サイト

経過(残り)時間の表示

時計を表示する(3)

id:rupopon

ありがとうございました。

参考サイト先はフォームに表示されているようなのですが、GIF画像を表示させる場合には

やり方がまた違うのでしょうか。

具体的に教えていただけるとたすかります。

2008/03/27 13:21:25
id:y-kawaz No.2

y-kawaz回答回数1420ベストアンサー獲得回数2252008/03/27 13:38:46

ポイント20pt

gif画像の数字を使う場合もそんなに変わらないです。フォームのvalueを変える代わりに、各桁のimgタグのsrcを変更するだけです。

例えば以下は現在秒を画像表示する例です。

<html>
<body>
<img id="sec2"/><img id="sec1">
</body>
<script tyype="text/javascript">
function tick() {
	var url = 'http://www.rakuten.ne.jp/gold/angers/top/count/count16r/';
	var sec = new Date().getSeconds();
	document.getElementById('sec2').src = url + parseInt(sec/10) +'.gif';
	document.getElementById('sec1').src = url + (sec%10) +'.gif';
	setTimeout(tick, 200);
}
tick();
</script>
</html>
id:rupopon

ありがとうございました。参考にさせていただきます。

2008/03/27 14:17:17
id:pahoo No.3

pahoo回答回数5960ベストアンサー獲得回数6332008/03/27 13:56:28

ポイント20pt

GIF画像を表示させる場合には、やり方がまた違うのでしょうか。

残り時間(数値)を求めるところまでは同じです。

数値を画像に置き換えることも、JavaScriptを使って実現できます。

その方法については「お銚子カウンター」を参照ください(クッキーの話は本件とは関係ありません)。

id:rupopon

ありがとうございました。参考にさせていただきます。

2008/03/27 14:17:44
id:masakaz No.4

masakaz回答回数5ベストアンサー獲得回数02008/03/27 14:02:59

ポイント20pt

カウントダウンタイマーを表示する

http://www.phoenix-c.or.jp/~s-moon/sub349.htm

id:rupopon

ありがとうございました。参考にさせていただきます。

2008/03/27 14:18:03
id:niwa-mikiho No.5

niwa-mikiho回答回数508ベストアンサー獲得回数382008/03/27 14:08:28

ポイント20pt

imgHH = '0.gif';

document.Hour.src=imgHH;

のようにインターバルで HTML で言う <img> の src に代入しているだけです。

すでに読み込まれた画像ならすぐに変わりますが、まだ読み込まれて無い画像は表示しようとする瞬間にサーバーから読み込まれるためすぐに切り替わらないことがあります。

これを回避するには、ページの最初の方でダイナミックに切り替えて表示する画像をあらかじめ読み込んでおく仕組み必要になります。

Javascript の onLoad で検索するとやりかたは多く出てくると思います。

id:rupopon

ありがとうございました。参考にさせていただきます。

2008/03/27 14:18:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません