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

現在 javascript で時間を秒単位でカウントするものを作成したいと思っています。

サンプルを探したところ
http://www16.big.or.jp/~ogura1/java_scr/count_p.html

のようにフォームをつかったカウンターはよく見かけるのですがフォームを使わずに作成できないでしょうか?
先ほどから上記URLのソースを参考に作っているのですがなかなかできません。。

また最終的に目指しているのは開始時間(秒)を関数に渡してそこから上記URLのように1秒ずつカウントしていく感じです。

どなたかやり方のわかる方おしえていただけないでしょうか?

●質問者: reiko-5555
●カテゴリ:ウェブ制作
✍キーワード:JavaScript URL カウンター カウント ソース
○ 状態 :終了
└ 回答数 : 9/9件

▽最新の回答へ

1 ● KUROX
●10ポイント

■サンプル

http://www.red.oit-net.jp/tatsuya/java/realtime3.htm

ダイナミックHTMLを使うことで実現可能です。

◎質問者からの返答

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


2 ● GEN111
●10ポイント

フォームを使わないというのは getElementById と innerHTML で書き換えるのが簡単です。

開始時間を渡すというのがピンと来なかったので myTimer.start の引数から始めるようにして見ました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
 <script type="text/javascript">
 var myTimer = {
 startTime : 0,
 tid : null,

 // 表示
 show : function() {
 document.getElementById('timer').innerHTML = Math.floor(((new Date).getTime() - this.startTime) / 1000) ;
 },

 // 開始
 start : function(offset) {
 this.startTime = (new Date).getTime() - offset * 1000 ;
 this.tid = setInterval('myTimer.show()', 1000) ;
 document.getElementById('timer').innerHTML = offset ;
 },

 // 停止
 stop : function() {
 clearInterval(this.tid) ;
 document.getElementById('timer').innerHTML += ' 停止' ;
 }
 }
 </script>
 </head>

 <body>
 <div id="timer">&nbsp;</div>
 <form>
 <input type="button" onclick="myTimer.start(0)" value="開始" />
 <input type="button" onclick="myTimer.stop()" value="停止" />
 </form>
 </body>
</html>

人力検索はてな

◎質問者からの返答

ご回答ありがとうございます?。

ボタンで開始停止するのも面白いですね!勉強になります☆


3 ● ardarim
●10ポイント
<FORM NAME="time"><INPUT NAME="str" SIZE=9></FORM>

の代わりに、

<DIV ID="time"></DIV>

を置きます。(IDで参照できるようになっていればDIV以外でもかまいません。)


 document.forms['time'].elements['str'].value = h3 + ":" + m3 + ":" + s3;

のかわりに

 document.getElementById('time').innerText = h3 + ":" + m3 + ":" + s3;

を置きます。

URLはダミー

http://q.hatena.ne.jp/1189171331

◎質問者からの返答

ありがとうございます!書き換え部分のところをそのまま書き換えで出来ました!ありがたいです?

重ね重ね申し訳ないのですが、表示の

00:03:53 の部分を

1 日 00:00:01

のように24時間を超えた場合に 1日としてカウントし、時間、分、秒をリセットし再度カウントするにはどのようにするべきでしょうか。。

回答いただけると幸いです。


4 ● noname
●20ポイント

formの代わりに

<div id="time"></div>

など、てきとうにテキスト表示する部分作って、

document.getElementById("time").innerHTML = [表示するカウント]

と代入すればよいかと。

開始秒ですが、最初に現在時刻を保存するときに、その秒のぶんだけ引けばいいですね。

以下つたないサンプルですが参考にどうぞ。

bodyのonLoadでstart()関数を呼び出して、開始秒をセットしてカウントし始めます。

今アップロードできるサーバがないので、ローカルに保存して実行してみてください。

http://d.hatena.ne.jp/takabow/20070907

<html>
<script type="text/javascript">
<!--
var startDate; //開始時刻

function start(offset) {
startDate = new Date(); //最初に開始時刻を保存する
startDate.setSeconds( startDate.getSeconds() - offset); //開始秒のぶんだけ引く
tick(); //カウント開始
}

function tick() {
currentDate = new Date(); //現在時刻取得
diffDate = new Date(currentDate - startDate); //現在時刻から開始時刻を引いて差を求める
document.getElementById("time").innerHTML = diffDate.getMinutes() + ":" + diffDate.getSeconds(); //タグに表示
setTimeout("tick()", 1000); //1000ミリ秒(1秒)後に再びtick()が実行される
}
// -->
</script>

<body onLoad="start(10)">
<div id="time">ここに時間が表示されます</div>
</body>
</html>
◎質問者からの返答

ご丁寧にありがとうございます!こちらも試したと所、うまくいきました☆

ardarim さんにもたずねているのですが、

3:53 の部分を

1 日 00:00:01

のように24時間を超えた場合に 1日としてカウントし、時間、分、秒をリセットし再度カウントするにはどのようにするべきでしょうか。。

回答いただけると幸いです。


5 ● noname
●20ポイント

表示部分を整形するだけですー

私もJavaScriptは得意じゃないのであまり綺麗に書けてないですが・・・・

表示サンプルをhttp://hatena.s301.xrea.com/count.htmlにおきました。

また、コードを以下に示します。

日付部分については、秒分時と同じ方法だと1ヶ月の限界である31日までしか表せないので、

現在のミリ秒を1日のミリ秒で割って表現してます。

表示を見せるために、60*60*60*2 + 60*60*15 + 60*7 + 6秒後、つまり2日と15時間7分6秒後からスタートしてます。

<html>
<script type="text/javascript">
<!--
var startDate; //開始時刻保存用

function start(offset) {
startDate = new Date() - offset*1000; //最初に開始時刻から、開始する秒を引いて保存する
tick(); //カウント開始!
}

function tick() {
currentDate = new Date(); //現在時刻取得
diffDate = new Date(currentDate - startDate); //現在時刻から開始時刻を引いて差を求める

//ここで表示を整形します。
sec = diffDate.getUTCSeconds();
sec = (sec < 10) ? "0" + sec : sec; //10未満なら0を追加
min = diffDate.getUTCMinutes();
min = (min < 10) ? "0" + min : min; //10未満なら0を追加
hour = diffDate.getUTCHours()
hour = (hour < 10) ? "0" + hour : hour; //10未満なら0を追加
day = Math.floor(diffDate.getTime()/(60*60*24*1000)); //1日分のミリ秒で割って日にちを求める。

document.getElementById("time").innerHTML = day + "日 " + hour + ":" + min + ":" + sec; //divタグに表示
setTimeout("tick()", 1000); //1000ミリ秒(1秒)後に再びtick()が実行される
}
// -->
</script>

<body onLoad="start(60*60*24*2 + 60*60*15 + 60*7 + 6)">
<div id="time">ここに時間が表示されます</div>
</body>
</html>
◎質問者からの返答

ずばりな回答ありがとうございます!

・・この後は自分でできると思っていたのですが、、

このスタートの時間をいくつか別の時間を与えてやって

として幾つか表示させてやりたいのです。イメージとしては

1日 00:00:08

2日 00:10:08

0日 00:02:33

のようにスタートタイムを個別で設定してやって、スタートタイムごとにいくつか表示されている感じです。

div id="xxx" の xxx の部分を関数に引数としてあたえてやれば、、と思ってやっているのですがどうにもうまくいきません。。

何度もすみませんが回答いただけると幸いです。


1-5件表示/9件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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