はい。そうです。
以前、記事にしていたjQueryでつくったストップウォッチのソースをChatGPT でVanillaにしただけのものです。つまりjQueryから『Javascript』に変換しただけです(>_<)
すみません。ただ、怠慢ってことではなく、Vanillaも勉強した方がいいかな、と思って。
だったら、以前jQueryでつくったやつを元に学んだ方がいいかなと思って、勉強ついでにブログにも載せた次第です。
HTMLとCSS
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.count_timer_container table{
width:100%;
height:100%;
}
.count_timer_container table td{
width:25%;
height:20%;
border:1px solid #eee;
background-color:white;
}
.count_timer_container table input{
font-size:5vh;
height:100%;
width:100%;
text-align:center;
border:none;
background-color:white;
}
</style>
</head>
<body>
<center class="count_timer_container">
<table border="5">
<tr>
<td colspan="2">
<input class="count_display" type="text" size="20" value="" disabled>
</td>
</tr>
<tr>
<td><input class="btn_start" type="button" value="start"></td>
<td><input class="btn_stop" type="button" value="stop"></td>
</tr>
<tr>
<td colspan="2" >
<input class="btn_clear" type="button" size="20" value="clear">
</td>
</tr>
</table>
</center>
</body>
</html>
javascript
<script type="text/javascript">
/*
ストップウォッチ
主な概要：
スタートボタンを押下して計測を開始。
ストップボタンを押下して開始から経過した時間を取得できる
*/
document.addEventListener("DOMContentLoaded", function () {
let num_ms = 0; // ミリ秒
let num_s = 0; // 秒
let num_m = 0; // 分
let now_time = 0; // 現在時刻
let start_time = 0; // スタートボタン押下時の時刻
let pre_time = 0; // ストップボタン押下時の経過時間
let time_id = 0; // setTimeout（）を止める時に必要なID
let date = 0; // Date()のオブジェクト変数
let count_display = ""; // 一時的な文字を格納する際に使用
/*
初期値の設定
*/
document.querySelector(".count_display").value = "00:00:00";
//スタートボタンを有効に
document.querySelector(".btn_start").disabled = false;
//ストップボタンを無効にする
document.querySelector(".btn_stop").disabled = true;
/*
■スタートボタン ・スタートボタンが押下されたら、スタートボタンを無効にしてストップボタンを有効にする
・スタートボタン押下時の時刻を取得しておく
・countUp()を実行して計測開始
*/
document.querySelector(".btn_start").addEventListener("click", function () {
document.querySelector(".btn_start").disabled = true;
document.querySelector(".btn_stop").disabled = false;
start_time = Date.now();
countUp();
});
/*
■ストップボタン
・ストップボタンが押下されたら、スタートボタンを有効にしてストップボタンを無効にする
・ストップボタン押下時の経過時間を取得しておく【繰り返し計測する際に必要となる】
・計測を止める【setTimeout関数を止めるにはIDを指定する必要がある】
*/
document.querySelector(".btn_stop").addEventListener("click", function () {
document.querySelector(".btn_start").disabled = false;
document.querySelector(".btn_stop").disabled = true;
pre_time += now_time - start_time;
clearTimeout(time_id);
});
/*
■クリアボタン
・変数の初期値を0にする
・クリアボタンが押下されたら、スタートボタンを有効にしてストップボタンを無効にする
・画面を00:00:00にする
*/
document.querySelector(".btn_clear").addEventListener("click", function () {
clearTimeout(time_id);
now_time = 0;
start_time = 0;
pre_time = 0;
document.querySelector(".btn_start").disabled = false;
document.querySelector(".btn_stop").disabled = true;
document.querySelector(".count_display").value = "00:00:00";
});
/*
■経過時間の計測【下記内容を1ミリ秒毎に、無限に実行する
・現在時刻を取得
・現在時刻 － 開始時刻 ＋ 前回の履歴（前回の経過時間） で経過時間を取得
・経過した【分・秒・ミリ秒】を変数に格納
・画面に経過時間を表示
*/
function countUp() {
now_time = Date.now();
date = new Date(now_time - start_time + pre_time);
num_ms = Math.floor(date.getMilliseconds() / 10);
num_s = date.getSeconds();
num_m = date.getMinutes();
time_id = setTimeout(() => {
countUp();
}, 1);
//経過時間の表示
//１桁の場合は数値の前に０を付けて画面に表示する
document.querySelector(".count_display").value =
addDigits(num_m) + ":" + addDigits(num_s) + ":" + addDigits(num_ms);
}
/*
■２桁表示
・１桁の場合は数値の前に０を付ける
・例： 1秒 → 01秒
*/
function addDigits(count_data) {
if (count_data < 10) {
count_display = "0" + count_data;
} else {
count_display = count_data;
}
return count_display;
}
});
</script>
