Question

在我的编码中我使用jQuery日期选择器并在文本框中手动从用户那里得到时间[08] [15] [AM] 3个不同的textboxes。

我的代码基于Web应用程序来查找一个工作人员的效率。

每个工人都将进入工作和每天完成工作所需的时间，我在几小时之间的时间计算上有点挣扎例如

documentation work  08:15 AM - 01:15 PM = 5 hrs on the same day and 
UI design           11:00 PM - 02:00 AM = 3 hrs on the next early morning

这些值写在textboxes中，同时提交这些值将被带到servlets，我想在两个数字之间执行计算差异，所以任何一个请帮帮我我挣扎了一个多星期来计算时差。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WRS</title>
    <link href="css/datejquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="JS/datejquery.min.js"></script>
    <script src="JS/datejquery-ui.min.js"></script>
    <script src="JS/service.js"></script>
    <script>
        $(document).ready(function(){
            $("#datepicker").datepicker({
                numberOfMonths: 2,
                onSelect: function(selected) {
                    $("#datepicker1").datepicker("option","minDate", selected);

                }
            });
            $("#txtendmins1").change(function(){

                var sHour = $("#txtstarthrs1").val();
                var eHour = $("txtendhrs1").val();
                var sMint = $("txtstartmins1").val();
                var eMint = $("txtendmins1").val();
                $("#txttotal1").val(calculateTime(sHour,sMint,eHour,eMint));
            });

            function calculateTime(sHour,sMint,eHour,eMint){
                var hourSubtract = ( eHour - sHour);
                var minSubtract = (eMint - sMint);
                var hourTomins = ((hourSubtract*60)+minSubtract) ;
                totalHourToMins(hourTomins);
                return hourTomins;
            }

            $("#txtendmins2").change(function(){
                var startHRS2 = document.getElementById("txtstarthrs2").value;
                var endHRS2 = document.getElementById("txtendhrs2").value;
                var startMins2 = document.getElementById("txtstartmins2").value;
                var endMins2 = document.getElementById("txtendmins2").value;

                calculateTime()
            });

            $("#datepicker1").datepicker({
                numberOfMonths: 2,
                onSelect: function(selected) {
                    $("#datepicker").datepicker("option","maxDate", selected);
                }
            });
        });
    </script>
    <script type="text/javascript">
        function validateDatepicker(){

            var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
            var date1 = $('#datepicker1').datepicker({ dateFormat: 'dd-mm-yy' }).val();
            if(date===date1)
            {
                alert("hi");
            }
        }
    </script>
    <script type="text/javascript">
        function validateDate(){
            var startHrs = document.getElementById("txtStarthrs").value;
            var startMins = document.getElementById("txtStartmins").value;
            var endHrs = document.getElementById("txtEndhrs").value;
            var endMins = document.getElementById("txtEndmins").value;
            var hourSubtract = ( endHrs- startHrs);
            var minSubtract = (endMins - startMins);
            var hourTomins = ((hourSubtract*60)+minSubtract) ;
            var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
            var date1 = $('#datepicker1').datepicker({ dateFormat: 'dd-mm-yy' }).val();
            if((date===date1)&&(hourTomins<1))
            {
                alert("please enter the correct timing");
                location.reload();
            }
            else
            {
                document.getElementById("txtElapsedhrs").value = hourTomins;
            }
        }
    </script>
    <script language="javascript">
        function getCodeDetails1(){
        }
        function displayResult(data) {
            if (data.error) // emp not found
            {
                $("#txtIEdesc1").val(""); // clear fields
                alert( data.error);
            }
            else  // Found employee. Display details
            {
                $("#txtIEdesc1").val(data.name);
            }
        }
        function getCodeDetails2(){

            $.getJSON("ieCodedetails.jsp",{codeid:$("#txtIEcode2").val()},displayResult2);
        }
        function displayResult2(data) {
            if (data.error) // emp not found
            {
                $("#txtIEdesc2").val(""); // clear fields

                alert( data.error);
            }
            else  // Found employee. Display details
            {
                $("#txtIEdesc2").val(data.name);
            }
        }

    </script>
    <script type="text/javascript">
        function myFunction()
        {
            var elapsedhrs = document.getElementById("txtElapsedhrs").value;
            var totalhrs = document.getElementById("txtTotalhrs").value;
            if(elapsedhrs === totalhrs)
            {
                document.getElementById(myBtn).disabled = false;
            }
            document.getElementById(myBtn).disabled = true;
        }
    </script>
    <script type="text/javascript">
        var totalTime=0;
        function endMins1()
        {
            var startHRS1 = document.getElementById("txtstarthrs1").value;
            var endHRS1 = document.getElementById("txtendhrs1").value;
            var startMins1 = document.getElementById("txtstartmins1").value;
            var endMins1 = document.getElementById("txtendmins1").value;

            var hourSubtract = ( endHRS1 - startHRS1);
            var minSubtract = (endMins1 - startMins1);
            var hourTomins = ((hourSubtract*60)+minSubtract) ;
            document.getElementById("txttotal1").value = hourTomins;
            totalHourToMins(hourTomins);
        }
        function endMins2()
        {
            var startHRS2 = document.getElementById("txtstarthrs2").value;
            var endHRS2 = document.getElementById("txtendhrs2").value;
            var startMins2 = document.getElementById("txtstartmins2").value;
            var endMins2 = document.getElementById("txtendmins2").value;

            var hourSubtract = ( endHRS2 - startHRS2);
            var minSubtract = (endMins2 - startMins2);
            var hourTomins = ((hourSubtract*60)+minSubtract) ;
            document.getElementById("txttotal2").value = hourTomins;
            totalTime+=hourTomins;
        }


    </script>
