プロが教える店舗&オフィスのセキュリティ対策術

<INPUT type="button" value="start" onClick="Start()">を押した時の時分を取得して別の変数へ格納(情報の保持…これで出来るのでしょうか)。
<INPUT type="button" value="End" onClick="End()">を押した時の時分を取得して別の変数へ格納。(格納時にテキストボックスを使わずに表示したいです)
 例えば)[START] ○○時 ○○分    //押した時
     [ END ]           //押さないと時分すら出ない
それぞれを実行した後に、別の<INPUT type="button" value="Calc" onClick="Calc()">を押し、格納された変数を使用して開始から終了までの経過時間を出すという物を作りたいです。

開始時間、終了時間を手入力で入れた場合の、元の正常に動くソースはあります。
現在は手入力で入れてあるので3つ目のCalc()ボタンを押せば出るのですが、1つ目2つ目のように取得して格納するといった方法が思いつきません。
手当たり次第作ってみてますが動いてくれません。
ご教授お願い致します。

A 回答 (2件)

やっぱり・・・


訂正
//蛇足。ついでにもう一つ作る
var timer2 = new Timer (btn[3],lbl[3],btn[4],lbl[4],btn[5],lbl[5]);
document.addEventListener ('click', timer2, false);
    • good
    • 1

こそっと2。

コメントも書いた。全角空白は半角に。エラー処理とかリセットとかはしてません。蛇足つき。たぶん「やっちまった」もあるかも。

<!DOCTYPE html>
<meta charset="utf-8">
<title>タイマー?</title>

<body>
<h1>TImer</h1>
<h2>Timer1</h2>
<p><input type="button" value="Start">:<label></label>
<p><input type="button" value="End">:<label></label>
<p><input type="button" value="Calc">:<label></label>
<h2>Timer2</h2>
<p><input type="button" value="Start">:<label></label>
<p><input type="button" value="End">:<label></label>
<p><input type="button" value="Calc">:<label></label>

<script>
//まずその機能で使われるであろう変数を全部含んだ入れ物を作る
function Timer (startbtn, startview, endbtn, endview, calcbtn, calcview) {
 this.startbtn = startbtn;
 this.startview = startview;
 this.endbtn = endbtn;
 this.endview = endview;
 this.calcbtn = calcbtn;
 this.calcview = calcview;
}
//そういえば時間も格納しなければ。Timerに付け加える。
Timer.prototype.mstart = null;//スタート時間を記憶する
Timer.prototype.mend = null;//終わり
Timer.prototype.mcalc = null;//経過

//時分を表示する関数が必要だな
function disptime (time) {
 return [
  zp (time.getHours ()), '時 ',
  zp (time.getMinutes ()), '分 ',
  zp (time.getSeconds ()), '秒'
 ].join ('');
}
//ゼロパディグしない
function zp(n) {
 return ('00' + n).slice (-2);
}


//ボタンが押されたときの処理を作る
function clickHandleEvent (event) {
 var e = event.target;
 var sa, d, tz;

 switch (true) {
 case this.startbtn == e ://スタート
  this.mstart = new Date;
  this.startview.textContent = disptime (this.mstart);
  break;
  
 case this.endbtn == e ://終わり
  this.mend = new Date;
  this.endview.textContent = disptime (this.mend);
  break;
 
 case this.calcbtn == e ://経過
  var d = new Date;
  tz = d.getTimezoneOffset () * 60 * 1000;
  this.mcalc = new Date (this.mend - this.mstart + tz);
  this.calcview.textContent = disptime (this.mcalc);
  break;
 }
}
//上(ボタンが押されたときの処理)の処理をTimerにつける
Timer.prototype.handleEvent = clickHandleEvent;
//これでオブジェクトは完成


//_______
//ここからはオブジェクトを使うための設定

//ボタンを集める
var btn = document.querySelectorAll ('input[type="button"]');
//ラベルを集める
var lbl = document.querySelectorAll ('label');
//Timerからあらたしいオブジェクトを作る
var timer1 = new Timer (btn[0],lbl[0],btn[1],lbl[1],btn[2],lbl[2]);
//documentにclickイベントとして登録する
document.addEventListener ('click', timer1, false);

//蛇足。ついでにもう一つ作る
var timer1 = new Timer (btn[3],lbl[3],btn[4],lbl[4],btn[5],lbl[5]);
document.addEventListener ('click', timer1, false);

</script>
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!