HMTL CSS JavaScriptで簡単なストップウォッチを作ってみた。
主な仕様
0.1秒単位でカウントアップ
一時停止機能あり
リセットボタンでカウントを初期化
本当に簡単なものになっています。
HTML & CSS
まずはHTMLとCSSでストップウォッチの形を作ります。
HTML
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>ストップウォッチ</title><linkrel="stylesheet"href="main.css"><script src="jquery-3.5.1.min.js"></script></head><body><h3>ストップウォッチ</h3><divclass="time_count"><pid="hour">0</p><p>:</p><pid="minute">0</p><p>:</p><pid="second">0</p><p>:</p><pid="m_second">0</p></div><buttonclass="button"id="start"onclick="count_start()">スタート</button><buttonclass="button"id="stop">ストップ</button><buttonclass="button"id="reset">リセット</button><script type="text/javascript"src="main.js"charset="UTF-8"></script></body></html>今回はjQueryを使います。
time_countクラスでタイマー部分を作成し。buttonで各種ボタンを配置します。
CSS
.time_count{display:flex;}.time_countp{margin-left:10px;margin-right:10px;font-size:25px;font-weight:bold;}.button{width:100px;height:50px;border:1pxsolid;font-weight:bolder;}CSSは簡潔に、ボタンの大きさやフォントの大きさを設定。
time_countクラスをflexにして、横並びにタイマーらしく見せています。
JavaScriptで動きをつける
JavaScript
functionTimeCount(){letms=$("#m_second").text();letsec=$("#second").text();letmin=$("#minute").text();lethour=$("#hour").text();ms++;$("#m_second").text(ms);if($("#m_second").text()==10){sec++;$("#m_second").text(0);$("#second").text(sec);}if($("#second").text()==60){min++;$("#second").text(0);$("#minute").text(min);}if($("#second").text()==60){min++;$("#second").text(0);$("#minute").text(min);}if($("#minute").text()==60){hour++;$("#minute").text(0);$("#hour").text(hour);}}letstart=0;lettime_count=null;$(document).ready(function(){$("#start").click(function(){start+=1if(start==1){time_count=setInterval(TimeCount,100);};});$("#stop").click(function(){clearInterval(time_count);start=0;});$("#reset").click(function(){clearInterval(time_count);start=0;$("#hour").text(0);$("#minute").text(0);$("#second").text(0);$("#m_second").text(0);});});TimeCount関数でタイマーの動きを制御します。
- msが1つずつ増加していく。
- msが10になったらs (秒)が１増加。
- sが60になったらm (分)が１増加。
- mが60になったらh (時)が１増加。
- それぞれ、位が上がったら0に戻す(msが10になった時、sを+1してmsは0にする)。
- 関数が呼び出された時は、タイマーの続きから始められるように初期値を代入する。
start変数を置いて、startボタンが押されたら1ずつ追加。
- start変数が1の時(startボタンが1回押された時)にタイマースタート。
- この変数がないと、連続してstartボタンが押せてしまう。
setInterval関数で100msずつカウントする。
time_count変数にsetIntervalを代入してclearできるようにする。
- time_count変数をどの関数からでも操作できるように、Global変数（関数の外におく)にする。
ストップボタンで一時停止する
- clearIntervalだけで初期化しないため、すぐにstartを押すと、一時停止したところから再開可能。
リセットボタンでタイマーを止めた後、全てを初期化する
ストップボタンやリセットボタンが押された時は、start変数を0にして、再度スタートできるようにしておく。
完成
