ローカル開発環境でワードプレスオリジナルデザインを開発しよう４コード編【HTML, CSS, JavaScript, PHP, WordPress初心者】
shu sgw.today
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で小数点以下切り捨てて結果は３。変わるのは120になった時です。すると数値は２になります。
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の勉強、最初はこの本から始めました
楽天ブックス
¥2,420 （2024/04/23 15:25時点 | 楽天市場調べ）
ポチップなかなかJsの素人が解説するのは難しかったですが、自分のためのメモ程度で書きました。よかったら参考にしてみてください。
それではSEEEEYaaaaaa
ABOUT ME
カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
