Stopwatch issue

bharath krish
bharath krish used Ask the Experts™
on
Anyone knew...i had an issue .... if i have to save the timer to the server, i'll need the JavaScript to animate and increment the timer.
Have the JavaScript periodically send the value of the timer back to the server for saving so that the user can logout and login back in from anywhere and continue their timers..how????.please explain??
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Please can you explain your question a bit more.

What are the timers for?

Why not just store the login time for the user and then simply update the timer with that value everytime they login - timer is then relative to the login time.

I don't understand why you need to keep sending values back to the server.
bharath krishSoftware Developer

Author

Commented:
i need server side stopwatch 00:00:00 in java to be displayed on web page(  JSP  )...any idea??

if i run stopwatch on javascript ...when refreshing..it comes to original state as 00:00:00. should not use localstorage or anything on client side
Only server is possible to controll stopwatch.....here is the code...
bharath krishSoftware Developer

Author

Commented:
Imagine if user starts the task and the timer is running from 00:00:00.......then he logouts without stoping the timer...........after two days he comes and signed in different with System.....what happens is...Local Storage could not been used here.....it stores the value for that system only
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

bharath krishSoftware Developer

Author

Commented:
<%@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">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Assignment</title>

		


<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);
		
		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%>" onclick="start" 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);
	
}

%>  
<%}
		}%>  <%-- 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>  
////Stopwatch script starts here


$('.stopwatch').each(function () {

	//alert('dfdf');
        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);
            
            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 =0;
        minutes = 0;
        seconds =0;
        milliseconds = 0;
        setStopwatch(hours, minutes, seconds); 
 
        //runTimer(hours,minutes,seconds);
           function runTimer() 
        {		
        	  
        	 // alert("run1");
 //alert(parseFloat(hours1));
             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;
// alert()
               setStopwatch(hours, minutes, seconds);
             }, 25);
        }   

 element.find('.start').on('click', function () ///Start Function 
        		{        
		
		///alert('fsdfsd');
        	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;
          run();
          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>
 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);
		
	 
		
		
		//runTimer();
		
		 ///$( ".start" ).trigger("click");
	}
	window.onload = displayTime;
	
	/* 	function runTimer() 
	    {
			alert("run1");
	         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);
	    
    } */
</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>
	
</body>
</html></html>

Open in new window

Screenshot-2018-7-6-TimeSheet.png
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I still don't see what the problem is.

On the server you store the START TIME

When the page is loaded you send the START TIME to the page. The page then initialises its counter based on the START TIME - so your progressive time is relative to the start time i.e.

var start_time = VALEU_FROM_SERVER_HERE;

// pseudo code to illustrate the point
var seconds = current_time - start_time;

Open in new window


That is if you are doing a progressive counter - if you are doing a countdown timer then you initialise the page with the END TIME and then work out seconds from now until the END TIME.
bharath krishSoftware Developer

Author

Commented:
can u explain with my code comparision??


$('.stopwatch').each(function () {

	//alert('dfdf');
        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);
            
            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 =0;
        minutes = 0;
        seconds =0;
        milliseconds = 0;
        setStopwatch(hours, minutes, seconds); 
 
        //runTimer(hours,minutes,seconds);
           function runTimer() 
        {		
        	  
        	 // alert("run1");
 //alert(parseFloat(hours1));
             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;
// alert()
               setStopwatch(hours, minutes, seconds);
             }, 25);
        }   

 element.find('.start').on('click', function () ///Start Function 
        		{        
		
		///alert('fsdfsd');
        	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;
          run();
          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>
 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);
		
	 
		
		
		//runTimer();
		
		 ///$( ".start" ).trigger("click");
	}
	window.onload = displayTime;
	
	/* 	function runTimer() 
	    {
			alert("run1");
	         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);
	    
    } */

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Firstly - are you doing a progressive timer i.e. a count UP from a given time
Or
A countdown timer TO a given time
bharath krishSoftware Developer

Author

Commented:
Thanks     Mr.Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial