やっぱり。JavaScript！-ストップウオッチを作ろう！ - 1
さっそくやっていきましょう！
JavaScriptだと操作する画面の設計、それを動かすスクリプトの状態がすぐに確認できると言うすごく良いてんがあります。これは他の言語にはありません。初めてコードを書いて表示させ、動かすにはこれが一番です。と言うことで、参考サイトを見ながらタイマーを作ります。HTMLの<body>要素には以下を記述してブラウザで確認すると
<div id = "timer"> 00:00:00.000</div>
<div>
<input id = "start" type="button" value = "start">
<input id = "stop" type="button" value = "stop">
<input id = "reset" type="button" value = "reset">
</div>
タイマーっぽいのができます。表示部分、HTMLは <input>要素でボタンが簡単にできます。味気ないですけどCSSで修飾していけばどんどんカッコよくもできます。
今回はこれをscriptで動くようにしていきます。タイマーの表示部分とボタンを接続する必要があります。body要素の中に以下を書いて命令を実行してみます。
<script> ここにスクリプトを書きます。</script>
最初にタイマーの各部品を操作できるように名前をつけていきます。変数定義です。constと言う前置詞で宣言します。
document.getElementByIdと言う命令で("timer")のように
<div id = "timer"> 00:00:00.000</div>
を目印に名前を"timer"とします。idと変数が同じなのでややこしいかもしれません。別の名前でも良いですが名前がたくさんあるとそれもややこしいので同じ名前を使っています。
const timer = document.getElementById("timer") ;同じようにボタンも変数で名前をつけていきます。
const start= document.getElementById("start") ;
const stop = document.getElementById("stop") ;
const reset = document.getElementById("reset") ;これで変数名で扱えるようになりました。少し試してみましょう。
スタートボタンの変数"start"を使い命令を書いてボタンを押してみましょう。
start.addEventListener("click", function(){
alert("Hello")
}).addEventListener("click", function(){})と言うのはボタンを押した時の動作を指定するものです。ここにalert("Hello")と書いてやるりブラウザでこのHTMLを表示させ、ボタンを押すとアラートで"Hello"と出ます。
これで"start"と言う変数で命令がかけることがわかります。
ボタンはそれぞれ
// スタートボタン
start.addEventListener("click", function(){
})
// ストップボタン
stop.addEventListener("click", function(){
})
// リセットボタン
reset.addEventListener("click", function(){
})と言う感じに作っています。
まずはスタートボタンを押してタイマーを時間をカウントしていくコードを書いていきます。その仕組みとしては、
経過時刻は現在時刻をミリ秒で示すDate.now()からstartを押した時の時刻(startTime)を引く
ここでまた変数が必要になりました。押した時の時刻を記録する変数"startTime"と、経過時間の変数"elapsed "あとタイマーの変数として"intervalID"。
let startTime;
let elapsedTime = 0;
let intervalID;とします。準備ができたのでボタンを押して経過時間を出してみましょう。
setInterval()を使って連続して実行させます。参考サイト
startTime = new Date()
intervalID = setInterval(function(){
elapsedTime += Date.now() - startTime
console.log(elapsedTime)
}, 10)実行するとコンソールにどんどん数字が出てきます。時間の取得が’できることがわかりました。
スタートしたら止めないといけないので止める命令をストップボタンに書いておきます。
stop.addEventListener("click", function(){
clearInterval(intervalID)
})これでブラウザを立ち上げてスタートボタンを押すとコンソールに数字がザッと出てきます。それを止めるのがストップボタンと言うことです。
取りあえすスタートして数字が取得できストップできるようになりました。
次でこれを表示部分に出るようにしていきます。
この記事が気に入ったらサポートをしてみませんか？