我在这里附加了代码。我使用JavaScript编写秒表，但是我需要服务器端代码，只要刷新页面后计时器也处于运行状态，我就可以告诉任何人如何在项目中实现并在服务器端启动秒表刷新显示为零的页面后，我没有使计时器处于运行状态。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@page language="java"%>
<%@page import="java.sql.*"%>
<%@ page import="java.util.TimeZone"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@ include file="Navbar.jsp"%>
<%@ include file="defaultscreen.jsp" %>
<%@ include file="usernav.jsp"%>
<%-- <%@ include file="examples/twenty-four-hour-clock.jsp"%>
--%> <%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="java.util.Date"%>
<%@page import="java.text.ParseException"%>
<%@ page import=" java.text.DateFormat"%>
<%@ page import=" java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Assignment</title>
<script>
function displayTime() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
var date = yyyy+'/'+mm+'/'+dd;
var hours = today.getHours() < 10 ? "0" + today.getHours() : today.getHours();
var minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes();
var seconds = today.getSeconds() < 10 ? "0" + today.getSeconds() : today.getSeconds();
time1 = date + " "+ hours + ":" + minutes;
time = date + " "+ hours + ":" + minutes + ":" + seconds;
if (document.getElementById) {
document.getElementById('Todaytimer').innerHTML = time;
document.getElementById('start_time').value = time1;
document.getElementById('pause_time').value = time1;
} else if (document.layers) {
document.layers.timer.document.write(time);
document.layers.timer.document.close();
}
setTimeout("displayTime()", 1000);
}
window.onload = displayTime;
</script>
<link rel="stylesheet" href="css/flipclock.css">
</head>
<style>
#user {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
height: 10%;
}
#user1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 21%;
}
#user td,#user th {
border: 2px solid transparent;
padding: 4px;
top:220px;
}
#user tr:nth-child(even) {
background-color: #ffc680;
}
#user th {
padding-top: -10px;
padding-bottom: -10px;
text-align: center;
background-color: #00b0b3;
color: black;
top:220px;
}
.stopwatch .controls {
font-size: 12px;
}
/* I'd rather stick to CSS rather than JS for styling */
.stopwatch .controls button{
padding: 5px 15px;
background :white;
border: 3px solid #FFF0;
border-radius: 5px
}
.stopwatch .time {
font-size: 185%;
}
.clock{
float:right;
right:-1045px;
top:-77px;
position:relative;
font-size:10pt;
}
.start:hover{
opacity: 0.3;
filter: alpha(opacity=40);
text-shadow: -2.4px -2.2px 0.933px green;
}
.start {
opacity:2;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.pause:hover{
opacity: 0.3;
filter: alpha(opacity=40);
text-shadow: -2.4px -2.2px 0.933px green;
}
.pause {
opacity: 2.0;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.resume:hover{
opacity: 0.3;
filter: alpha(opacity=40);
text-shadow: -2.4px -2.2px 0.933px green;
}
.resume {
opacity: 2.0;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.stop:hover{
opacity: 0.3;
filter: alpha(opacity=40);
text-shadow: -2.4px -2.2px 0.933px green;
}
.stop {
opacity: 2.0;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#task {
opacity: 0.2;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
#task:hover {
opacity: 2.0;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.well {
min-height: 30px;
padding: 19px;
margin-bottom: 25px;
background-image: url("./img/l23.jpeg");
border: 5px solid #4f6d95cc;
border-radius: 7px;
-webkit-box-shadow: inset 0 1px 1px rgba(10, 10, 10, 1.05);
box-shadow: inset 0 1px 1px rgba(10, 10, 10, .05);
}
.form-control::-moz-placeholder {
color: #141212;
opacity: 1;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #0f0e0e;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
</style>
<body>
<div class="clock" ></div>
<input id="start_time" type="hidden" name="start_time" value="">
<input id="pause_time" type="hidden" name="endtime" value="" >
<span id="Todaytimer" style="float:right; display:none; left:-25px; top:-20px;position:relative; font-size:50pt; color: black; "></span></body>
<%
String username = "";
String id="";
String mail="";
String id2 = "";
String email = "";
HttpSession session1 = request.getSession(false);
if(request.getSession().getAttribute("username")== null && request.getSession().getAttribute("id")== null ) {
response.sendRedirect("Home.jsp");
}
else if(session1!=null){
id2 = (String) session.getAttribute("id");
System.out.print(id2);
username = (String) session.getAttribute("username");
email = (String) session.getAttribute("email");
HttpSession session3 = request.getSession();
/* session3.setAttribute("email", email); */
session3.setAttribute("email", email);
session3.setAttribute("username", username);
/* out.print(id2);
out.print(username);
out.print(email); */
}
%>
<%
String driverName = "com.mysql.jdbc.Driver";
String connectionUrl = "jdbc:mysql://192.168.16.64:3306/timesheet";
String userId = "allusers";
String password = "whdb@123";
try {
Class.forName(driverName);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
Connection connection = null;
Statement statement = null;
ResultSet resultSet = null;
try
{
Class.forName("com.mysql.jdbc.Driver");
}
catch(Exception exe){}
int id1 = 0;
Connection con = DriverManager.getConnection(
"jdbc:mysql://192.168.16.64:3306/timesheet", "allusers",
"whdb@123");
Statement stmt = con.createStatement(
ResultSet.TYPE_SCROLL_INSENSITIVE,
ResultSet.CONCUR_READ_ONLY);
ResultSet rs = stmt
.executeQuery("SELECT tr.*,us1.username,pro.customer, pro.projectname, tsk.name,buttonstatus1 FROM ts_transaction tr JOIN ts_user us1 JOIN ts_project pro ON pro.id=tr.project_id JOIN ts_task tsk ON tsk.id=tr.task_id where tr.user_id=us1.id and us1.id='"+id2+"' ");
rs.last();
int count = rs.getRow();
rs.beforeFirst();
%>
<div class="container" style="margin-top: 40px">
<br>
<br>
<h2 align="center">
<font style="color:white;"><strong><u>User Assignment</u></strong></font>
</h2>
</div>
<%
if (count > 0) {
%>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="well">
<table id="user" align="center" cellpadding="10" cellspacing="10"
border="3">
<tr>
<tr bgcolor="#DEB887">
<!-- <th align="center"><b>S.NO</b></th>
--> <th align="center"><b>User Name</b></th>
<th align="center"><b>Customer Name</b></th>
<th align="center"><b>Project Name</b></th>
<th align="center"><b>Task Name</b></th>
<th align="center"><b>Actual Start-Time</b></th>
<th align="center"><b>Actual EndTime</b></th>
<th align="center"><b>Total Duration</b></th>
<th align="center"><b>User Operations</b></th>
<th align="center"><b>Task Status</b></th>
</tr>
<%
while (rs.next())
{
id = rs.getString("id");
id1 = Integer.parseInt(id);
String user_id = rs.getString("username");
String customer_id = rs.getString("customer");
String project_id = rs.getString("projectname");
String task_id = rs.getString("name");
String start_time = rs.getString("start_time");
String end_time = rs.getString("end_time");
long difference = 0;
long diffMinutes = 0;
long diffHours = 0;
Date date1 = null;
Date date2 = null;
String date4 = "";
try
{
String[] starttime = start_time.split(" ");
String s6 = starttime[1];//starttime
String[] endtime = end_time.split(" ");
String s7 = endtime[1];//endtime
SimpleDateFormat format = new SimpleDateFormat("HH:mm");
format.setTimeZone(TimeZone.getTimeZone("UTC"));
date1 = format.parse(s6);
date2 = format.parse(s7);
String stime1 = format.format(date1);
String stime2 = format.format(date2);
Date date5 = format.parse(stime1);
Date date6 = format.parse(stime2);
//String date4=format.format(date2);
difference = date6.getTime() - date5.getTime();
date4 = format.format(new Date(difference));
}
catch (ParseException e)
{
System.out.println(e);
}
finally
{
}
String status = rs.getString("status");
int i = Integer.parseInt(status);
Integer buttonstatus = rs.getInt("buttonstatus1");
// b = Integer.parseInt(buttonstatus);
System.out.println(buttonstatus+"button value from database");
%>
<tr>
<%-- <td align="center" width="1%"><b><font color='green'><strong><%=n%></strong></font></b></td>
--%> <td align="center" width="1%"><b><font color='black'><strong><%=user_id%></strong></font></b></td>
<td align="center" width="2%"><b><font color='black'><strong><%=customer_id%></strong></font></b></td>
<td align="center"><b><font color='black'><strong><%=project_id%></strong></font></b></td>
<td align="center"><b><font color='black'><strong><%=task_id%></strong></font></b></td>
<td align="center" width="12%"><b><font color='black'><strong><%=start_time%></strong></font></b></td>
<td align="center" width="12%"><b><font color='black'><strong><%=end_time%></strong></font></b></td>
<td align="center" width="14%"><b><font color='black'><strong><%=date4%></strong></font></b></td>
<%if(buttonstatus==4){%><td bgcolor="" align="center" width="35%" ><b>
<font color='red'>
<strong>TASK FINISHED</strong></font></b>
<%} else{%>
<td align="center" width="35%"><b>
<div class="stopwatch" >
<div class="time">
<span class="hours"></span> :
<span class="minutes"></span> :
<span class="seconds"></span>
</div>
<div class="controls">
<%
}
%>
<input type="hidden" id="trans_id" value = "<%=id1%>" >
<% if( (buttonstatus==1) || (buttonstatus==2) || (buttonstatus==3) || (buttonstatus==4) )
{
%>
<%-- <font color="white"><button disabled value = "<%=id1%>" style="border-radius:5px; background:#59878a66; border:560px;" >Start </button></font>
--%>
<%
}
else
{
%>
<font color="white"><button id="start<%=id1%>" class="start" value = "<%=id1%>" style="border-radius:5px; background:#0acb6b; border:560px;" title="Start Your Task!" >START</button></font>
<%
}
%>
<% if( (buttonstatus==0) || (buttonstatus==null) || (buttonstatus==2) || (buttonstatus==4) )
{
%>
<%-- <font color="white"><button id="pause<%=id1%>" disabled style="border-radius:5px; background:#59878a66; border:560px;" >Pause</button></font>
--%>
<%
}
else
{
%> <font color="white"><button id="pause<%=id1%>" class="pause" value = "<%=id1%>" style="border-radius:5px; background:red; border:560px;" title="Hold Your Task">PAUSE</button></font>
<%
}
%>
<% if( (buttonstatus==0) || (buttonstatus==null) || (buttonstatus==1) || (buttonstatus==3) || (buttonstatus==4) )
{%>
<%-- <font color="white"><button id="resume<%=id1%>" disabled style="border-radius:5px; background:#59878a66; border:560px;">Resume</button></font>
--%>
<%
}
else
{
%> <font color="white"><button id="resume<%=id1%>" class="resume" value = "<%=id1%>" style="border-radius:5px; background:#1fad9a; border:560px;" title="Continue.." >RESUME</button></font>
<%
}
%>
<% if( (buttonstatus==0) || (buttonstatus==null) || (buttonstatus==2) || (buttonstatus==4) )
{%>
<%-- <font color="white"> <button disabled id="stop2<%=id1%>" style="border-radius:5px; background:#59878a66; border:560px;" >Stop</button></font>
--%>
<%
}
else
{
%> <font color="white"> <button class="stop" id="stop2<%=id1%>" value = "<%=id1%>" style="border-radius:5px; background:red; border:560px;" title="Finish"> STOP</button></font>
<%
}
%>
</div>
</b></td>
<% if(buttonstatus==0)
{%>
<td bgcolor="#edff93" align="center" width="16%"><b><font color='BLACK'>
<strong>YET TO START..</strong></font></b></td>
<%}%>
<% if(buttonstatus==1)
{%>
<td bgcolor="#0ae91c" align="center" width="16%"><b><font color='WHITE'>
<strong>TASK IN PROGRESS</strong></font></b></td>
<%}%>
<%if(buttonstatus==2){%>
<td bgcolor="#ff8787" align="center" width="16%"><b><font color='WHITE'>
<strong>TASK HOLDED!</strong></font></b></td>
<%}%>
<% if(buttonstatus==3)
{%>
<td bgcolor="#89ff95" align="center" width="16%"><b><font color='BLACK'>
<strong>TASK CONTINUED...</strong></font></b></td>
<%}%>
<% if(buttonstatus==4)
{%>
<td bgcolor="" align="center" width="16%" id="task">
</td>
<%}%>
</tr>
<%if( (buttonstatus==1) || (buttonstatus==3))
{
id1 = Integer.parseInt(id);
Statement stmt1 = con.createStatement();
String sqlll="select * from ts_transaction tr where buttonstatus1 = '"+buttonstatus+"' and tr.id = '"+id1+"' ";
System.out.println(sqlll);
ResultSet rs1 = stmt1.executeQuery(sqlll);
}
/*sql = "SELECT tr.*,usr.username, pro.customer ,pro.projectname,tsk.name,tr.start_time,tr.end_time FROM ts_transaction tr
JOIN ts_project pro ON pro.id=tr.project_id
JOIN ts_task tsk ON tsk.id=tr.task_id
JOIN ts_user usr ON usr.id=tr.user_id WHERE tr.id!=0
"+dbfrom+" "+dbto+" "+dbusername+" "+dbcustomer+" "+dbprojectname+" "+dbname+" ";
*/
%>
<%}}%> <%-- while loop end --%>
</table>
</div>
</div>
</div>
</div>
<script
src="js/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.js"></script>
<script>
$(function () {
$('.stopwatch').each(function () {
var element = $(this);
var hoursElement = element.find('.hours');
var minutesElement = element.find('.minutes');
var secondsElement = element.find('.seconds');
var hours, minutes, seconds, timer;
function prependZero(time, length)
{
time = '' + (time | 0);
///alert(time);
while (time.length < length) time = '0' + time;
return time;
}
function setStopwatch(hours, minutes, seconds)
{
hoursElement.text(prependZero(hours, 2));
minutesElement.text(prependZero(minutes, 2));
secondsElement.text(prependZero(seconds, 2));
}
running = false;
hours = minutes = seconds = milliseconds = 0;
setStopwatch(hours, minutes, seconds);
function runTimer()
{
var start_Time = Date.now();
var prevHours = hours;
var prevMinutes = minutes;
var prevSeconds = seconds;
timer = setInterval(function ()
{
var timeElapsed = Date.now() - start_Time;
hours = (timeElapsed / 3600000) +prevHours;
minutes = ( (timeElapsed / 60000) + prevMinutes) % 60;
seconds = ( (timeElapsed / 1000) + prevSeconds) % 60;
setStopwatch(hours, minutes, seconds);
}, 25);
}
element.find('.start').on('click', function () ///Start Function
{
var c=this.value;
var trans_id = c;
var start_time = $('#start_time').val();
var buttonstatus = 1;
$.ajax({
type : "POST",
url: "userassigncheckdb.jsp?current_starttime="
+start_time +
"&&trans_id="
+trans_id+
"&&buttonstatus="
+buttonstatus,
success : function(data)
{
//location.reload();
window.location = "timesheet.jsp";
}
});
running = true;
runTimer();
hours = minutes = seconds = milliseconds = 0;
setStopwatch(hours, minutes, seconds);
});
element.find('.pause').on('click', function () ///Pause function
{
var c=this.value;
var pause_time = $('#pause_time').val();
var trans_id =c;
var buttonstatus = 2;
$.ajax({
type : "POST",
url: "userassigncheckdb.jsp?current_stoptime=" +pause_time + "&&trans_id=" +trans_id+"&&buttonstatus="+buttonstatus,
success : function(data)
{
location.reload();
window.location = "timesheet.jsp";
}
});
running = false;
clearTimeout(timer);
});
element.find('.resume').on('click', function () ///Resume Function
{
var c=this.value;
var trans_id = c;``
var start_time = $('#start_time').val();
var buttonstatus = 3;
$.ajax({
type : "POST",
url: "userassigncheckdb.jsp?current_starttime1=" +start_time + "&&trans_id=" +trans_id+"&&buttonstatus="+buttonstatus,
success : function(data)
{
location.reload();
window.location = "timesheet.jsp";
}
});
running = true;
runTimer();
hours = minutes = seconds = milliseconds = 0;
setStopwatch(hours, minutes, seconds);
});
element.find('.stop').on('click', function () //stopfunction
{
var c=this.value;
var trans_id =c;
var pause_time = $('#pause_time').val();
var buttonstatus = 4;
$.ajax({
type : "POST",
url: "userassigncheckdb.jsp?current_stoptime2=" + pause_time + "&&trans_id=" +trans_id+"&&buttonstatus="+buttonstatus+" &&id2="+<%=id2%>,
success : function(data)
{
location.reload();
window.location = "timesheet.jsp";
}
});
running = false;
clearTimeout(timer);
});
});
});
</script>
<script src="js/jquery4.min.js"></script>
<script src="js/flipclock.js"></script>
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock'
});
});
</script>
答案 0 :(得分：-2)
我使用此库在服务器端创建秒表功能。
导入org.apache.commons.lang.time.StopWatch;
StopWatch stopWatch = new StopWatch();
stopWatch.start();
myCustomFunction()
stopWatch.stop();
System.out.println("Time Taken = "+ stopWatch.getTime()+ "MilliSeconds");
这是您要求的jsp答案
<%@ page import="org.apache.commons.lang.time.StopWatch" %>
<html>
<head>
<title>Basic StopWatch</title>
</head>
<body>
<%
StopWatch stopWatch = new StopWatch();
stopWatch.start();
out.println("Stop Watch Started, sleeping for 2000ms ");
Thread.sleep(2000);
stopWatch.stop();
out.println("<br/>Time Taken = "+ stopWatch.getTime()+ " MilliSeconds");
out.println("<h1>Hello World!</h1>");
%>
</body>
</html>