タイマーアプリのアウトプット（その２）
こんにちわ、168です。
前回に引き続きタイマーアプリを作成しましたので、アウトプットを行います。
今回はストップウォッチをモチーフに、データがなければ時間を計測し、データがあれば時間をカウントするものを作りました。
タイマーのメインコード
app/views/times/index.html.erb
<!DOCTYPE html>
<h1>StopWatch</h1>
<div class="main">
<div class="timer">
<div class="timer-frame">
<form name="timer" class="timer-time">
<div class="timer-notation">
<input style="text-align: center;" value="0">m
<input style="text-align: center;" value="0">s
<input style="text-align: center;" value="0"><br>
</div>
<input type="button" value="start" onclick="cntStart()" class="button">
<input type="button" value="stop" onclick="cntStop()" class="button">
<input type="button" value="reset" onclick="cntReset()" class="button">
</form>
</div>
</div>
</div>
<script>
//関数の宣言
var timer;
//ストップを押せないように宣言
document.timer.elements[4].disabled=true;
//スタートを押すと1000ミリ秒毎に呼び出す関数
function cntStart()
{
document.timer.elements[3].disabled=true;
document.timer.elements[4].disabled=false;
document.timer.elements[5].disabled=true;
var min=document.timer.elements[0].value;
var sec=document.timer.elements[1].value;
var ms=document.timer.elements[2].value;
if( (min=="0") && (sec=="0") && (ms=="0") )
{
timer=setInterval("countUp()",10);
}
else
{
timer=setInterval("countDown()",10);
}
}
//ストップを押すと止まる関数
function cntStop()
{
document.timer.elements[3].disabled=false;
document.timer.elements[4].disabled=true;
document.timer.elements[5].disabled=false;
clearInterval(timer);
}
//カウントアップ関数
function countUp()
{
var min=document.timer.elements[0].value;
var sec=document.timer.elements[1].value;
var ms=document.timer.elements[2].value;
if (min=="") min=0;
min=parseInt(min);
if (sec=="") sec=0;
sec=parseInt(sec);
if (ms=="") ms=0;
ms=parseInt(ms);
tmWriteUp(min*6000+sec*100+ms+1);
}
//カウントダウン関数
function countDown()
{
var min=document.timer.elements[0].value;
var sec=document.timer.elements[1].value;
var ms=document.timer.elements[2].value;
if (min=="") min=0;
min=parseInt(min);
if (sec=="") sec=0;
sec=parseInt(sec);
if (ms=="") ms=0;
ms=parseInt(ms);
tmWriteDown(min*6000+sec*100+ms-1);
}
//残り時間を書き出す関数(Up)
function tmWriteUp(up)
{
up=parseInt(up);
//残り分数はupを6000で割って切り捨てる
document.timer.elements[0].value=Math.floor(up/6000);
//残り分数はupを6000で割ったあまり100で割り切り捨てた
document.timer.elements[1].value=Math.floor(up%6000/100);
//残り秒数はupを100で割った余り
document.timer.elements[2].value=up % 100;
}
//残り時間を書き出す関数(Down)
function tmWriteDown(int)
{
int=parseInt(int);
if (int<=0)
{
cntReset();
alert("時間です！");
}
else
{
//残り分数はintを6000で割って切り捨てる
document.timer.elements[0].value=Math.floor(int/6000);
//残り分数はintを6000で割ったあまりを100で割り切り捨てた
document.timer.elements[1].value=Math.floor(int%6000/100);
//残り秒数はintを100で割った余り
document.timer.elements[2].value=int % 100;
}
}
//フォームを初期状態に戻す（リセット）関数
function cntReset()
{
document.timer.elements[0].value="0";
document.timer.elements[1].value="0";
document.timer.elements[2].value="0";
document.timer.elements[3].disabled=false;
document.timer.elements[4].disabled=true;
document.timer.elements[5].disabled=false;
clearInterval(timer);
}
</script>
app/assets/stylesheets/style.css
h1 {
display: flex;
justify-content: center;
}
.main {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-content: center;
}
.timer {
background-color: aqua;
width: 300px;
height: 300px;
border: 2px solid black;
border-radius: 100%;
display: flex;
justify-content: center;
align-content: center;
}
.timer-frame {
background-color: aquamarine;
width: 200px;
height: 200px;
margin: auto;
border: 2px solid black;
border-radius: 100%;
display: flex;
justify-content: center;
align-content: center;
}
form {
margin: 70px 0 0;
}
.timer-notation {
display: flex;
justify-content: center;
align-content: center;
}
input {
width: 15px;
margin: 0 2px;
}
.button {
width: 50px;
}
画面
学習
<input style="text-align: center;">
input内の文字を中央に表示するための表記です。
class名を指名して、cssによって変更を行おうと考えましたが、変更はできそうになかったため、直接的に変更を行うようにしています。
var min=document.timer.elements[0].value;
var sec=document.timer.elements[1].value;
var ms=document.timer.elements[2].value;
if( (min=="0") && (sec=="0") && (ms=="0") )
{
timer=setInterval("countUp()",10);
}
else
{
timer=setInterval("countDown()",10);
}時間が0か設定されているのかで処理を分けているところです。
setIntervalは設定した時間内で、条件を動かすという命令になりますので、この場所で条件を分けず、次の命令の場所で条件を分けようとすると動かなくなってしまいます。
setInterval("countUp()",10);前回使用したsetIntervalを1000から10に処理時間を変更して作成しました。
この場合、1/100秒を計測する事ができるため、1秒以下の時間を表すこともできるようになりました。
ここで1ではなく、10にしているのかというと、1で処理を行うと、わずかな処理速度のラグで正確な1秒を図れていなかったためです。
#時間が増える処理 tmWriteUp(min*6000+sec*100+ms+1); #時間が減る処理 tmWriteDown(min*6000+sec*100+ms-1);
処理時間が変更されたため、式が変更されています。
//残り分数はupを6000で割って切り捨てる
document.timer.elements[0].value=Math.floor(up/6000);
//残り分数はupを6000で割ったあまり100で割り切り捨てた
document.timer.elements[1].value=Math.floor(up%6000/100);
//残り秒数はupを100で割った余り
document.timer.elements[2].value=up % 100;上記と同様、処理の時間が変更されたため式が変更されています。
まとめ
今回は見た目もストップウォッチに見立てて作りました。
本当はアラームの実装を行なっていきたかったのですが、調べれば調べるほどわからなくなってしまったため、次回アラームを行うためのアプリ作りをしようと考えました。
次回はアラーム作成を行なっていこうと思います。
また次回よろしくお願いします。
