[Javascript] ストップウォッチの時間表示簡単TIPS

2021年11月3日

Javascript テクノロジー

eyecatch ストップウォッチの表示を隠して、10秒00になるようにするゲームを1時間ぐらい遊んでしまう、ユゲタです。 なんでしょう。部活動などをやっていると、このストップウォッチ遊びがやめられなくなってしまいます。 運動部あるあるなんじゃないでしょうか? あれ?オレバレーボール部・・・「ストップウォッチなんか試合以外でほとんど使わんやんけ!」というツッコミはナシでお願いします。 そして、今現在作っているとあるwebシステムで、タイムトライアル機能が必要になったので、その表示部分のストップウォッチ機能を作ったのですが、 比較的かんたんなプログラミングでできたので、tipsとして紹介したいと思います。

ソースコードと使い方

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>stopwatch</title> <link rel="stylesheet" href="stopwatch.css" /> <script src="stopwatch.js" async></script> </head> <body> <div id="stopwatch"></div> </body> </html> #stopwatch{ border:1px solid black; padding:10px; width:200px; text-align:center; } (function(){ function MAIN(){ this.set_timer(); } MAIN.prototype.get_stopwatch = function(){ return document.getElementById("stopwatch"); }; MAIN.prototype.set_timer = function(){ this.timer_start = (+ new Date()); this.timer_interval = setInterval(this.view_timer.bind(this) , 10); }; MAIN.prototype.view_timer = function(){ let current_timer = (+new Date()) - this.timer_start; let elm = this.get_stopwatch(); elm.textContent = this.conv_timer_format(current_timer); }; // return @ 時:分:秒 MAIN.prototype.conv_timer_format = function(current_timer){ let sec = Math.floor(current_timer / 1000); let ms = Math.floor((current_timer - sec*1000) * 1000); let s = sec % 60 || 0; let min = Math.floor((sec - s) / 60); let m = min % 60 || 0; let h = Math.floor((min - m) / 60) || 0; return ("00" + h).slice(-2) +":"+ ("00" + m).slice(-2) +":"+ ("00" + s).slice(-2) +"."+ String(ms).substr(0,2); }; MAIN.prototype.stop_timer = function(){ if(!this.timer_interval){return;} clearInterval(this.timer_interval); }; MAIN.prototype.check_word = function(){ let current_elm = this.get_currentWord_elm(); if(!current_elm){return false;} let current_val = current_elm.textContent.trim(); if(current_val === ""){return false;} let targets = document.querySelectorAll(".word-table [data-num]"); for(let target of targets){ if(target === current_elm){continue;} if(target.textContent.trim() === current_val){ return true; } } }; switch(document.readyState){ case "complete" : new MAIN();break; default : window.addEventListener("load" , function(){new MAIN()});break; } })() 上記を同じフォルダに設置して、webブラウザでindex.htmlを開くと、次のように実行されます。

解説

基本的に、setIntervalで定期処理をする仕様にしており、 start時の時間をずっと変数保持しているのを、現在時間からstart時間を差し引いた値のフォーマットを整えて、表示しています。 今回はストップウォッチと言っておきながら、単純にページを開いたタイミングからの時間のカウントアップするtipsにしていますが、 stopボタンや、start/stopのトグルボタンを就けることで、簡単にストップウォッチを作成することができます。 10分ぐらいで作ったコードですが、時分秒をそれぞれ計算するのが、最初少しだけ戸惑ったので、自分内での暫定ライブラリにしておこうと作ったのがこのソースでした。 フォーマットも2桁縛りというのを設置するのも、他のソースでもよく使う方法なので、この方法を覚えておくことをおすすめします。 ("00" + m).slice(-2) この部分ですね。 2桁のゼロパディング処理です。

こんな場面で使える

動画などを自分で表示してタイムラインなどを表示する時に、今回のようなフォーマットでの時間軸表示が便利に使えます。 また、何かしらのタイムトライアルゲームの時にも同じフォーマットで使用することができるので、ぜひコピペまたは、 自己流に書き直してお使いください。 え?著作権?・・・ないないない!そんなもの、MITですよ。ありませんがな。 お好きにお使いください。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。