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

Question

reiko-5555

14

13もっと見る

150pt

ウェブ制作

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

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

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

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

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

回答の条件

1人5回まで

登録：2007/09/07 22:22:14
終了：2007/09/09 16:42:08

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

KUROX35421402007/09/07 22:37:11

10pt

■サンプル

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

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

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

2007/09/08 02:23:07

No.2

GEN111472582007/09/07 23:05:27

10pt

　フォームを使わないというのは 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>

人力検索はてな

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

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

2007/09/08 02:30:44

No.3

ardarim8971452007/09/08 00:35:58

10pt

<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日としてカウントし、時間、分、秒をリセットし再度カウントするにはどのようにするべきでしょうか。。

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

2007/09/08 02:27:00

No.4

noname51142007/09/08 00:37:51

20pt

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日としてカウントし、時間、分、秒をリセットし再度カウントするにはどのようにするべきでしょうか。。

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

2007/09/08 02:29:25

No.5

noname51142007/09/08 03:53:02

20pt

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

私も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　の部分を関数に引数としてあたえてやれば、、と思ってやっているのですがどうにもうまくいきません。。

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

2007/09/09 02:13:13

No.6

GEN111472582007/09/08 11:43:54

20pt

デフォルトの開始時間は 23時間59分59秒

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="text/javascript">
      var myTimer = {
        timerStart : null, // 開始時刻
         timerID    : null  // タイマーID
        } ;

      // タイマー表示
      myTimer.show = function() {
        with (new Date((new Date) - this.timerStart)) {
          document.getElementById('timer').innerHTML =
            Math.floor(getTime() / (3600 * 24 * 1000))+'日 '+
              toGMTString().replace(/.*(\d\d:\d+:\d+).*/, '$1') ;
        }
      }

      // タイマー開始
      myTimer.start = function(offset) {
        this.timerStart = new Date((new Date) - 1000 * (parseFloat(offset) || 0)) ; // 数値以外は 0
        this.timerID = setInterval('myTimer.show()', 500) ;
        this.show() ;
      }

      // タイマー停止
      myTimer.stop = function() { clearInterval(this.timerID) ; }
    </script>
  </head>

  <body>
    <div id="timer">&nbsp;</div>
    <form name="myform">
      <input type="text" name="offset" style="text-align:right" value="86390" /> 秒から<br />
      <input type="button" onclick="myTimer.start(document.myform.offset.value)" value="開始" />
      <input type="button" onclick="myTimer.stop()" value="停止" />
    </form>
  </body>
</html>

人力検索はてな

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

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

takabow　さんにもお尋ねしているのですが、

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

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

1日 00:00:08

2日 00:10:08

0日 00:02:33

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

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

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

2007/09/09 02:14:56

No.7

noname51142007/09/09 02:39:02

10pt

こんな感じですか？

http://hatena.s301.xrea.com/count.html

JavaScripでのテキストフォーマットってreplace関数でできたんですねー

表示部分をGEN111さんと同じやり方にしてみました。

# パクってすみません(^^;

<html>
<script type="text/javascript">
<!--
	var startDate1;
	var startDate2;
	var startDate3;

	function start(offset1, offset2, offset3) {
		startDate1 = new Date() - offset1*1000; //最初に開始時刻から、開始する秒を引いて保存する
		startDate2 = new Date() - offset2*1000;
		startDate3 = new Date() - offset3*1000;
		tick(); //カウント開始！
	}
	
	function tick() {
		currentDate = new Date(); //現在時刻取得
		
		diffDate = new Date(currentDate - startDate1); 
		document.getElementById("time1").innerHTML = Math.floor(diffDate.getTime()/(60*60*24*1000)) + "日 " + diffDate.toGMTString().replace(/.*(\d\d:\d+:\d+).*/, '$1');//day + "日 " + hour + ":" + min + ":"  + sec; //divタグに表示
		diffDate = new Date(currentDate - startDate2);
		document.getElementById("time2").innerHTML = Math.floor(diffDate.getTime()/(60*60*24*1000)) + "日 " + diffDate.toGMTString().replace(/.*(\d\d:\d+:\d+).*/, '$1');//day + "日 " + hour + ":" + min + ":"  + sec; //divタグに表示
		diffDate = new Date(currentDate - startDate3);
		document.getElementById("time3").innerHTML = Math.floor(diffDate.getTime()/(60*60*24*1000)) + "日 " + diffDate.toGMTString().replace(/.*(\d\d:\d+:\d+).*/, '$1');//day + "日 " + hour + ":" + min + ":"  + sec; //divタグに表示

		setTimeout("tick()", 1000); //1000ミリ秒(1秒)後に再びtick()が実行される
	}
