はい。そうです。
以前、記事にしていたjQueryでつくったストップウォッチのソースをChatGPT でVanillaにしただけのものです。つまりjQueryから『Javascript』に変換しただけです(>_<)
すみません。ただ、怠慢ってことではなく、Vanillaも勉強した方がいいかな、と思って。
だったら、以前jQueryでつくったやつを元に学んだ方がいいかなと思って、勉強ついでにブログにも載せた次第です。
HTMLとCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <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> |
