前提・実現したいこと

時間帯を小数点付きの時間で足し算して、25時などの当日扱いの日付で取得したいのですが、
どのようなコードを書けばよいでしょうか？
ご教示お願い致します。

該当のソースコード

JavaScript
1var time = '21:00';
2var addhour = "4.5";

と与えられていた場合に、
timeにaddhourを加算して、「25:30」となるようなコードの組み方のご教示をお願い致します。

試したこと

こちらのサイト等を参考にしているのですが、わかりませんでした。

y_waiwai

2018/11/06 10:01

２６時とか２７時はどうします？

tkshp

2018/11/06 10:01

26:00や27:00や26:30や27:30とかのように表示したいです。

y_waiwai

2018/11/06 10:04

んじゃ３０時とか５０時とかはどうしますか？

tkshp

2018/11/06 10:13 編集

30:00とか50:00で表示したいです。ありえないですが99:00まで表示します。しかし、実際に足す値はそこまで大きくならないので、30を超えることはないです。－の値が入って、引き算することもあります。

think49

2018/11/06 10:14

1:00:59.999は切り捨てですかね。

tkshp

2018/11/06 10:25 編集

秒から切り捨てです。この場合、59.999は切り捨てです。さらにaddhourは、整数か小数第1位までしか入りません。addhourに負の整数、負の小数が入ることもありえます。 addhourが負の数(引き算)で、計算結果の時間帯が00:00未満になった場合は、00:00とみなします。いろいろ説明不足ですみません。

think49

2018/11/06 10:48

「1時間=60分」と分かっているのでしたら、計算式自体は非常に簡単だと思うので、どこで詰まっているのか伝わってきません。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

think49

2018/11/06 11:42

21:00 = 60 * 21 = 1260分 --> 1260 + 60 * 4.5 = 1530 --> 1530 % 60 = 30 --> (1530 - 30) / 60 = 25

行動規範の内容に同意します

回答4件

いくらでもやりようはあるかと思いますが、たとえばこう

javascript
1var mytime=function(str){
2  var hms=str.split(":");
3  this.hour=parseInt(hms[0]);
4  this.minute=parseInt(hms[1]|"0");
5  this.second=parseInt(hms[2]|"0");
6  this.addHour=function(n){
7    var h=Math.floor(n);
8    var m=Math.floor(Math.round((n-h)*60*1000)/1000);
9    var s=Math.round(((n-h)*60-m)*60);
10    this.hour+=h;
11    this.minute+=m;
12    this.second+=s;
13  };
14  this.disp=function(){
15    return this.hour.toString()+":"+(100+this.minute).toString().substr(-2)+":"+(100+this.second).toString().substr(-2);
16  };
17};
18var time=new mytime('21:00');
19console.log(time.disp());
20time.addHour(4.5);
21console.log(time.disp());
22time.addHour(1.234);
23console.log(time.disp());
24

調整

よく考えたら秒単位でやったほうがすっきりしますね

javascript
1var mytime=function(str){
2  var hms=str.split(":");
3  var h=parseInt(hms[0]);
4  var m=parseInt(hms[1]|"0");
5  var s=parseInt(hms[2]|"0");
6  this.time=h*3600+m*60+s;
7  this.addSecond=function(n){
8    this.time+=n;
9  };
10  this.addMinute=function(n){
11    this.time+=n*60;
12  };
13  this.addHour=function(n){
14    this.time+=n*3600;
15  };
16  this.disp=function(){
17    var minus=this.time<0?"-":"";
18    var t=Math.abs(this.time);
19    var h=Math.floor(t/3600).toString();
20    var m=(100+Math.floor((t%3600)/60)).toString().substr(-2);
21    var s=(100+Math.round(t%60)).toString().substr(-2);
22    return minus+h+":"+m+":"+s;
23  };
24};
25var time=new mytime('21:00');
26console.log(time.disp());
27time.addHour(4.5);
28console.log(time.disp());
29time.addHour(1.234);
30console.log(time.disp());
31time.addHour(-30.2);
32console.log(time.disp());
33time.addHour(4.1);
34console.log(time.disp());

投稿2018/11/06 10:39

編集2018/11/07 00:40

yambejp

総合スコア114839

tkshp

2018/11/07 03:00

ご回答ありがとうございます。とても勉強になりました。

行動規範の内容に同意します

こんにちは。

ベストアンサーが決まった後で恐縮ですが、自分ならどうするか？を考えてみましたので、参考までに別案として回答します。手段としては、時刻や時間の処理に便利な Moment.js を使います。

