プログラミング

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

shu

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

基本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の勉強、最初はこの本から始めました

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

それではSEEEEYaaaaaa

ABOUT ME
sgw
sgw
フロントエンド
カナダのBCITとか言う短大卒業。その後4年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
記事URLをコピーしました