JavaScript のお勉強でストップウォッチを作ってみた

Posted at 21:47 on July 8, 2010

Last updated at 23:19 on September 16, 2010

Category: Non-News, Note

Tags: JavaScript, Web, ツール, パソコン, ブラウザ, ライフハック, 仕事, 勉強

JavaScript を勉強する機会があったので、ストップウォッチを作ってみました。

タスク名を入力する欄があり、現在時刻、経過時間と一緒に記録することができるので、「あのタスクに何分くらいかかったか記録しておきたい」というときに使えるかもしれません。もしくは、カップ麺を食べる際のお供にどうぞｗ

[画像] JavaScriptによるストップウォッチ

はい、上のはダミーでただの画像ですｗ　すみませんｗ　下にあるのが本物です。本物のほうは見た目がかわいそうになっていますが、ダウンロードできる一式は上の画像のような見た目になります。

JavaScriptによるストップウォッチ

スタート時刻と現在時刻の差分から経過時間を算出します
ラップを記録することができます
- タスク名を記入すれば、記録日時とタスク名、そして経過時間を記録します

自分のサイトに載せたいとか、ダウンロードしてローカルで使いたいとか、そういう奇特な方がもしいらっしゃったら、以下のリンクからダウンロードできます（まとめて ZIP ファイルにしてありますのでダウンロード後に解凍してください）。特に制限とかもないので、常識の範囲内でご自由にお使いください。

» 「JavaScriptによるストップウォッチ」のファイル一式をダウンロード

おまけ：HTML、CSS、JavaScript のソース

HTML

HTML ファイルの中身は以下のような感じです。ダウンロードできるほうのソースです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="ja" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
 
  <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
 
 
<body>
 
<div id="wrapper">
  <h1>JavaScriptによるストップウォッチ</h1>
    <ul>
      <li>スタート時刻と現在時刻の差分から経過時間を算出します</li>
      <li>ラップを記録することができます
        <ul>
          <li>タスク名を記入すれば、記録日時とタスク名、そして経過時間を記録します</li>
        </ul></li>
    </ul>
  <form action="#" name="formStopWatch" id="formStopWatch">
    <h2>タスク名：<input type="text" name="taskDisplay" id="taskDisplay" /></h2>
      <p class="center"><input type="text" value="00:00'00^00" name="timeDisplay" id="timeDisplay" /></p>
      <p class="center"><input type="button" value="スタート" name="buttonStartStop" id="buttonStartStop" onclick="return startOrStop()" /> <input type="button" value="リセット" name="buttonResetLap" id="buttonResetLap" onclick="return resetOrLap()" /></p>
    <h2>Lap 履歴</h2>
      <p><textarea name="lapDisplay" id="lapDisplay" rows="10" cols="40"></textarea></p>
      <p><input type="button" value="ラップをクリア" name="buttonLapClear" id="buttonLapClear" onclick="return lapClear()" /></p>
  </form>
</div>
 
<!-- JavaScript -->
<script type="text/javascript" src="function.js" charset="UTF-8"></script>
 
</body>
 
</html>

CSS

上のようなひどい見た目ではなくもう少しだけましな見た目にするための CSS です。

@charset "UTF-8";
 
 
/*--------------------------------------------------
   Initialize Browser's Default Style
--------------------------------------------------*/
 
* {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS UI Gothic", Verdana, Arial, sans-serif;
}
 
 
/*--------------------------------------------------
   Define Main Selectors
--------------------------------------------------*/
 
body {
  margin: 0;
  background-color: #ffffff;
  text-align: left;
}
 
h1 {
  margin: 20px 10px 10px 10px;
  padding: 3px 5px 3px 7px;
  padding: 8px 5px 8px 15px;
  border-top: 2px solid #10688a;
  border-bottom: 1px solid #10688a;
  background: url(bg-mainCaption.png) no-repeat;
  color: #10688a;
  line-height: 130%;
  font-size: 130%;
  text-shadow: 0px 1px 1px #10688a;
}
 
h2 {
  margin: 15px 10px 10px 15px;
  padding: 4px 5px;
  border-top: 1px solid #ebebeb;
  border-left: 5px solid #ed9f49;
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  background-image: url(slash.png) !important;
  background-image: url(slash_ie6.png);
  line-height: 130%;
  font-size: 110%;
  text-shadow: 1px 1px 1px gray;
}
 
p {
  margin: 0 15px 10px 25px;
  padding: 0;
  font-size: 100%;
  line-height: 130%;
  text-align: left;
}
 
ul {
  list-style-type: none;
  margin: 0 10px 10px 40px;
  line-height: 130%;
}
 
ul li {
  padding: 0 0 0 17px;
  background: url(list-icon.png) no-repeat left 3px;
}
 
ul li ul, ol li ol {
  margin: 0 0 5px 3px;
}
 