概要は以下の３点です。

(1) Moment.jsで作成されるオブジェクトに、 .hhmmというgetterアクセサを追加して、たとえば午前1時30分なら、"25:30"という文字列を返すようにします。

(2)また、 hhmm(string) というグローバルな関数も付属で用意して、 hhmm("27:45")とすると、午前３時４５分を時刻として持っている moment オブジェクトを返すようにします。

(3) 質問への追記・修正の中に

30を超えることはないです。

とあったので、30時すなわち午前6時が、（いわば）日付の変更時と解釈しました。

以下に、３つのソースファイルを示しますが、同じコードを以下のGitHubレポジトリ

https://github.com/jun68ykt/moment-h25

にも上げていますので、もしよければ、お手元に clone するかダウンロードしてみてください。

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Test of moment-h25</title>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
7    <script src="momentH25conf.js"></script>
8    <script src="test.js"></script>
9    <script>
10        document.addEventListener('DOMContentLoaded', function() {
11          momentH25conf(6); // at first, set 6 o'clock as the start hour
12          test(); // run test
13        });
14    </script>
15</head>
16<body>
17</body>
18</html>
19

momentH25conf.js

javascript
1function momentH25conf(startHour) {
2
3  // checking the parameter "startHour"
4  if (!Number.isInteger(startHour)) return;
5  if (startHour <= 0 || startHour > 12) return;
6
7  // add getter "hhmm"
8  moment()
9    .constructor
10    .prototype
11    .__defineGetter__('hhmm', function() {
12      let hour = this.hour();
13      if (hour < startHour)
14        hour += 24;
15      const hh = `${hour < 10 ? '0':''}${hour}`;
16      return `${hh}:${this.format('mm')}`;
17    });
18
19  // enhance moment() to handle the parameter with "HH:mm"(HH >= 25) format String
20  const _moment = moment;
21
22  window.moment = function() {
23    if (arguments.length === 2 && arguments[1]=== 'HH:mm') {
24      const matches = /^([0-9]{2}):([0-9]{2})$/.exec(arguments[0]);
25      if (matches) {
26        const h = parseInt(matches[1]);
27        if (24 < h && h < 24 + startHour) {
28          return _moment().add(1, 'day').hour(h-24).minute(parseInt(matches[2])).second(0);
29        }
30      }
31    }
32    return _moment(...[...arguments]);
33  };
34
35  window.hhmm = function(s) {
36    return window.moment(s, 'HH:mm');
37  };
38}
39

test.js

javascript
1function test() {
2
3  console.log('TEST.1 --------');
4  const t0 = hhmm('00:00');
5  console.log(t0.format('YYYY/MM/DD HH:mm'));
6  console.log(t0.hhmm); // "24:00"
7
8  console.log('TEST.2 --------');
9  const t1 = hhmm('24:00');
10  console.log(t1.format('YYYY/MM/DD HH:mm'));
11  console.log(t1.hhmm); // "24:00"
12
13  console.log('TEST.3 --------');
14  const t2 =hhmm('21:45');
15  console.log(t2.format('YYYY/MM/DD HH:mm'));
16  console.log(t2.hhmm); // "21:45"
17
18  console.log('TEST.4 --------');
19  const t3 = hhmm('05:21');
20  console.log(t3.format('YYYY/MM/DD HH:mm'));
21  console.log(t3.hhmm); // "29:21"
22
23  console.log('TEST.5 --------');
24  const t4 = hhmm('28:15');
25  console.log(t4.format('YYYY/MM/DD HH:mm'));
26  console.log(t4.hhmm); // "28:15"
27
28  console.log('TEST.6 --------');
29  const t5 = hhmm('21:00');
30  const t6 = hhmm('26:45');
31  console.log(t6.isAfter(t5));  // true
32  console.log(t5.isBefore(t6)); // true
33  console.log(t6.diff(t5, 'minutes')); // 345
34  console.log(t6.diff(t5, 'hours'));   // 5
35  console.log(t6.diff(t5, 'hours', true)); // 5.750271388888889 (or float value nearly 5.75 )
36
37  console.log('TEST.7 --------');
38  const t7 = hhmm('22:45');
39  const t8 = t7.add(4.5, 'hours');
40  console.log(t8.hhmm); // "27:15"
41
42  const t9 = t8.add(-20, 'minutes');
43  console.log(t9.hhmm); // "26:55"
44}

上記の index.htmlをブラウザで開き、開発ツールのConsole に以下が表示されるのを確認できると思います。

上記の test.js でも使っているとおり、Moment を使う利点は、すでに用意されている add や diff, isAfter, isBefore といった、便利なメソッドを使えることです。

以上、参考になれば幸いです。

投稿2018/11/07 04:45

jun68ykt

総合スコア9058

tkshp

2018/11/07 05:12

ご回答ありがとうございます。 Moment.jsという便利なライブラリがあったのですね。勉強になりました。ありがとうございます。

行動規範の内容に同意します

パースして、各桁（時分）で計算して、再整理（繰り上がり等）して表示させるのが一般的かと。

投稿2018/11/06 10:29

退会済みユーザー

総合スコア0

tkshp

2018/11/07 03:00

ご回答ありがとうございます。勉強になりました。

行動規範の内容に同意します

ベストアンサー

自身が提案する実装方法は、時刻・時間ともに、最も桁が小さい分に換算して、演算を行うものとなります。
ソースコードは、以下のようになります。

JavaScript
1function testCalcTime() {
2	var time = '21:00';
3	var addhour = "4.5";
4	console.log(calcTime(time, addhour));
5	/** result: 25:30 */
6
7	var time = '27:15';
8	var addhour = "30.8";
9	console.log(calcTime(time, addhour));
10	/** result: 58:03 */
11
12	var time = '23:00';
13	var addhour = "-10.7";
14	console.log(calcTime(time, addhour));
15	/** result: 12:18 */
16
17	var time = '10:00';
18	var addhour = "-10.5";
19	console.log(calcTime(time, addhour));
20	/** result: 0:00 */
21}
22
23/** 指定された時刻に時間を足した時刻を計算する */
24function calcTime(time, addhour) {
25	var calcTime = convertTimeToMinutes(time) + convertHourToMinutes(Number(addhour));
26	if (calcTime < 0) calcTime = 0;
27	return convertMinutesToTime(calcTime);
28}
29
30/** 時刻を分に換算する */
31function convertTimeToMinutes(time){
32	var times = time.split(':');
33	return Number(times[0]) * 60 + Number(times[1]);
34}
35
36/** 時間を分に換算する */
37function convertHourToMinutes(hour){
38	return Math.floor(hour * 60); // とりあえず切り捨て
39}
40
41/** 分を時刻に換算する */
42function convertMinutesToTime(minutes){
43	return Math.floor(minutes / 60) + ':' + ('00' + (minutes % 60)).slice(-2);
44}

投稿2018/11/06 12:00

編集2018/11/07 02:38

ZeroultR2

総合スコア27

tkshp

2018/11/07 03:01 編集

ご回答ありがとうございます。とても勉強になりました。とても分かりやすいコードと思いました。

tkshp

2018/11/07 06:36 編集

すみません、2つ質問があります。・1点目。　%の計算結果は余りなので、「絶対に整数になる(小数点は付かない)」という認識で合っていますか？　今回のminutes % 60に限らず、どんな%の式でも、「絶対に整数になる(小数点は付かない)」。　→すみません、整数を整数で%したら、必ず結果は整数になりそうですね。・2点目。　分だけでなく、時間の方も0埋めにしたい場合は、下記のように書けばよいですか？ function convertMinutesToTime(minutes){ return ('00' + (Math.floor(minutes / 60))).slice(-2) + ':' + ('00' + (minutes % 60)).slice(-2); }

ZeroultR2

2018/11/07 09:51 編集

> 1点目引数のminutesに小数の値が渡されると、(minutes % 60)の演算結果は小数となります。以下のリンクの剰余を参照してください。 [算術演算子-剰余] 　(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators) 運用上、tkshpさんの質問内容通りであれば、小数が渡ってくることはないので、(minutes % 60)の演算結果が小数となることはありません。 > 2点目上限が「99:00」であれば、質問の内容で問題ないです。ただ式が長くなり、分かりづらくなってきましたので、下記のように少し書き換えるといいかもしれません。 function convertMinutesToTime(minutes){ var hour = Math.floor(minutes / 60); var min = minutes % 60; return ('00' + hour).slice(-2) + ':' + ('00' + min).slice(-2); }

tkshp

2018/11/07 10:44

ご回答ありがとうございます。大変、勉強になりました。 2点目はご提示いただいたように書き換えたいと思います。ありがとうございます。

ZeroultR2

2018/11/07 11:36

こちらこそ、ベストアンサーありがとうございます。良いソフトウェアになるように頑張ってください。

行動規範の内容に同意します

あなたの回答