ストップウォッチの表示を隠して、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ですよ。ありませんがな。
お好きにお使いください。
0 件のコメント:
コメントを投稿