Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

Javascriptで3分タイマー作ったので解説します【Javascript初心者】

f:id:sgwshu:20170826163641j:plain

こんにちは。今日はJavascriptで3分タイマー作ったのでその解説をしようと思います。

 

完成

こちらが完成品です。

1つ1つ細かく解説して行こうと思います。

 

基本HTML

<head>
<meta charset="UTF-8">
<title>3minTimer</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="timer">
<h1>3minTimer</h1>
<p>
<span id="min">0</span> m
<span id="sec">0</span> s
</p>
<p>
<input type="button" id="start" value="START">
<input type="button" id="stop" value="STOP" disabled>
<input type="button" id="reset" value="RESET">
</p>
</div>
</body>
</html>

今回はHTMLの解説を省きます。

 

Javascript解説

こちら画面が読み込まれたらこの関数を読み込むと言う動作です。

window.onload = function(){

 

そして始めに変数の指定とdocument.getElementByIdでHtmlのidを変数の中に入れちゃいます。

 var time = 180;
var counter;
var min = document.getElementById("min");
var sec = document.getElementById("sec");
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var reset = document.getElementById("reset");

スタートボタンが押されたらトグル関数が発動(のちに解説)。

そして、counter変数の中にsetIntervalで1000(1秒)ごとにcount変数が動かされます。

ちなみにそれはもうcounterの中です。

start.onclick = function() {
toggle();
counter = setInterval( count, 1000 );
}

そしてstopが押された場合は同じようにトグル関数発動。そしてclearIntervalによって先ほどの変数counterが止められます。

stop.onclick = function() {
toggle();
clearInterval( counter );
}

resetが押されると最初と同じ状態に戻ります。secとminのinnerHTMLについては下で詳しく解説。

reset.onclick = function() {
time = 180;
sec.innerHTML = time % 60;
min.innerHTML = Math.floor( time / 60 );
}

 上記のstartが押された時とstopが押された時に動く関数ですが、

スタートを押した際にはstart変数はdisabledではないので最初にelseが動きます。そして、start.disabled=true(スタートをdisabledにする)そしてhtmlでかかってるdisabledをstop.disabled = false;と言う動作で変更します。

そのあとstopを押すとstartがdisabledされてることがif関数にマッチするのでstartがfalseになり、stopがtrueになり押せなくなります。

function toggle() {
if( start.disabled ) {
start.disabled = false;
stop.disabled = true;
} else {
start.disabled = true
stop.disabled = false;
}
}

こちらはもしtimeが0だったら全てを元に戻す(リセットと同じ)ことと、アラートで通知する関数そしてtimeが0ではなければelseでtimeを1づつマイナス。

そして同時にsecをtime%60します。

例えば、

time=180だったら、180%60=3x(60) +0 となり0

-1されてtime=179だったら、179%60=2x(60) + 59となり59

 が表示されるわけですね。

minは単純にtime÷60で180の時は3が答え。そして179の時は2.98333そしてMath.floorで小数点以下切り捨てて結果は3。変わるのは120になった時です。すると数値は2になります。 

 function count() {
if( time === 0 ) {
sec.innerHTML = 0;
min.innerHTML = 0;
toggle();
alert("3分経過しました。");
clearInterval( counter );
} else {
time -= 1;
sec.innerHTML = time % 60;
min.innerHTML = Math.floor( time / 60 );
}
}

 と言う形でタイマーが完成しました。

なかなかJsの素人が解説するのは難しかったですが、自分のためのメモ程度で書きました。よかったら参考にしてみてください。

 

それではSEEEEYaaaaaa