JavaScript カウントアップタイマー
-
setInterval()およびMath関数を使用して JavaScript カウントアップタイマーを表示する -
setInterval()およびpad()関数を使用して JavaScript カウントアップタイマーを表示する -
jQueryを使用して JavaScript カウントアップタイマーを表示する - オブジェクトとプロパティを使用して JavaScript カウントアップタイマーを表示する
このチュートリアルでは、JavaScript カウントアップタイマーを紹介します。setInterval()、pad()、clearInterval()、および Math.floor() 関数とオブジェクトを使用して、カウントアップタイマーを作成します。
また、jQuery がコードを最適化するのにどのように役立つかを示しています。
setInterval() および Math 関数を使用して JavaScript カウントアップタイマーを表示する
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="count_up_timer">00:00:00</div>
<button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
</body>
</html>
CSS コード：
#count_up_timer{
font-size: 100px;
font-weight: bold;
color: darkblue;
}
#stop_count_up_timer{
background-color:black;
color:white
}
JavaScript コード：
var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;
function countUpTimer() {
++totalSeconds;
var hour = Math.floor(totalSeconds / 3600);
var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);
document.getElementById('count_up_timer').innerHTML =
hour + ':' + minute + ':' + seconds;
}
出力：
このコード例では、setInterval() 関数が countUpTimer() 関数を毎秒（1 秒= 1000 ミリ秒）呼び出します。countUpTimer() 関数では、変数 totalSeconds が最初に 1 ずつインクリメントされ、次に hour、minute、および seconds で変換に使用されます。
その後、id の値が count_up_timer である最初の要素が選択されます。HTML コンテンツ（innerHTML）がタイマー（hour:minute:seconds）に置き換えられました。タイマー停止ボタンをクリックするとすぐにカウントアップタイマーが停止します。
setInterval() 関数は、指定された間隔で関数を呼び出します。2つのパラメーターを取り、両方が必要です。最初のパラメーターは関数で、もう 1つはミリ秒単位の間隔です。
ただし、setInterval() メソッドは、ウィンドウが閉じられるか、clearInterval() 関数が呼び出されるまで関数を呼び出し続けます。タイマーを停止するために clearInterval() 関数で使用できる時間の id を返します。
.innerHTML プロパティは、指定された要素の HTML コンテンツを返すか変更します。Math.floor() は最大の整数（指定された数以下）を返します。
setInterval() および pad() 関数を使用して JavaScript カウントアップタイマーを表示する
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<h1>Count Up Timer For One Hour</h1>
<div id = "timer">
<span id="minutes"></span>:<span id="seconds"></span>
</div>
</body>
</html>
CSS コード：
#timer{
font-size:100px;
color:green;
margin-left:80px;
}
JavaScript コード：
var second = 0;
function pad(value) {
return value > 9 ? value : '0' + value;
}
setInterval(function() {
document.getElementById('seconds').innerHTML = pad(++second % 60);
document.getElementById('minutes').innerHTML = pad(parseInt(second / 60, 10));
}, 1000);
出力：
このサンプルコードでは、pad() 関数が先行ゼロを追加します。渡された値が 1 桁（9 以下）であるかどうかをチェックし、それ以外の場合は先行ゼロを追加します。
setInterval() 関数は、特定の間隔で指定された関数を呼び出します。間隔はミリ秒単位である必要があります。このリンクにアクセスして読むことができます。
次に、setInterval() は無名関数を呼び出して、id の値が seconds と minutes である要素を取得します。この無名関数は、innerHTML（HTML コンテンツ）を pad() 関数によって返される値に置き換えます。
parseInt() 関数は、指定された文字列引数を解析し、特定の基数の整数を返します。
jQuery を使用して JavaScript カウントアップタイマーを表示する
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Count Up Timer For One Hour</h1>
<div id = "timer">
<span id="minutes"></span>:<span id="seconds"></span>
</div>
</body>
</html>
CSS コード：
#timer{
font-size:100px;
color:green;
margin-left:80px;
}
JavaScript コード：
var second = 0;
function pad(value) {
return value > 9 ? value : '0' + value;
}
setInterval(function() {
$('#seconds').html(pad(++second % 60));
$('#minutes').html(pad(parseInt(second / 60, 10)));
}, 1000);
出力：
先行ゼロが必要であるが、pad() 関数と jQuery ライブラリを使用したくない場合はどうなりますか。次に、次の解決策があなたのためです。
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="count_up_timer">00:00:00</div>
<button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
</body>
</html>
CSS コード：
#count_up_timer{
font-size: 100px;
font-weight: bold;
color: darkblue;
}
#stop_count_up_timer{
background-color:black;
color:white
}
JavaScript コード：
var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;
function countUpTimer() {
++totalSeconds;
var hour = Math.floor(totalSeconds / 3600);
var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);
if (hour < 10) hour = '0' + hour;
if (minute < 10) minute = '0' + minute;
if (seconds < 10) seconds = '0' + seconds;
document.getElementById('count_up_timer').innerHTML =
hour + ':' + minute + ':' + seconds;
}
出力：
上記のコードでは、if ステートメントを使用して、hour、minute、および seconds をチェックしています。10 未満の場合（つまり、1 桁の場合）、先行ゼロが追加されます。そうでなければ、そうではありません。
コードが実行されるとすぐに、学習したすべてのカウントアップタイマーが開始することに気付いたかもしれません。JavaScript カウントアップタイマーを完全に制御できるとしたらどうでしょうか。それも学びましょう。
オブジェクトとプロパティを使用して JavaScript カウントアップタイマーを表示する
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="timer">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div id="control">
<button id="startbtn">START</button>
<button id="pausebtn">PAUSE</button>
<button id="resumebtn">RESUME</button>
<button id="resetbtn">RESET</button>
</div>
</body>
</html>
CSS コード：
#timer{
font-size: 100px;
font-weight: bold;
}
#control>#startbtn{
background-color:green;
color:white;
}
#control>#pausebtn{
background-color:blue;
color:white;
}
#control>#resumebtn{
background-color:orange;
color:white;
}
#control>#resetbtn{
background-color:red;
color:white;
}
JavaScript コード：
var Clock = {
totalSeconds: 0,
startTimer: function() {
if (!this.interval) {
var self = this;
function pad(val) {
return val > 9 ? val : '0' + val;
}
this.interval = setInterval(function() {
self.totalSeconds += 1;
document.getElementById('minutes').innerHTML =
pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById('seconds').innerHTML =
pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},
resetTimer: function() {
Clock.totalSeconds = null;
clearInterval(this.interval);
document.getElementById('minutes').innerHTML = '00';
document.getElementById('seconds').innerHTML = '00';
delete this.interval;
},
pauseTimer: function() {
clearInterval(this.interval);
delete this.interval;
},
resumeTimer: function() {
this.startTimer();
},
};
document.getElementById('startbtn').addEventListener('click', function() {
Clock.startTimer();
});
document.getElementById('pausebtn').addEventListener('click', function() {
Clock.pauseTimer();
});
document.getElementById('resumebtn').addEventListener('click', function() {
Clock.resumeTimer();
});
document.getElementById('resetbtn').addEventListener('click', function() {
Clock.resetTimer();
});
出力：
ここでは、totalSeconds、startTimer、resetTimer、pauseTimer、および resumeTimer という名前の 5つのプロパティを持つ Clock という名前のオブジェクトを作成しました。各プロパティの値は、独自の関数本体を持つ無名関数です。
this キーワードは、それが属するオブジェクトを参照し、常に 1つのオブジェクトの参照を保持します。
たとえば、this.resumeTimer は、this（Clock）オブジェクトの resumeTimer プロパティを意味します。
clearInterval() 関数は、カウントアップタイマーを停止するために使用されます。Clock オブジェクトの各プロパティはクリックイベントで機能することに注意してください。
