javascriptを使用して開始から終了までの時間の合計を取得する

このサイトでは、この問題を解決するために何週間もこのサイトを検索してきましたが、入力フィールドの合計を取得するか、開始時刻と終了時刻は問題ありません。javascriptを使用して開始から終了までの時間の合計を取得する

私は現在reg（通常）とot（残業）時間を入力でき、各行の合計は合計ボックスに表示されているタイムシートを示していますが、下部には手動で合計する必要があります列の値

私がしたいのは、javascriptで開始時間と終了時間を計算し、reg、ot、totalフィールドに値を追加してフォームに入力する必要があるデータの量を排除することです祖母のための底の列。

このようにしたいのは、このフォームが電話アプリに変換され、入力ミスが少なくて済むことです。

私はこれに新しいので、間違っている（動作していますが）か、少ないコーディングでそれを達成するより良い方法があると確信しています。方向、入力、またはヘルプがあれば幸いです。

function sum() { 
 
     var txtFirstNumberValue = document.getElementById('reghours').value; 
 
     var txtSecondNumberValue = document.getElementById('othours').value; 
 
     var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue); 
 
     if (!isNaN(result)) { 
 
     document.getElementById('totalhours').value = result; 
 
     } 
 
} 
 
function sum2() { 
 
     var txtFirstNumberValue = document.getElementById('reghours2').value; 
 
     var txtSecondNumberValue = document.getElementById('othours2').value; 
 
     var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue); 
 
     if (!isNaN(result)) { 
 
     document.getElementById('totalhours2').value = result; 
 
     } 
 
} 
 
function sum3() { 
 
     var txtFirstNumberValue = document.getElementById('reghours3').value; 
 
     var txtSecondNumberValue = document.getElementById('othours3').value; 
 
     var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue); 
 
     if (!isNaN(result)) { 
 
     document.getElementById('totalhours3').value = result; 
 
     } 
 
} 
 
function sum4() { 
 
     var txtFirstNumberValue = document.getElementById('reghours4').value; 
 
     var txtSecondNumberValue = document.getElementById('othours4').value; 
 
     var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue); 
 
     if (!isNaN(result)) { 
 
     document.getElementById('totalhours4').value = result; 
 
     } 
 
} 
 
function sum5() { 
 
     var txtFirstNumberValue = document.getElementById('reghours5').value; 
 
     var txtSecondNumberValue = document.getElementById('othours5').value; 
 
     var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue); 
 
     if (!isNaN(result)) { 
 
     document.getElementById('totalhours5').value = result; 
 
     } 
 
} 
 

 
</script> 
 
<script> 
 

 
       $(function() { 
 

 
        $('#BasicExample').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample2').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample3').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample4').timepicker(); 
 

 
       }); 
 

 
\t \t \t \t $(function() { 
 

 
        $('#BasicExample5').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample6').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample7').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample8').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample9').timepicker(); 
 

 
       }); 
 
       $(function() { 
 

 
        $('#BasicExample10').timepicker(); 
 

 
       });

.ui-timepicker-wrapper { 
 
\t overflow-y: auto; 
 
\t height: 150px; 
 
\t width: 6.5em; 
 
\t background: #fff; 
 
\t border: 1px solid #ddd; 
 
\t -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2); 
 
\t -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2); 
 
\t box-shadow:0 5px 10px rgba(0,0,0,0.2); 
 
\t outline: none; 
 
\t z-index: 10001; 
 
\t margin: 0; 
 
} 
 

 
.ui-timepicker-wrapper.ui-timepicker-with-duration { 
 
\t width: 13em; 
 
} 
 

 
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30, 
 
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 { 
 
\t width: 11em; 
 
} 
 

 
.ui-timepicker-list { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
} 
 

 
.ui-timepicker-duration { 
 
\t margin-left: 5px; color: #888; 
 
} 
 

 
.ui-timepicker-list:hover .ui-timepicker-duration { 
 
\t color: #888; 
 
} 
 

 
.ui-timepicker-list li { 
 
\t padding: 3px 0 3px 5px; 
 
\t cursor: pointer; 
 
\t white-space: nowrap; 
 
\t color: #000; 
 
\t list-style: none; 
 
\t margin: 0; 
 
} 
 

 
.ui-timepicker-list:hover .ui-timepicker-selected { 
 
\t background: #fff; color: #000; 
 
} 
 

 
li.ui-timepicker-selected, 
 
.ui-timepicker-list li:hover, 
 
.ui-timepicker-list .ui-timepicker-selected:hover { 
 
\t background: #1980EC; color: #fff; 
 
} 
 

 
li.ui-timepicker-selected .ui-timepicker-duration, 
 
.ui-timepicker-list li:hover .ui-timepicker-duration { 
 
\t color: #ccc; 
 
} 
 

 
.ui-timepicker-list li.ui-timepicker-disabled, 
 
.ui-timepicker-list li.ui-timepicker-disabled:hover, 
 
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { 
 
\t color: #888; 
 
\t cursor: default; 
 
} 
 

 
.ui-timepicker-list li.ui-timepicker-disabled:hover, 
 
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { 
 
\t background: #f2f2f2; 
 
} 
 
.auto-style1 { 
 
\t text-align: right; 
 
} 
 
body { 
 
\t \t \t \t font-family: sans-serif; 
 
\t \t \t } 
 
\t \t \t #summation { 
 
\t \t \t \t font-size: 16px; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t \t color:#174C68; 
 
\t \t \t } 
 
\t \t \t .txt { 
 
\t \t \t \t background-color: #FEFFB0; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t \t text-align: center; 
 
\t \t \t } 
 
\t \t \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<script src="http://jemtech.us/scripts/jquery.timepicker.min.js"></script> 
 
<script src="http://jemtech.us/scripts/jquery.timepicker.js"></script> 
 

 
<body> 
 
    <form action="process_form.php" method="post"> 
 
    <table align="center" style="width: 498px"> 
 
     <td class="auto-style1">&nbsp;</td> 
 
     <td class="auto-style1">&nbsp;</td> 
 
     <td class="auto-style1" style="width: 127px">&nbsp;</td> 
 
    </table> 
 
    <table align="center" class="auto-style6" style="width: 857px"> 
 
     <th class="auto-style5" style="width: 47px">Start</th> 
 
     <th class="auto-style5" style="width: 47px">Stop</th> 
 
     <th class="auto-style5" style="width: 43px">Reg</th> 
 
     <th class="auto-style5" style="width: 45px">OT</th> 
 
     <th class="auto-style5" style="width: 51px">Total</th> 
 
     <th class="auto-style5"></th> 
 
     <tr> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample2" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 43px;"> 
 
      <input type="text" class="txt" name="RegularHours" id="reghours" onkeyup="sum()" style="width: 45px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 45px;"> 
 
      <input type="text" class="txt" name="OTHours" id="othours" value="0" onkeyup="sum()" style="width: 45px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 51px;"> 
 
      <input type="text" class="txt" name="TotalHours" id="totalhours" style="width: 50px" readonly/> 
 
     </td> 
 
     <td style="height: 26px"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample3" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample4" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 43px;"> 
 
      <input type="text" class="txt" name="RegularHours2" id="reghours2" onkeyup="sum2()" style="width: 45px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 45px;"> 
 
      <input type="text" class="txt" name="OTTotal2" id="othours2" value="0" onkeyup="sum2()" style="width: 45px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 51px;"> 
 
      <input type="text" class="txt" name="TotalHours2" id="totalhours2" style="width: 50px" readonly/> 
 
     </td> 
 
     <td style="height: 26px"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample5" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample6" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 

 
     <td style="height: 17px; width: 43px;"> 
 
      <input type="text" class="txt" class="txt" name="RegularHours3" id="reghours3" onkeyup="sum3()" style="width: 45px" /> 
 
     </td> 
 
     <td style="height: 17px; width: 45px;"> 
 
      <input type="text" class="txt" class="txt" name="OTHours3" id="othours3" value="0" onkeyup="sum3()" style="width: 45px" /> 
 
     </td> 
 
     <td style="height: 17px; width: 51px;"> 
 
      <input type="text" class="txt" class="txt" name="TotalHours3" id="totalhours3" style="width: 50px" readonly/> 
 
     </td> 
 
     <td style="height: 17px"> 
 
      &nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample7" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 

 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample8" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 
     <td style="width: 43px"> 
 
      <input type="text" class="txt" name="RegularHours4" id="reghours4" onkeyup="sum4()" style="width: 45px" /> 
 
     </td> 
 
     <td style="width: 45px"> 
 
      <input type="text" class="txt" name="OTHours4" id="othours4" value="0" onkeyup="sum4()" style="width: 45px" /> 
 
     </td> 
 
     <td style="width: 51px"> 
 
      <input type="text" class="txt" name="TotalHours4" id="totalhours4" style="width: 50px" readonly/> 
 
     </td> 
 
     <td> 
 
      &nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample9" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 

 
     <td style="height: 26px; width: 47px;"> 
 
      <input id="BasicExample10" type="text" class="time" style="width: 85px" /> 
 
     </td> 
 

 
     <td style="width: 43px"> 
 
      <input type="text" class="txt" name="RegularHours5" id="reghours5" onkeyup="sum5()" style="width: 45px" /> 
 
     </td> 
 
     <td style="width: 45px"> 
 
      <input type="text" class="txt" name="OTHours5" id="othours5" value="0" onkeyup="sum5()" style="width: 45px" /> 
 
     </td> 
 
     <td style="width: 51px"> 
 
      <input type="text" class="txt" name="TotalHours5" id="totalhours5" style="width: 50px" readonly/> 
 
     </td> 
 
     <td> 
 
      &nbsp;</td> 
 
     </tr> 
 
    </table> 
 

 
    <div class="auto-style1" style="width: 640px; height: 26px"> 
 
     <td><strong>Total Hours</strong> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="txt" name="RegTotal" id="total" style="width: 45px" readonly /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="txt" name="OTTotal" id="total" style="width: 45px" readonly/> 
 
     </td> 
 
     <td style="width: 45px"> 
 
     <tr id="summation"> 
 
      <td style="width: 50px"> 
 
      <input type="text" class="txt" name="GrandTotal" id="grandtotal" style="width: 50px" readonly/> 
 
      </td> 
 
      <td style="height: 23px"></td> 
 
     </tr> 
 
     </td> 
 
    </div> 
 
    <div style="height: 35px"></div> 
 
    <hr /> 
 
    <br/> 
 
    <input type="submit" name="submit" value="Submit" /> 
 
    </form> 
 
