現在 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

ベストアンサー

id:takabow No.8

noname回答回数51ベストアンサー獲得回数142007/09/09 05:14:44

ポイント30pt

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>
id:reiko-5555

ありがとうございますー!これで目指すものが

本日完成しました☆ご丁寧にありがとうございました!

javascriptについて知識が皆無でしたが、これを機に勉強してみようと思いました☆

2007/09/09 16:37:28

その他の回答(8件)

id:KUROX No.1

KUROX回答回数3542ベストアンサー獲得回数1402007/09/07 22:37:11

ポイント10pt

■サンプル

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

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

id:reiko-5555

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

2007/09/08 02:23:07
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582007/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>

人力検索はてな

id:reiko-5555

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

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

2007/09/08 02:30:44
id:ardarim No.3

ardarim回答回数897ベストアンサー獲得回数1452007/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

id:reiko-5555

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

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

00:03:53 の部分を

1 日 00:00:01

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

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

2007/09/08 02:27:00
id:takabow No.4

noname回答回数51ベストアンサー獲得回数142007/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>
id:reiko-5555

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

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

3:53 の部分を

1 日 00:00:01

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

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

2007/09/08 02:29:25
id:takabow No.5

noname回答回数51ベストアンサー獲得回数142007/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>
id:reiko-5555

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

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

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

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

1日 00:00:08

2日 00:10:08

0日 00:02:33

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

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

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

2007/09/09 02:13:13
id:GEN111 No.6

GEN111回答回数472ベストアンサー獲得回数582007/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>

人力検索はてな

id:reiko-5555

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

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

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

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

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

1日 00:00:08

2日 00:10:08

0日 00:02:33

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

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

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

2007/09/09 02:14:56
id:takabow No.7

noname回答回数51ベストアンサー獲得回数142007/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>
id:takabow No.8

noname回答回数51ベストアンサー獲得回数142007/09/09 05:14:44ここでベストアンサー

ポイント30pt

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>
id:reiko-5555

ありがとうございますー!これで目指すものが

本日完成しました☆ご丁寧にありがとうございました!

javascriptについて知識が皆無でしたが、これを機に勉強してみようと思いました☆

2007/09/09 16:37:28
id:GEN111 No.9

GEN111回答回数472ベストアンサー獲得回数582007/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>

人力検索はてな

id:reiko-5555

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

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

2007/09/09 16:38:35

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

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

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

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

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