PROGRAMMING
javascript
- JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- 前月・翌月の日付を埋め込んだカレンダーを作る
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- ページャーを作る(簡易版)
- jQuery:Tableで親・子・兄弟要素を取得
- ページャーを作る
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- 祝休日対応のカレンダーを作る
- jQuery:モーダルウィンドウを作ってみる
CSS
PHP
Java
SQL
ストップウォッチを作る
あるアプリのコードを書いていて、その処理時間を知りたいと思いました。
setIntervalをいじっているうちに、よくあるストップウォッチにしてみよう思い作ってみました。、
時間の表示は最小単位を10ミリ秒にしてあります。
時:分:秒:10ミリ秒 です。
スタートボタンはストップボタンを併用し交互に変わるようにしています。
表示されるページを準備
まずは表示するページです。簡単なHTMLです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ストップウォッチ</title>
<meta charset="UTF-8">
<script src="./js/jquery-1.8.0.min.js"></script>
<script src="./js/stopwatch.js"></script>
</head>
<body>
<form>
<input id="counter" name="counter" type="text" value="00:00:00:00">
<input id="btnStart" name="btnStart" type="button" value="start">
<input id="btnReset" name="btnReset" type="button" value="reset">
</form>
</body>
</html>
動作を定義しているjavascript
jqueryを使わずにjavascriptでDOM操作をと思いましたが、面倒になったのでjqueryで記述しました。
$(function(){
reset_timer();
var timer;
var timerID;
var timerFlag = 0; // 0:停止 1:動作
// スタート(ストップ)ボタンのクリックイベント
$("#btnStart").on("click", function(){
if(timerFlag === 0){
start_count();
}else{
stop_count();
}
});
// リセットボタンのクリックイベント
$("#btnReset").on("click", function(){
reset_timer();
});
// リセット
function reset_timer() {
if(timerFlag === 1){
stop_count();
}
timer = 0;
$("#counter").val("00:00:00:00");
}
// スタート
function start_count() {
$("#btnStart").val("stop");
timerFlag = 1;
timerID = setInterval(count_up, 10);
}
// ストップ
function stop_count() {
$("#btnStart").val("start");
timerFlag = 0;
clearInterval(timerID);
}
// 10ミリ秒単位でカウントアップする
function count_up() {
++timer;
var formatTimer = counter_format(timer);
$("#counter").val(formatTimer);
}
// 時間の経過を時:分:秒:10ミリ秒で表す
function counter_format(num) {
var numZan = num; // 残りの時間(10ミリ秒単位)
// 時を計算:100で割って秒、60秒で割り分に、さらに60分で割り残りを切り捨てで時に
var hh = Math.floor(numZan / (100 * 60 * 60));
// numの残り:取得した時の部分を10ミリ秒単位にして除く、
numZan = numZan - (hh * 100 * 60 * 60);
// 分を計算:残り時間を100で割って秒、60秒で割り残りを切り捨てて分に
var mm = Math.floor(numZan / (100 * 60));
// numの残り:取得した分の部分を10ミリ秒単位にして除く、
numZan = numZan -(mm * 100 * 60);
// 秒を計算:残り時間を100で割り残りを切り捨てて秒に
var ss = Math.floor(numZan / 100);
// 最後の残りが10ミリ秒部分
numZan = numZan - (ss * 100);
var ms = numZan;
// 見やすいように二桁表示に
if(hh < 10){hh = "0" + hh;}
if(mm < 10){mm = "0" + mm;}
if(ss < 10){ss = "0" + ss;}
if(ms < 10){ms = "0" + ms;}
return hh + ":" + mm + ":" + ss + ":" + ms;
}
});
setIntervalの関数名
setIntervalの関数名をダブルクォートで括ったらnetbeansに関数が見当たらないと注意されました。
どうにもわからなくてネットを検索したらここにあったので、
書かれているとおりダブルクォートを外し、さらに関数のカッコも除いたら動きました。よく分かりません?
- 参考にさせていただいたサイト
- http://www.shurey.com/js/craft/stopwatch/index.html