// -->
</script>

<body onLoad="start(60*60*24*1 + 8, 60*60*24*2 + 60*10 + 8, 60*2 + 33)">
<p id="time1">ここに時間が表示されます</p>
<p id="time2">ここに時間が表示されます</p>
<p id="time3">ここに時間が表示されます</p>
</body>
</html>

No.9

GEN111472582007/09/09 08:10:10

20pt

以前のにはタイマーを停止せずに再スタートするとおかしくなるバグがありました (今回の用件には必要のないことかもしれませんが)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <style type="text/css">
      form { margin-bottom : 1em }
    </style>

    <script type="text/javascript">
      var myTimer = {
        timers : [] // タイマー
        } ;

      // タイマー表示
      myTimer.show = function(id, start) {
        with (new Date((new Date) - start)) {
          document.getElementById(id).innerHTML =
            Math.floor(getTime() / (86400000))+'日 '+
              toGMTString().replace(/.*(\d\d:\d+:\d+).*/, '$1') ;
        }
      }

      // タイマー開始
      myTimer.start = function(id, offset) {
        if (this.timers[id]) this.stop(id) ;
        var startTime = (new Date((new Date) - 1000 * (parseFloat(offset) || 0))).getTime() ; // 数値以外は 0
        this.timers[id] = setInterval('myTimer.show("'+id+'",'+startTime+')', 500) ;
        this.show(id, startTime) ;
      }

      // タイマー停止
      myTimer.stop = function(id) {
        clearInterval(this.timers[id]) ;
        delete this.timers[id] ;
      }

      onload = function() {
        myTimer.start('timer1', 0) ; // 自動スタート
      }
    </script>
  </head>

  <body>
    <form name="myform1">
      <div id="timer1">タイマー1</div>
      <input type="text" name="offset1" style="text-align:right" value="0" /> 秒から
      <input type="button" onclick="myTimer.start('timer1', document.myform1.offset1.value)" value="開始" />
      <input type="button" onclick="myTimer.stop('timer1')" value="停止" />
    </form>

    <form name="myform2">
      <div id="timer2">タイマー2</div>
      <input type="text" name="offset2" style="text-align:right" value="86390" /> 秒から
      <input type="button" onclick="myTimer.start('timer2', document.myform2.offset2.value)" value="開始" />
      <input type="button" onclick="myTimer.stop('timer2')" value="停止" />
    </form>

    <form name="myform3">
      <div id="timer3">タイマー3</div>
      <input type="text" name="offset3" style="text-align:right" value="950390" /> 秒から
      <input type="button" onclick="myTimer.start('timer3', document.myform3.offset3.value)" value="開始" />
      <input type="button" onclick="myTimer.stop('timer3')" value="停止" />
    </form>
  </body>
</html>

人力検索はてな

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

参考にさせていただきながらなんとか目指すものが完成いたしました。ご丁寧に何度もご回答ありがとうございました！

2007/09/09 16:38:35

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

人力検索はてな現在 javascript で時間を秒単位でカウント.. 2007-09-08 01:01:22

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

noname · Accepted Answer · 2007-09-09T05:14:44+09:00