.center {
  text-align: center;
}
 
 
/*--------------------------------------------------
   Form Elements
--------------------------------------------------*/
 
input, textarea {
  padding: 2px 5px;
  font-size: 100%;
}
 
#taskDisplay {
  width: 320px;
}
 
#timeDisplay {
  width: 200px;
  text-align: center;
  font-size: 120%;
}
 
#lapDisplay {
  width: 430px;
  height: 200px;
}
 
#taskDisplay, 
#timeDisplay, 
#lapDisplay {
  border: 2px solid #ccc;
  background: url(form-bg-shadow.png) repeat-x;
}
 
#taskDisplay:focus, 
#timeDisplay:focus, 
#lapDisplay:focus {
  border: 2px solid #edb475;
}
 
#buttonStartStop, 
#buttonResetLap, 
#buttonLapClear {
  height: 30px;
}
 
#buttonStartStop, 
#buttonResetLap {
  width: 100px;
}
 
 
/*--------------------------------------------------
   Others
--------------------------------------------------*/
 
div#wrapper {
  margin: 0 auto;
  width: 500px;
}

JavaScript

ちなみに、JavaScript の中身は以下のような感じです。最初、10ミリ秒ごとにカウントを増やしていって、１秒になったら秒を１カウントアップして10ミリ秒を０に、１分になったら分を１カウントアップして秒を０に、１時間になったら時間を１カウントアップして分を０に……ということをやったのですが、これだと時間が経つうちに微妙に遅れてしまうので、結局、スタート時刻と現在時刻の差分から経過時間を算出するというやり方にしました。

/*
  * ストップウォッチ機能
  * スタート時刻と現在時刻の差分から経過時間を算出する
  * ラップを記録することが可能
    * タスク名を記入すれば記録日時とタスク名、そして経過時間を記録する
  */
 
//グローバル変数を宣言
var fsw = document.formStopWatch; //ストップウォッチ用フォーム
var tbTime = fsw.timeDisplay; //経過時間のテキストボックス
var tbLap = fsw.lapDisplay; //ラップを記録するテキストボックス
var myTime; //時間の差分をとるための変数
var myChk = 0; //スタート/ストップのチェック用変数
 
//経過時間をカウント
function count() {
  //現在時刻を記録
  var nowDate = new Date();
    var nowH = nowDate.getHours();             //時
    var nowM = nowDate.getMinutes();             //分
    var nowS = nowDate.getSeconds();             //秒
    var nowT = Math.floor(nowDate.getMilliseconds() / 10); //10ミリ秒
    var nowTime = nowH * 60 * 60 * 100
          + nowM * 60 * 100
          + nowS * 100
          + nowT; //現在時刻総合
  //現在時刻から、スタート時刻を引く
  var diffTime = nowTime - myTime;
  var h = Math.floor(diffTime / (60 * 60 * 100)); //時
    diffTime = diffTime - (h * 60 * 60 * 100);    //分取得のため変換
  var m = Math.floor(diffTime / (60 * 100));      //分
    diffTime = diffTime - (m * 60 * 100);         //秒取得のため変換
  var s = Math.floor(diffTime / 100);             //秒
  var t = diffTime % 100;                         //10ミリ秒
  //経過時間を数値から文字列に変換して再セット
  var hs = String(h); //時
  var ms = String(m); //分
  var ss = String(s); //秒
  var ts = String(t); //10ミリ秒
  //経過時間が1桁であれば10の位に "0" を加える
  hs = (h < 10)? "0" + hs: hs; //時
  ms = (m < 10)? "0" + ms: ms; //分
  ss = (s < 10)? "0" + ss: ss; //秒
  ts = (t < 10)? "0" + ts: ts; //10ミリ秒
  //経過時間を書き込む
  tbTime.value = hs + ":" + ms + "'" + ss + "^" + ts;
  document.title = hs + ":" + ms + "'" + ss + " - JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ";
}
 
