LoginSignup
0
1

More than 1 year has passed since last update.

JavaScript 2つの時間の差異を求めて、時差を表示する

Posted at

やりたかったこと

 現在時刻とユーザーが任意に入力した時刻の間の差異を求めて、00日00時間00分00秒(遅れ/早い)といった具合に時差を分かりやすく表示させたい

主に使ったメソッド

  • .getTime
    • 1970年1月1日00時00分から現在までの時間をミリ秒(1/1000秒)で表した数字を返すメソッド
  • Math.floor
    • 小数点以下を切り捨ててくれるメソッド
  • .toString
    • 数値を文字列に変換してくれるメソッド
  • .padStart
    • 数値を固定長文字列に変換するためのメソッド

記載したコード

    const NowTime = new Date();
    const ChangeTime = new Date(timeInput.value);
    / ここの「timeInput.value」にはユーザーが入力した任意の時刻が挿入される仕様で    let TimeDefference;
    function leftFillNum(num, targetLength) {
      return num.toString().padStart(targetLength, 0);
    } 
    function timeJudge(days, hour, minute, second) {
      return (leftFillNum(days, 2) + ''
            + leftFillNum(hour, 2) + '時間' 
            + leftFillNum(minute, 2) + '' 
            + leftFillNum(second, 2) + '');
    }
    if (NowTime.getTime() > ChangeTime.getTime()){
      TimeDefference = NowTime.getTime() - ChangeTime.getTime()
      let diffDays =  Math.floor(TimeDefference/1000/60/60/24);
      let diffHour =  Math.floor(TimeDefference/1000/60/60)%24;
      let diffMinute =  Math.floor(TimeDefference/1000/60)%60;
      let diffSecond =  Math.floor(TimeDefference/1000)%60;
      TimeDefference = timeJudge(diffDays, diffHour, diffMinute, diffSecond) + "遅れ";
    } else if (NowTime.getTime() < ChangeTime.getTime()){
      TimeDefference = ChangeTime.getTime() - NowTime.getTime()
      diffDays =  Math.floor(TimeDefference/1000/60/60/24);
      diffHour =  Math.floor(TimeDefference/1000/60/60)%24;
      diffMinute =  Math.floor(TimeDefference/1000/60)%60;
      diffSecond =  Math.floor(TimeDefference/1000)%60;
      TimeDefference = timeJudge(diffDays, diffHour, diffMinute, diffSecond) + "早い";
    }

冗長的なコードで、もっとDRYに記述できると思うのですが、とりあえずこれで確認したい時刻の表示を現在時刻を起点にして早い/遅いに条件分岐して表示させることができました。
以前書いた記事で、.padStartについてご教示いただき、とても参考になりました。
もっと改良して、より見やすいコードにしていこうと思います。

0
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1