タイマーアプリのアウトプット
こんにちわ、168です。
本日はタイマーアプリの試作品を参考ページを確認しながら作成しましたので、記事を書こうと思います。
**タイマーのメインコード
app/views/times/index.html.erb <!DOCTYPE html> <h1>TIMER</h1> <form name="timer"> <h2>CountUp</h2> <input value="0" class="hou">時間 <input value="0" class="min">分 <input value="0" class="sec">秒<br> <input type="button" value="スタート" onclick="cntStart1()"> <input type="button" value="ストップ" onclick="cntStop1()"> <input type="button" value="リセット" onclick="reSet1()"> </form> <form name="timer2"> <h2>CauntDown</h2> <input value="0" class="hou">時間 <input value="0" class="min">分 <input value="0" class="sec">秒<br> <input type="button" value="スタート" onclick="cntStart2()"> <input type="button" value="ストップ" onclick="cntStop2()"> <input type="button" value="リセット" onclick="reSet2()"> </form> <script> //countUpを行う関数を宣言 var timer1; //ストップを押せないように宣言 document.timer.elements[4].disabled=true; //スタートを押すと1000ミリ秒毎に呼び出す関数 function cntStart1() { document.timer.elements[3].disabled=true; document.timer.elements[4].disabled=false; document.timer.elements[5].disabled=true; timer1=setInterval("countUp()",1000); } //ストップを押すと止まる関数 function cntStop1() { document.timer.elements[3].disabled=false; document.timer.elements[4].disabled=true; document.timer.elements[5].disabled=false; clearInterval(timer1); } //カウントアップ関数 function countUp() { var hou1=document.timer.elements[0].value; var min1=document.timer.elements[1].value; var sec1=document.timer.elements[2].value; { if (hou1=="") hou1=0; hou1=parseInt(hou1); if (min1=="") min1=0; min1=parseInt(min1); if (sec1=="") sec1=0; sec1=parseInt(sec1); tmWrite1(hou1*3600+min1*60+sec1+1); } } //残り時間を書き出す関数 function tmWrite1(int1) { int1=parseInt(int1); { //残り分数はintを3600で割って切り捨てる document.timer.elements[0].value=Math.floor(int1/3600); //残り分数はintを3600で割ったあまりを切り捨てた document.timer.elements[1].value=Math.floor(int1%3600/60); //残り秒数はintを60で割った余り document.timer.elements[2].value=int1 % 60; } } //フォームを初期状態に戻す（リセット）関数 function reSet1() { 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; clearInterval(timer1); } //countDownを行う関数を宣言 var timer2; //ストップを押せないように宣言 document.timer2.elements[4].disabled=true; //スタートを押すと1000ミリ秒毎に呼び出す関数 function cntStart2() { document.timer2.elements[3].disabled=true; document.timer2.elements[4].disabled=false; document.timer2.elements[5].disabled=true; timer2=setInterval("countDown()",1000); } //ストップを押すと止まる関数 function cntStop2() { document.timer2.elements[3].disabled=false; document.timer2.elements[4].disabled=true; document.timer2.elements[5].disabled=false; clearInterval(timer2); } //カウントダウン関数 function countDown() { var hou2=document.timer2.elements[0].value; var min2=document.timer2.elements[1].value; var sec2=document.timer2.elements[2].value; if( (hou2=="") && (min2=="") && (sec2=="") ) { alert("時刻を設定してください！"); reSet2(); } else { if (hou2=="") hou2=0; hou2=parseInt(hou2); if (min2=="") min2=0; min2=parseInt(min2); if (sec2=="") sec2=0; sec2=parseInt(sec2); tmWrite2(hou2*3600+min2*60+sec2-1); } } //残り時間を書き出す関数 function tmWrite2(int2) { int2=parseInt(int2); if (int2<=0) { reSet2(); alert("時間です！"); } else { //残り分数はintを3600で割って切り捨てる document.timer2.elements[0].value=Math.floor(int2/3600); //残り分数はintを3600で割ったあまりを切り捨てた document.timer2.elements[1].value=Math.floor(int2%3600/60); //残り秒数はintを60で割った余り document.timer2.elements[2].value=int2%60; } } //フォームを初期状態に戻す（リセット）関数 function reSet2() { document.timer2.elements[0].value="0"; document.timer2.elements[1].value="0"; document.timer2.elements[2].value="0"; document.timer2.elements[3].disabled=false; document.timer2.elements[4].disabled=true; document.timer2.elements[5].disabled=false; clearInterval(timer2); } </script>
** 画面
** 学習
<form> 〜 </form>
ユーザーが入力したものをJavaScriptプログラムでサーバーを動かす事ができる。
<form name="test"> <input> 〜 </form>
formオブジェクト"test"のelementsオブジェクトの何番目（上から0.1.2.3〜）に何の指示を出すかということを命令できるようになる。
↓
#命令のコード document.test.elements[0]
今回使用している指示コードは
#（ ）の中身を記述 document.test.elements[0].value=( ); #使用をできなくする document.test.elements[0].disabled=true; #使用を許可する document.test.elements[0].disabled=false;
form内には今回は以下の要素を代入している。
#""内の「test」文字を入力する <input value="test"> #ボタンとして使用する <input type="button">
今回代入した要素以外にも使用できる要素は存在する。
<input type="button" onclick="test"> #ボタンを押した際に""内の「test」関数を実行
条件を満たすと定義している関数を動かす事が可能。
関数が一致、もしくは書かれていないとエラーが起こる。
#""内の「test」関数を1000ミリ秒（1秒）毎に処理を起こす
setInterval("test()",1000);時間の設定が1ミリ秒で行われているため、1秒の処理をする際にはそのような秒数に合わせなければならない。
function test()
{〜
}test関数の処理を{ }内に記入して動かす。
alert("test");（ ）内の""内の「test」をポップさせる。
#（ ）内の数の数値以下の値を返す Math.floor(数）;
小数点以下を記入しない場合、記入する。
clearInterval(test);
（ ）内のtest関数を解除する。
** まとめ
とりあえず動くものをと考えて作っていたため、見た目はとても簡素な状態で作りました。
記入してみると意外と少ない内容でタイマーが動いている事がわかりました。
参考にしたサイトを見ながら行いましたが、次はそちらのサイトを見ずに今回とは少し違ったタイマーを作成しようと思います。
次回もまたよろしくお願いします。
参考にしたサイト様
www.pazru.net