2重に投稿すみません。

div id="xxx" の　xxx　の部分を関数に引数としてあたえてやれば

という部分を読み落としてましたので、そういう呼び出し方だできるように書き換えました。

今回は微妙にクラスにしてみました。

onLoad時にCounter()に引数を与えて3つ動かしてます。

Counterと表示部分増やせば、たくさんカウンター表示できます。

http://hatena.s301.xrea.com/count.html

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

<html>
<script type="text/javascript">
<!--
  function Counter(_id, _offset) {
    var id = _id; //表示すべきタグのID
    var startDate = new Date() - _offset*1000; //最初に開始時刻から、開始する秒を引いて保存する

    var tick = function() {
      diffDate = new Date(new Date() - startDate); //現在時刻と開始時刻の差分を取る
      day = Math.floor(diffDate.getTime()/(60*60*24*1000)); // 経過日数を求める
      time = diffDate.toGMTString().replace(/.*(\d\d:\d+:\d+).*/, '$1'); //経過時刻を求める
      document.getElementById(id).innerHTML = day + "日 " + time; //IDのタグに表示
      setTimeout(tick, 1000); //1000msごとに繰り返し
    }
    tick(); //一番最初にtickを呼び出す部分
  }
// -->
</script>

<body onLoad="Counter('time1', 60*60*24*1 + 8), Counter('time2', 60*60*24*2 + 60*10 + 8), Counter('time3', 60*2 +33)">
  <p id="time1">ここに時間が表示されます</p>
  <p id="time2">ここに時間が表示されます</p>
  <p id="time3">ここに時間が表示されます</p>
</body>
</html>

noname · Accepted Answer · 2007-09-09T05:14:44+09:00

2重に投稿すみません。

div id="xxx" の　xxx　の部分を関数に引数としてあたえてやれば

という部分を読み落としてましたので、そういう呼び出し方だできるように書き換えました。

今回は微妙にクラスにしてみました。

onLoad時にCounter()に引数を与えて3つ動かしてます。

Counterと表示部分増やせば、たくさんカウンター表示できます。

http://hatena.s301.xrea.com/count.html

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

<html>
<script type="text/javascript">
<!--
  function Counter(_id, _offset) {
    var id = _id; //表示すべきタグのID
    var startDate = new Date() - _offset*1000; //最初に開始時刻から、開始する秒を引いて保存する

    var tick = function() {
      diffDate = new Date(new Date() - startDate); //現在時刻と開始時刻の差分を取る
      day = Math.floor(diffDate.getTime()/(60*60*24*1000)); // 経過日数を求める
      time = diffDate.toGMTString().replace(/.*(\d\d:\d+:\d+).*/, '$1'); //経過時刻を求める
      document.getElementById(id).innerHTML = day + "日 " + time; //IDのタグに表示
      setTimeout(tick, 1000); //1000msごとに繰り返し
    }
    tick(); //一番最初にtickを呼び出す部分
  }
// -->
</script>

<body onLoad="Counter('time1', 60*60*24*1 + 8), Counter('time2', 60*60*24*2 + 60*10 + 8), Counter('time3', 60*2 +33)">
  <p id="time1">ここに時間が表示されます</p>
  <p id="time2">ここに時間が表示されます</p>
  <p id="time3">ここに時間が表示されます</p>
</body>
</html>

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

ベストアンサー

noname51142007/09/09 05:14:44

その他の回答（8件）

KUROX35421402007/09/07 22:37:11

GEN111472582007/09/07 23:05:27

ardarim8971452007/09/08 00:35:58

noname51142007/09/08 00:37:51

noname51142007/09/08 03:53:02

GEN111472582007/09/08 11:43:54

noname51142007/09/09 02:39:02

noname51142007/09/09 05:14:44ここでベストアンサー

GEN111472582007/09/09 08:10:10

コメント（0件)

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

トラックバック