0

ユーザーが就業日の開始時刻と終了時刻を入力するためのページを作成しています。次に、彼らの選択に基づいて請求可能な時間を計算してほしい。私が望む結果なしでたくさんの異なるコードを試したので、これがjavascriptで可能かどうかはわかりません。以下は私が現在いるところです。

私はjavascriptを初めて使用するので、提供できる入力に本当に感謝しています。

ありがとう、アンドリュー

<select id="start_time" name="start_time">
         <option value="" selected="selected" disabled>Choose start time</option>
        <option value="09:00:00">9:00 AM</option>
        <option value="09:15:00">9:15 AM</option>
        <option value="09:30:00">9:30 AM</option>
        <option value="09:45:00">9:45 AM</option>
</select>
<br>
<select name="end_time">
         <option value="" selected="selected" disabled>Choose end time</option>
        <option value="17:00:00">5:00 PM</option>
        <option value="17:15:00">5:15 PM</option>
        <option value="17:30:00">5:30 PM</option>
        <option value="17:45:00">5:45 PM</option>
</select>
<br>
<select name="mealbreak" id="mealbreak">
         <option value="" selected="selected" disabled>Did you stop for lunch?</option>
        <option value="00:30:00">Yes, we ate.</option>
        <option value="00:00:00">No meal breaks.</option>
</select>       
<br>
Billable Hours<input type="text" id="billable_hours" name="billable_hours">

<script>
window.onload = function () {
var time1 = document.getElementById("start_time").options[document.getElementById("start_time").selectedIndex].value;
var time2 = document.getElementById("end_time").options[document.getElementById("end_time").selectedIndex].value;
var mealbreak = document.getElementById("mealbreak").options[document.getElementById("mealbreak").selectedIndex].value;
var billable = time2 - time1 - mealbreak;
    billable_hours = document.getElementById('billable_hours');

function () {
    billable_hours.value = billable.value;
  };
};
</script>
4

1 に答える 1

0

コードをあまり変更せずに、次の例を示します: http://jsfiddle.net/tEnyP/

<html>
<body>
<select id="start_time" name="start_time" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Choose start time</option>
        <option value="0">9:00 AM</option>
        <option value="15">9:15 AM</option>
        <option value="30">9:30 AM</option>
        <option value="45">9:45 AM</option>
</select>
<br>
<select id="end_time" name="end_time" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Choose end time</option>
        <option value="480">5:00 PM</option>
        <option value="495">5:15 PM</option>
        <option value="510">5:30 PM</option>
        <option value="525">5:45 PM</option>
</select>
<br>
<select name="mealbreak" id="mealbreak" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Did you stop for lunch?</option>
        <option value="30">Yes, we ate.</option>
        <option value="0">No meal breaks.</option>
</select>       
<br>
Billable Hours: <input type="text" id="billable_hours"/>

<script>
function calculateTime() {
    var time1 = document.getElementById("start_time").options[document.getElementById("start_time").selectedIndex].value;
    var time2 = document.getElementById("end_time").options[document.getElementById("end_time").selectedIndex].value;
    var mealbreak = document.getElementById("mealbreak").options[document.getElementById("mealbreak").selectedIndex].value;
    var billable = (time2 - time1 - mealbreak)/60;

    document.getElementById('billable_hours').value = billable; 
};
</script>
</body>
</html>

主な違いは 2 つあります。1 つ目は、各オプションの値を可能な限り早い開始時間 (午前 9 時 -> 0、午後 5 時 -> 480) からの分数にして、最終的な計算を非常に簡単にすることです。2 つ目は、時間を計算する関数が呼び出されるタイミングです。各 select 要素の「onChange」プロパティに注意してください。これにより、変更されるたびに「calculateTime」が呼び出されます。

アプリケーションの作成に取り掛かる前に、jQuery を学習することをお勧めします。このようなことがずっと簡単になります。

于 2012-12-14T16:34:43.143 に答える