//時間計測を開始する/停止する
function startOrStop() {
  //チェックが "0" ならば＝計測中でないならば
  if (myChk===0) {
    //テキストボックスより数値を取得
    var getH = tbTime.value.substr(0, 2); //時
    var getM = tbTime.value.substr(3, 2); //分
    var getS = tbTime.value.substr(6, 2); //秒
    var getT = tbTime.value.substr(9, 2); //10ミリ秒
    //経過時間がちゃんと "XX:XX'XX^XX" の形式になっているなら
    if (tbTime.value.substr(2, 1)===":" &&
      tbTime.value.substr(5, 1)==="'" &&
      tbTime.value.substr(8, 1)==="^" &&
      !getH.match(/[^0-9]/g) &&
      !getM.match(/[^0-9]/g) &&
      !getS.match(/[^0-9]/g) &&
      !getT.match(/[^0-9]/g)) {
      //ボタンの表示を変更してチェックを "1" にする
      fsw.buttonStartStop.value = "ストップ";
      fsw.buttonResetLap.value = "ラップ";
      myChk = 1;
      //スタート時刻を記録
      var startDate = new Date();
        var startH = startDate.getHours();                          //時
        var startM = startDate.getMinutes();                        //分
        var startS = startDate.getSeconds();                        //秒
        var startT = Math.floor(startDate.getMilliseconds() / 10);  //10ミリ秒;
        var startTime = startH * 60 * 60 * 100
                + startM * 60 * 100
                + startS * 100
                + startT; //スタート時刻総合
      //経過時間を文字列から数値に変換してスタート時刻から引く
      var getTime = parseFloat(getH) * 60 * 60 * 100
            + parseFloat(getM) * 60 * 100
            + parseFloat(getS) * 100
            + parseFloat(getT); //テキストボックスの数値総合
      myTime = startTime - getTime;
      //カウント開始（10ミリ秒ごと）
      timer = setInterval("count()", 10);
    //経過時間の形式が間違っていれば
    } else {
      window.alert("時間が不正です。\"XX:XX'XX^XX\" の形式にしてください。");
    }
  //チェックが "1" ならば＝計測中ならば
  } else {
    //ボタンの表示を変更してチェックを "0" にする
    fsw.buttonStartStop.value = "スタート";
    fsw.buttonResetLap.value = "リセット";
    myChk = 0;
    //カウント停止
    clearInterval(timer);
  }
}
 
//経過時間をリセットする/ラップを記録する
function resetOrLap() {
  //チェックが "0" ならば＝計測中でないならば
  if (myChk===0) {
    //経過時間をリセット
    tbTime.value = "00:00'00^00";
    document.title = "JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ";
  //チェックが "1" ならば＝計測中ならば
  } else {
    //テキストボックスから経過時間とタスク名を取得
    var lapTime = tbTime.value + "\n"; //時間
    var taskName = "「" + fsw.taskDisplay.value + "」 "; //タスク名
      //タスク名が空欄なら "タスクなし" にする
      if (taskName==="「」 ") {
        taskName = "「タスクなし」 ";
      }
    //日付と時刻を取得
    var myDate = new Date();
      var myYear  = myDate.getYear();
        myYear  = (myYear < 2000)? myYear + 1900: myYear;
      var myMonth = myDate.getMonth() + 1;
        myMonth = (myMonth < 10)? "0" + myMonth: myMonth;
      var myDay   = myDate.getDate();
        myDay   = (myDay < 10)? "0" + myDay: myDay;
      var myH = myDate.getHours();
        myH = (myH < 10)? "0" + myH: myH;
      var myM = myDate.getMinutes();
        myM = (myM < 10)? "0" + myM: myM;
      var myS = myDate.getSeconds();
        myS = (myS < 10)? "0" + myS: myS;
      myDate = myYear + "/" + myMonth + "/" + myDay + " " + myH + ":" + myM + "'" + myS + " ";
    //ラップ記録欄が空白ならそのまま記録
    if (tbLap.value==="") {
      tbLap.value = myDate + taskName + lapTime;
    //すでにラップが記録されているならその下に追記
    } else {
      tbLap.value = tbLap.value + myDate + taskName + lapTime;
    }
  }
}
 
//ラップを消去する
function lapClear() {
  tbLap.value = "";
}

▲上に戻る▲

よろしければ以下の関連（してそうな）記事もどうぞ！

« 前の記事：MS Wordをむりやりマークアップっぽく使う方法：異なる文字列の書式を一括で変更する
» 次の記事：Rubyで1からnまでの整数をランダムに並び替える（処理速度の比較まで）

6 Responses to “JavaScript のお勉強でストップウォッチを作ってみた”

ライフハックジャパンより:

July 8, 2010 02:02

JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ http://www.kagitaku.com/diary…

ライフハックジャパン
» このコメントを引用してコメントする
lifehack_japan より:

July 8, 2010 02:02

JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ http://bit.ly/bl2OoU

lifehack_japan
» このコメントを引用してコメントする
japanrock より:

July 8, 2010 11:20

JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ http://htn.to/Tiuzpd

japanrock
» このコメントを引用してコメントする
efcl より:

July 8, 2010 11:21

ストップウォッチ

efcl
» このコメントを引用してコメントする
bsiyo より:

July 8, 2010 11:40

Javascript: JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ : http://www.kagitaku.com/diary/2010/07/08/javascript-stopwatch.html

bsiyo
» このコメントを引用してコメントする
webdesignstatio より:

July 9, 2010 12:55

JavaScriptのお勉強でストップウォッチを作ってみた | きにきじ http://bit.ly/ciThBv

webdesignstatio
» このコメントを引用してコメントする

「きにきじ」：今日の気になる記事をきまぐれにご紹介