【发布时间】：2014-05-06 11:54:12
【问题描述】：
在我的编码中，我使用 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中，而提交这些值将被传送到servlet，我想计算两个数字之间的差异，所以请任何人帮助我
我正在努力计算时差一个多星期。
<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>
【问题讨论】：
-
使用 Joda Time 之类的库可以让您的工作更轻松。
-
@EvanKnowles 已更新源代码
-
使用joda时间库...这是最简单易懂的...
-
你的代码有什么问题？没有按您的预期工作？
-
@NavaneethaKrishnan 为什么您没有接受答案，也没有对您的旧问题给出任何 cmets/响应？如果您不给予任何回应，那么没有人会给您答案，您的问题将被否决，稍后关闭，最后您将被禁止在 SO 中提出新问题。避免所有这些都通过一次SO tour。
标签： java jquery jsp servlets servlet-3.0