</head>

<BODY style="background-color: #ffffff;">
<form name="WRSfilling" action="dummy.jsp" method="post">
    <a href="logout.jsp" style="padding-right: 30px;">Logout</a>
    <% userBean currentUser = ((userBean) (session.getAttribute("currentSessionUser")));%>
    Welcome <%= currentUser.getname() + "" %>
    <br><br>
    <div style="float:right;padding-right:50px;" id="startEndtime">
        <TABLE border="1" style="border-color: yellowgreen">
            <tr><td></td><th>Start</th><th>End</th></tr>
            <tr>
                <td><label>Date</label></td>
                <td>
                    <input id="datepicker" name="pickedDate"/>
                </td>
                <td>
                    <input id="datepicker1" name="pickedDate1"/>
                </td></tr>
            <tr>
                <td><label> HRS / Mins</label></td>
                <td>
                    <input type="text" name="txtStarthrs" id="txtStarthrs" placeholder="HRS"  style="width:65px;"/>
                    <input type="text" name="txtStartmins" id="txtStartmins" placeholder="Mins" style="width:65px;"/>
                </td>
                <td>
                    <input type="text" name="txtEndhrs" id="txtEndhrs" placeholder="HRS"  style="width:65px;"/>
                    <input type="text" name="txtEndmins" id="txtEndmins" placeholder="Mins" style="width:65px;" onchange="validateDate()"/>
                </td>
            </tr>
            <tr>

                <td> Elapsed Hours </td>
                <td> <input type="text" name="txtElapsedhrs" id="txtElapsedhrs" style="width:75px;" readonly></td>
            </tr>
            <tr>
                <td> Total Hours </td>
                <td> <input type="text" name="txtTotalhrs" id = "txtTotalhrs" style="width:75px;"></td>
            </tr>


        </TABLE>
    </div>
    <br>
    <div>
        <table border="1" style="border-color: yellowgreen">
            <tr> <td> Name :</td>   <td> <input type="text" value="<%= currentUser.getname() %>" name="name" readonly> </td></tr>
            <tr> <td> PC No :</td>   <td> <input type="text" value=" " name="name" readonly> </td></tr>
            <%java.text.DateFormat df = new java.text.SimpleDateFormat("dd/MM/yyyy"); %>
            <tr><td> date : </td><td><input type="text" value="<%= df.format(new java.util.Date()) %> " name="date" readonly></td></tr>

        </table> </div>
    <br><br><br>
    <input type="hidden" name="hiddenTotalhrs">


    <br>
    <table border="1" style="background-color: yellowgreen; " >
        <thead>
        <tr>
            <th>S.No</th>
            <th>Activity Code</th>
            <th>Activity Name</th>
            <th>Remarks</th>
            <th>Qty.</th>
            <th>Start-HRS</th>
            <th>Start - Min</th>
            <th>End - HRS</th>
            <th>End - Mins </th>
            <th>Total</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <input type="text" value="1"  style="width:15px;" readonly>                     </td>
            <td><input type="text" name="txtIEcode1" id="txtIEcode1" onchange="getCodeDetails1()" style="width:60px;"></td>
            <td><input type="text" id="txtIEdesc1" name="txtIEdesc1" style="width:220px;" readonly></td>
            <td><input type="text" id="txtRemarks1" name="txtRemarks1"></td>
            <td><input type="text" id="txtQty1" name="txtQty1" style="width:50px;" ></td>
            <td><input type="text" id="txtstarthrs1" name="txtstarthrs1" style="width:50px;"> </td>
            <td><input type="text" id="txtstartmins1" name="txtstartmins1" style="width:50px;" ></td>
            <td><input type="text" id="txtendhrs1" name="txtendhrs1" style="width:50px;"  ></td>
            <td><input type="text" id="txtendmins1" name="txtendmins1" style="width:50px;"></td>
            <td><input type="text" id="txttotal1" name="txttotal1" style="width:50px;"></td>
        </tr>
        <tr>
            <td>
                <input type="text" value="2"  style="width:15px;" readonly>
            </td>
            <td><input type="text" name="txtIEcode2" id="txtIEcode2" style="width:60px;" onchange="getCodeDetails2()"></td>
            <td><input type="text" id="txtIEdesc2" name="txtIEdesc2" style="width:220px;"></td>
            <td><input type="text" id="txtRemarks2" name="txtRemarks2"></td>
            <td><input type="text" id="txtQty2" name="txtQty2" style="width:50px;" ></td>
            <td><input type="text" id="txtstarthrs2" name="txtstarthrs2" style="width:50px;"></td>
            <td><input type="text" id="txtstartmins2" name="txtstartmins2" style="width:50px;" ></td>
            <td><input type="text" id="txtendhrs2" name="txtendhrs2" style="width:50px;"  ></td>
            <td><input type="text" id="txtendmins2" name="txtendmins2" style="width:50px;"  ></td>
            <td><input type="text" id="txttotal2" name="txttotal2" style="width:50px;"></td>
        </tr>


        </tbody>
    </table>
    <input type="submit" value="Submit" id="myBtn" >

</form>
</body>


</html>

Answer 1

也请约会。您可以使用日历对象并获得第二名。由此可以计算时差

在JSP中获得两次时间差

1 个答案: