質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20413questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

時間の足し算を25時間とかの表記で取得する方法。

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 983

tkshp

score 96

 前提・実現したいこと

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

 該当のソースコード

var time = '21:00';
var addhour = "4.5";


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

 試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tkshp

    2018/11/06 19:17 編集

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

    キャンセル

  • think49

    2018/11/06 19:48

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

    キャンセル

  • think49

    2018/11/06 20:42

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

    キャンセル

回答 4

+2

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

var mytime=function(str){
  var hms=str.split(":");
  this.hour=parseInt(hms[0]);
  this.minute=parseInt(hms[1]|"0");
  this.second=parseInt(hms[2]|"0");
  this.addHour=function(n){
    var h=Math.floor(n);
    var m=Math.floor(Math.round((n-h)*60*1000)/1000);
    var s=Math.round(((n-h)*60-m)*60);
    this.hour+=h;
    this.minute+=m;
    this.second+=s;
  };
  this.disp=function(){
    return this.hour.toString()+":"+(100+this.minute).toString().substr(-2)+":"+(100+this.second).toString().substr(-2);
  };
};
var time=new mytime('21:00');
console.log(time.disp());
time.addHour(4.5);
console.log(time.disp());
time.addHour(1.234);
console.log(time.disp());

 調整

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

var mytime=function(str){
  var hms=str.split(":");
  var h=parseInt(hms[0]);
  var m=parseInt(hms[1]|"0");
  var s=parseInt(hms[2]|"0");
  this.time=h*3600+m*60+s;
  this.addSecond=function(n){
    this.time+=n;
  };
  this.addMinute=function(n){
    this.time+=n*60;
  };
  this.addHour=function(n){
    this.time+=n*3600;
  };
  this.disp=function(){
    var minus=this.time<0?"-":"";
    var t=Math.abs(this.time);
    var h=Math.floor(t/3600).toString();
    var m=(100+Math.floor((t%3600)/60)).toString().substr(-2);
    var s=(100+Math.round(t%60)).toString().substr(-2);
    return minus+h+":"+m+":"+s;
  };
};
var time=new mytime('21:00');
console.log(time.disp());
time.addHour(4.5);
console.log(time.disp());
time.addHour(1.234);
console.log(time.disp());
time.addHour(-30.2);
console.log(time.disp());
time.addHour(4.1);
console.log(time.disp());

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/07 12:00

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/07 12:00

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

    キャンセル

+1

こんにちは。

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

概要は以下の3点です。

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

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

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

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

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

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

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

 index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Test of moment-h25</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="momentH25conf.js"></script>
    <script src="test.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
          momentH25conf(6); // at first, set 6 o'clock as the start hour
          test(); // run test
        });
    </script>
</head>
<body>
</body>
</html>

 momentH25conf.js

function momentH25conf(startHour) {

  // checking the parameter "startHour"
  if (!Number.isInteger(startHour)) return;
  if (startHour <= 0 || startHour > 12) return;

  // add getter "hhmm"
  moment()
    .constructor
    .prototype
    .__defineGetter__('hhmm', function() {
      let hour = this.hour();
      if (hour < startHour)
        hour += 24;
      const hh = `${hour < 10 ? '0':''}${hour}`;
      return `${hh}:${this.format('mm')}`;
    });

  // enhance moment() to handle the parameter with "HH:mm"(HH >= 25) format String
  const _moment = moment;

  window.moment = function() {
    if (arguments.length === 2 && arguments[1]=== 'HH:mm') {
      const matches = /^([0-9]{2}):([0-9]{2})$/.exec(arguments[0]);
      if (matches) {
        const h = parseInt(matches[1]);
        if (24 < h && h < 24 + startHour) {
          return _moment().add(1, 'day').hour(h-24).minute(parseInt(matches[2])).second(0);
        }
      }
    }
    return _moment(...[...arguments]);
  };

  window.hhmm = function(s) {
    return window.moment(s, 'HH:mm');
  };
}

 test.js

