読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

AngularJSを使ってタイムキーパーを作ってみよう #2-1【デジタル時計の時刻表示】

AngularJS

前回までの基礎編では、タイムキーパーの基本的な実装までできました。
以降の応用編では、実践で使えるレベルにまで磨きをかけたいと思います。今回は、会議時間の合計値を「デジタル時計」の時刻表示に変換します。

秒単位を分単位に

前回まで(AngularJSを使ってタイムキーパーを作ってみよう 入門編まとめ - Web Design Note)は、各アジェンダの時間(秒単位)を合計した値をそのまま出力していましたが、
これを、例えば「1:50:04」のような、デジタル時計の時刻表示に変換したいと思います。

まずは、秒単位の数値を分単位に変換するように、「$scope.sumTime」関数に追記します。

$scope.sumTime = function(){
	var sum = 0;
	angular.forEach($scope.agendas, function(agenda){
		sum += agenda.time;//分の合計値
	});
	var secondUnit = sum*60;//追加部分
	return secondUnit;//追加部分
};

これで、入力値は60倍されるので、分単位になります。

デジタル時計の時刻表示

次に、デジタル時計のような時刻表示に変換する関数($scope.clockDisplay)を作ります。
今回は、こちらの記事を参考にしました。

考え方としては、引数に入れた値を、時間・分・秒、に分解して、それぞれをデジタル時計の該当箇所に出力します。
また、各単位の時間が1桁の場合、例えば、「1:5:3」ではなく、「01:05:03」と表示したいので、その関数(ここでは「 twoDigit(num)」)も作ります。

$scope.clockDisplay = function(time){
	function twoDigit(num) {//2桁表示
		if(num<10){
			time_display = '0'+num;
		}else{
			time_display = num;
		}
		return time_display;
	}
	clock_hour = twoDigit(Math.floor(time/3600)),//時間を取得
	clock_minute = twoDigit(Math.floor((time%3600)/60)),//分を取得
	clock_second = twoDigit((time%3600)%60),//秒を取得
	clock_display = clock_hour+':'+clock_minute+':'+clock_second;//時刻表示
	return clock_display;
};

これで、引数「time」に入れた値は、デジタル時計の時刻のように表示されます。

HTMLの式を変更

このデジタル表示に変換する関数ができたことによって、HTMLが少し変わります。
HTMLに記述してある合計値の”式”は、「{{countTime}}」、つまり、各アジェンダの合計値なので、この値は、上記で作成した関数「clockDisplay」の引数に入れるべきです。

よって、このような修正が入ります。

修正前

<p>会議時間 {{countTime}} / {{sumTime()}} 分</p>

修正後

<p>会議時間 {{clockDisplay(countTime)}}</p>

※{{sumTime()}}はあっても問題ないですが、表現として不要なので、削除します。

その他微改修

応用編ということで、少しずつ記述も整えていこうと思います。
細かいところなので説明は省きますが、今回は以下の点を修正しました。

  • js1行目の「angular.module('timekeeper',[])」を変数化
  • [削除]ボタンをaタグからbuttonタグに変更し、「ng-disabled="countRunning"」属性を付与

こうして、入力値の合計はデジタル表示に切り替わり、これまで通りカウントも可能です。

See the Pen mywxjW by tnk-mitsuru (@tnk-mitsuru) on CodePen.

次は、合計時間でなく、各アジェンダごとにカウントできるように修正します→AngularJSを使ってタイムキーパーを作ってみよう #2-2【アジェンダごとのカウント】 - Web Design Note