JavaScriptのタイマー

投稿日：2015年11月12日更新日：2020年5月18日

えーボタンを押すと、時間の計測がはじまり、別のボタンを押すとそのタイマーがとまるというもの。

WEBのアプリでは比較的よくお目にかかるタイプかと思います。

一番多いのは情報商材のページかもしれないですけどね・・・(汗)

そんなタイマーを実装する機会があったので実装してみました。

<script type="text/javascript">
var PassSec; // 秒数カウント用変数

// 繰り返し処理の中身
function showPassage() {
   PassSec++; // カウントアップ
   var msg = "ボタンを押してから " + PassSec + "秒が経過しました。"; // 表示文作成
   document.getElementById("PassageArea").innerHTML = msg; // 表示更新
}

// 繰り返し処理の開始
function startShowing() {
   PassSec = 0; // カウンタのリセット
   PassageID = setInterval('showPassage()',1000); // タイマーをセット(1000ms間隔)
   document.getElementById("startcount").disabled = true; // 開始ボタンの無効化
}

// 繰り返し処理の中止
function stopShowing() {
   clearInterval( PassageID ); // タイマーのクリア
   document.getElementById("startcount").disabled = false; // 開始ボタンの有効化
}
</script>

<!-- ▼HTML部分▼ -->
<p>
   <input type="button" value="カウント開始" id="startcount" onclick="startShowing();" />
   <input type="button" value="カウント停止" id="endcount" onclick="stopShowing();" />
</p>
<p id="PassageArea">（ここにカウントが表示されます）</p>

var PassSec; // 秒数カウント用変数

// 繰り返し処理の中身

function showPassage() {

PassSec++; // カウントアップ

var msg = "ボタンを押してから " + PassSec + "秒が経過しました。"; // 表示文作成

document.getElementById("PassageArea").innerHTML = msg; // 表示更新

}

// 繰り返し処理の開始

function startShowing() {

PassSec = 0; // カウンタのリセット

PassageID = setInterval('showPassage()',1000); // タイマーをセット(1000ms間隔)

document.getElementById("startcount").disabled = true; // 開始ボタンの無効化

}

// 繰り返し処理の中止

function stopShowing() {

clearInterval( PassageID ); // タイマーのクリア

document.getElementById("startcount").disabled = false; // 開始ボタンの有効化

}

</script>

<p>

</p>

<p id="PassageArea">（ここにカウントが表示されます）</p>

下記リンクのコピペなんですがね・・・

経過時間（秒数）をリアルタイムに表示する方法