function test() {

  console.log('TEST.1 --------');
  const t0 = hhmm('00:00');
  console.log(t0.format('YYYY/MM/DD HH:mm'));
  console.log(t0.hhmm); // "24:00"

  console.log('TEST.2 --------');
  const t1 = hhmm('24:00');
  console.log(t1.format('YYYY/MM/DD HH:mm'));
  console.log(t1.hhmm); // "24:00"

  console.log('TEST.3 --------');
  const t2 =hhmm('21:45');
  console.log(t2.format('YYYY/MM/DD HH:mm'));
  console.log(t2.hhmm); // "21:45"

  console.log('TEST.4 --------');
  const t3 = hhmm('05:21');
  console.log(t3.format('YYYY/MM/DD HH:mm'));
  console.log(t3.hhmm); // "29:21"

  console.log('TEST.5 --------');
  const t4 = hhmm('28:15');
  console.log(t4.format('YYYY/MM/DD HH:mm'));
  console.log(t4.hhmm); // "28:15"

  console.log('TEST.6 --------');
  const t5 = hhmm('21:00');
  const t6 = hhmm('26:45');
  console.log(t6.isAfter(t5));  // true
  console.log(t5.isBefore(t6)); // true
  console.log(t6.diff(t5, 'minutes')); // 345
  console.log(t6.diff(t5, 'hours'));   // 5
  console.log(t6.diff(t5, 'hours', true)); // 5.750271388888889 (or float value nearly 5.75 )

  console.log('TEST.7 --------');
  const t7 = hhmm('22:45');
  const t8 = t7.add(4.5, 'hours');
  console.log(t8.hhmm); // "27:15"

  const t9 = t8.add(-20, 'minutes');
  console.log(t9.hhmm); // "26:55"
}

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

イメージ説明

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/07 14:12

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

    キャンセル

checkベストアンサー

0

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

function testCalcTime() {
    var time = '21:00';
    var addhour = "4.5";
    console.log(calcTime(time, addhour));
    /** result: 25:30 */

    var time = '27:15';
    var addhour = "30.8";
    console.log(calcTime(time, addhour));
    /** result: 58:03 */

    var time = '23:00';
    var addhour = "-10.7";
    console.log(calcTime(time, addhour));
    /** result: 12:18 */

    var time = '10:00';
    var addhour = "-10.5";
    console.log(calcTime(time, addhour));
    /** result: 0:00 */
}

/** 指定された時刻に時間を足した時刻を計算する */
function calcTime(time, addhour) {
    var calcTime = convertTimeToMinutes(time) + convertHourToMinutes(Number(addhour));
    if (calcTime < 0) calcTime = 0;
    return convertMinutesToTime(calcTime);
}

/** 時刻を分に換算する */
function convertTimeToMinutes(time){
    var times = time.split(':');
    return Number(times[0]) * 60 + Number(times[1]);
}

/** 時間を分に換算する */
function convertHourToMinutes(hour){
    return Math.floor(hour * 60); // とりあえず切り捨て
}

/** 分を時刻に換算する */
function convertMinutesToTime(minutes){
    return Math.floor(minutes / 60) + ':' + ('00' + (minutes % 60)).slice(-2);
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/07 12:00 編集

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

    キャンセル

  • 2018/11/07 12:14 編集

    すみません、2つ質問があります。

    ・1点目。
     %の計算結果は余りなので、「絶対に整数になる(小数点は付かない)」という認識で合っていますか?
     今回のminutes % 60に限らず、どんな%の式でも、「絶対に整数になる(小数点は付かない)」。
     →すみません、整数を整数で%したら、必ず結果は整数になりそうですね。

    ・2点目。
     分だけでなく、時間の方も0埋めにしたい場合は、下記のように書けばよいですか?

    function convertMinutesToTime(minutes){
    return ('00' + (Math.floor(minutes / 60))).slice(-2) + ':' + ('00' + (minutes % 60)).slice(-2);
    }

    キャンセル

  • 2018/11/07 18:49 編集

    > 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);
    }

    キャンセル

  • 2018/11/07 19:44

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

    キャンセル

  • 2018/11/07 20:36

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20413questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。