Skip to content

Instantly share code, notes, and snippets.

@codingwithsara codingwithsara/index.html Secret
Last active Jul 14, 2018

Embed
What would you like to do?
JavaScriptストップウォッチ(JS)
<div class="container">
<h1 class="title">StopWatch</h1>
<h1 id="timerLabel">00:00:00</h1>
<input type="button" class="myButton" onclick="start()" value="START" id="startBtn">
<input type="button" class="myButton" onclick="stop()" value="STOP">
<input type="button" class="myButton" onclick="reset()" value="RESET">
</div>
<script>
var status = 0; // 0:停止中 1:動作中
var time = 0;
var startBtn = document.getElementById("startBtn");
var timerLabel = document.getElementById('timerLabel');
// STARTボタン
function start(){
// 動作中にする
status = 1;
// スタートボタンを押せないようにする
startBtn.disabled = true;
timer();
}
// STOPボタン
function stop(){
// 停止中にする
status = 0;
// スタートボタンを押せるようにする
startBtn.disabled = false;
}
// RESETボタン
function reset(){
// 停止中にする
status = 0;
// タイムを0に戻す
time = 0;
// タイマーラベルをリセット
timerLabel.innerHTML = '00:00:00';
// スタートボタンを押せるようにする
startBtn.disabled = false;
}
function timer(){
// ステータスが動作中の場合のみ実行
if (status == 1) {
setTimeout(function() {
time++;
// 分・秒・ミリ秒を計算
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
// 分が1桁の場合は、先頭に0をつける
if (min < 10) min = "0" + min;
// 秒が60秒以上の場合 例)89秒→29秒にする
if (sec >= 60) sec = sec % 60;
// 秒が1桁の場合は、先頭に0をつける
if (sec < 10) sec = "0" + sec;
// ミリ秒が1桁の場合は、先頭に0をつける
if (mSec < 10) mSec = "0" + mSec;
// タイマーラベルを更新
timerLabel.innerHTML = min + ":" + sec + ":" + mSec;
// 再びtimer()を呼び出す
timer();
}, 10);
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.