Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.85 - 人間ストップウォッチ


体感リズムがあるか、人間ストップウォッチを作ってみましょう(^^;


Step テーマ
● とくになし

実行例





リスト


<script type="text/javascript"><!--
myButton = 0;
function myCheck(){
if (myButton==0){// [GO]ボタンを押した
myButton = 1;// 次回ストップ処理
document.myForm.myFormButton.value = "Stop";// ボタン表示変更
myStart=new Date();// スタート時間取得
document.myForm.myFormTime.value = "よしっ！と思ったら[Stop]ボタンを押して！";
}else{// [STOP]ボタンを押した
myButton = 0;// 次回スタート処理
document.myForm.myFormButton.value = "GO-!";// ボタン表示変更
myStop=new Date();// ストップ時間取得
myTime = myStop.getTime() - myStart.getTime();// 通算ミリ秒計算
myIndex = document.myForm.myFormMenu.selectedIndex;// 選択時間取得
myValue = eval(document.myForm.myFormMenu.options[myIndex].value);
myH = Math.floor(myTime/(60*60*1000));// '時間'取得
myGosa = myTime-(myH*60*60*1000);
myM = Math.floor(myTime/(60*1000));// '分'取得
myTime = myTime-(myM*60*1000);
myS = Math.floor(myTime/1000);// '秒'取得
myMS = myTime%1000;// 'ミリ秒'取得
document.myForm.myFormTime.value = "ストップ時間:"+myH+":"+myM+":"+myS+":"+myMS;
myGosa=(myTime>=myValue)?myTime-myValue : myValue-myTime;// 誤差計算
if (myGosa==0) alert("どんピシャリ！すげ〜ゼ！");// 誤差なし
else if (myGosa<1000) alert("誤差１秒以内！ 合格です！");// 誤差１秒未満
else if (myGosa<2000) alert("いまいち！　不合格！");// 誤差２秒未満
else alert("問題外！　不合格です！");// 誤差２秒以上
}
}
// --></script>
<form name="myForm">
<select name="myFormMenu">
<option value="10000">１０秒 </option>
<option value="20000">２０秒 </option>
<option value="30000">３０秒 </option>
<option value="40000">４０秒 </option>
<option value="50000">５０秒 </option>
<option value="60000">１分 </option>
<option value="180000">３分 </option>
</select>
<input type="text" size="40" name="myFormTime" value="時間を選んでＧＯ〜！">
<input type="button" name="myFormButton" value="GO-!" onclick="myCheck()">
</form>


サンプルだけの HTMLは こちらへ

説明


この前テレビで、体のリズムで時間を計って、３分だったか５分だったかをピシャリと当てて賞金をもらうという番組をみました。
Step.84 でストップウォッチを作ったついでに、それを作ってみましょう。

ルールは、好きな時間を選んで[GO]ボタンで開始します。
時間がきたと思ったら、[STOP]ボタンを押して、誤差が１秒未満だったら合格とします。

プログラムのフローチャートも上記ルールの説明程度なものです。(^^;
なお、サンプルは、Step.76 と Step.84 を合体させて、５分で完成させたものですので、説明はそちらをご覧くださいませ。(^^;

参考ステップ
Step.76 ラーメンタイマーを作ってみましょう　
Step.84 ストップウォッチを作ってみましょう　
▲TOP


 
イヌでもわかるJavaScript講座 お品書き へ戻ります
▲TOP