</body>

出典

2017-01-30 Andy

私は非常によく質問に従うとは思わない。ただし、電話アプリにする場合は、入力フィールドの代わりにドロップダウンボックス（選択ボックス）を使用することを検討してください。こうすることで、入力として「選択」できるものを絶対的に制御できます（たとえば、時間フィールドには「37」、分フィールドには「74」などの奇妙な数字を入力できません）。時間ドロップダウンに値「00」〜「23」を、同様に分を「00」〜「59」とします。 –

@DhruvSaxenaのように、これらは入力フィールドであってはなりません。エラーのための余裕が余裕があり、適切なフォーマットで時間を入れていない人々。 [時間入力フィールド]（http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_time）もあります。しかし、私はこのタイムシートがどのように動作するのか、どのフォーマットが各ボックス（12時間フォーマット、24 /軍フォーマット？）にある必要があるのか、どのregとotが表すのかわからない。残業はありますか？明確な要件で必要なものの超簡単な例を作れば、ここではより良い運を得られるでしょう。 –

私はhtmlを編集し、時間のドロップダウンボックスを追加しました。 Reg = 8時間までの定期的な時間と、OT = 8時間後の何かのための超過時間。軍事的な時間を把握しなければならない場合、従業員が不平を言う標準的な時間。 – Andy

計算にhttps://momentjs.com/とともにhttps://www.sitepoint.com/10-jquery-time-picker-plugins/で述べたようにjQueryのTimePickerのプラグインを使用することを検討してください。

出典

2017-01-30 04:43:38

私はスニペットで見ることができるようにTimePickerを追加しましたが、momentsjが開始時間と停止時間を計算する方法と、reg入力ボックスにその合計でどのように計算するか、または、残業かどうか。 – Andy

他の人が述べたように、日付選択ツールを使用すると、あなたとあなたのユーザーの両方にとってこれがより簡単になります。いずれにせよ、あなたは次にあなたの開始と終了の日付の差を計算する日付オブジェクトに

// With date picker 
var startDate = new Date(startPicker.value);

または

// With current select inputs 
// Get AM/PM hours - hourSelect should be the select element for hours 
var startHrs = periodSelect.value === 'PM' 
    ? parseInt(hourSelect.options[hourSelect.selectedIndex].value, 10) 
    : parseInt(hourSelect.options[hourSelect.selectedIndex].value, 10) + 12; 
