人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: rupopon
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML URL
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● pahoo
●20ポイント

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

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


参考サイト

経過(残り)時間の表示

時計を表示する(3)

◎質問者からの返答

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

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

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

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


2 ● y-kawaz
●20ポイント

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>
◎質問者からの返答

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


3 ● pahoo
●20ポイント

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

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

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

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

◎質問者からの返答

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


4 ● masakaz
●20ポイント

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

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

◎質問者からの返答

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


5 ● niwa-mikiho
●20ポイント

imgHH = '0.gif';

document.Hour.src=imgHH;

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

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