// No date provided so use dummy date (1970-1-1) 
var startDate = new Date(
    1970, 
    1, 
    1, 
    startHrs, 
    minuteSelect.options[minuteSelect.selectedIndex].value; // minuteSelect should be the select element for minutes 
);

を得るためにあなたの入力を解析する必要があります。前述のように、これにはmoment.jsを使用できますが、通常の日付オブジェクトで十分です。

function getDifference(startDate, endDate) { 
    return new Date(endDate.getTime() - startDate.getTime()); 
}

今は働いていた合計時間を取得するためにdifference.getUTCHours()とdifference.getUTCMinutesを使用することができます。合計から定期的かつ残業することは些細なことです。開始時刻が最後の前であることを確認してください。

出典

2017-01-30 06:37:57 elvey

...少ないコーディングでそれを達成するより良い方法があります。

問題の本質ではない（それはまた、重要な決定であるが）日付ピッカーを使用するかどうかについては、コードDRYを維持する方法についてのようです。

繰り返し行を持つこのようなスプレッドシートのようなアプリケーションにおける黄金ルールは、次のとおり要素

非繰り返す

使用IDSだけ繰り返し行の要素について

使用クラス

jQuery(function($) { 
    var overtimeAfter = 8.0; // hours per day 

    // *** utility Constructor *** 
    function Hours(std, ot) { 
     return {'std':std, 'ot':ot}; 
    } 
    Hours.prototype.add = function(otherHours) { 
     return new Hours(this.std+otherHours.std, this.ot+otherHours.ot); 
    } 

    // *** utility functions *** 
    function getTime(input) { 
     // Here, do whatever is necessary to convert input values to some standard abstraction: 
     // for example, 24H string or js Date() object. 
     return Number(input.val()); // simplest case 
    } 
    function timeDiffernce(t1, t2) { 
     // Here do whatever is necessary to calculate the time difference 
     // between t2 and t1, in whatever abstraction was returned by getTime(). 
     // For example: 
     var t = t2 - t1; // simplest case 
     return (t < 0) ? 24 + t : t; // allow for t1...t2 to span midnight 
    } 

    // *** core functions *** 
    function calcDayHours(tr) { 
     // here is where you benefit from classes within the table row 
     var time1 = getTime($('.time1', tr)); 
     var time2 = getTime($('.time2', tr)); 
     var hours = timeDiffernce(time1, time2); 
     var std = Math.min(hours, overtimeAfter); 
     var ot = Math.max(0, hours - overtimeAfter); 
     var total = std + ot; 
     $('.reghours', tr).val(std); 
     $('.othours', tr).val(ot); 
     $(".totalhours", tr).val(total); 
     return new Hours(std, ot); 
    } 
    function calcWeekHours(hours) { 
     var weekHours = hours.reduce(function(week, day) { 
      return week.add(day); 
     }, new Hours(0, 0)); 
     // these elements are unique, therefore identified by id. 
     $("#regTotal").val(weekHours.std); 
     $("#otTotal").val(weekHours.ot); 
     $("#grandTotal").val(weekHours.std + weekHours.ot); 
     return weekHours; 
    } 

    // *** master function *** 
    function sum() { 
     // Assume a table or tbody with id="timesheet" 
     var dayHours = $("#timesheet tr").get().map(calcDayHours); 
     var weekHours = calcWeekHours(dayHours); 

     // if you want wage calculations, then pass `weekHours` to a `calcWages()` function. 
     // var wages = calcWages(weekHours); 
    } 

    // Then attach `sum` as the handler for all kinds of keyup/tap/click/focus/blur events. 
});

これは単なるフレームですework。作るために決定がまだあります、例えば：

は

あなたが期待される日付/時刻の入力フォーマット（日付ピッカー対テキスト...）に依存しますgetTime()に書かれたものは
あなたはtimeDiffernce()に書かれたものは異なりますgetTime()（Number vs Date ...）から返品することに決めました。
このイベントは、sum()をトリガーする必要があります。
超過時間のしきい値を指定する方法overtimeAfter - 上記のようなハードコーディングが開始されます。
"1日あたり"、 "1週間あたり"、または "1ヶ月あたり"という基準で超過期間の基準をどのように調整するか - 賃金システムは異なります。

出典

2017-01-30 17:20:15

javascriptを使用して開始から終了までの時間の合計を取得する

答えて

関連する問題