Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Time counter issue

    Hi,

    I have added a time counter in below code. This is used to track the total time of a project. If a person is going on break, then they will apply the break that stops the time counter. However, once they come back from break and end the break, then time is counting at double speed (two seconds instead at one second). Is there any mistake that I done that made the time counter to increment by 2 seconds instead of 1 second after break.

    Any help please....


    Code:
    
    
    
    
    
    
    
    <html> 
    <head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <title>Strategy One - Tracker</title>
    
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
        <!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
    
    
    	
    	<!-- Script for Current time in text box -->
    <script type="text/javascript">
    function GetDate()
    {
    	var curDateTime = new Date()
    	var curHour = curDateTime.getHours()
    	var curMin = curDateTime.getMinutes()
    	if(curHour<10) curHour = "0" + curHour
      	if(curMin<10) curMin = "0" + curMin
    	
     
    	document.getElementById('start_time').value = curHour + ":" + curMin; 
    	var row = document.getElementById("end1_time");
    	var row1 = document.getElementById("start1_time");
            row.style.display = 'none';
    		 row1.style.display = 'none';
    
    }
    </script>
    <!-- End of Script for Current time in text box -->
    <!-- Script for Current time in text box -->
    <script type="text/javascript">
    function GetDate1()
    {
    	var curDateTime = new Date()
    	var curHour = curDateTime.getHours()
    	var curMin = curDateTime.getMinutes()
      	if(curHour<10) curHour = "0" + curHour
      	if(curMin<10) curMin = "0" + curMin
    	document.getElementById('end_time').value = curHour + ":" + curMin;
    
    var row = document.getElementById("start1_time");
    var row1 = document.getElementById("end1_time");
    var row2 = document.getElementById("start2_time");
    var row3 = document.getElementById("end2_time");
    		row.style.display = 'none';
    		row1.style.display = 'none';
    		row2.style.display = 'none';
    		row3.style.display = 'none';
    
    }
    </script>
    
    <script type="text/javascript">
    function GetDate2()
    {
    	var curDateTime = new Date()
    	var curHour = curDateTime.getHours()
    	var curMin = curDateTime.getMinutes()
      	if(curHour<10) curHour = "0" + curHour
      	if(curMin<10) curMin = "0" + curMin
    	document.getElementById('break_time_out').value = curHour + ":" + curMin ;
    	var row = document.getElementById("end2_time");
            row.style.display = '';
    }
    </script>
    <script type="text/javascript">
    function GetDate3()
    {
    	var curDateTime = new Date()
    	var curHour = curDateTime.getHours()
    	var curMin = curDateTime.getMinutes()
    
      	if(curHour<10) curHour = "0" + curHour
      	if(curMin<10) curMin = "0" + curMin
    
     
    	document.getElementById('break_time_in').value = curHour + ":" + curMin ;
    	
    }
    </script>
    
    
    
    <script type="text/javascript">
    function tout1()
    {
    var temp= document.tracker.start_time.value;
    
    if(temp.length>0)
    {
    var row1 = document.getElementById("end1_time");
    var row2 = document.getElementById("start2_time");
            row1.style.display = 'none';
            row2.style.display = 'none';
    
    }
    else
    {
    var row = document.getElementById("start1_time");
    var row1 = document.getElementById("end1_time");
    var row2 = document.getElementById("start2_time");
            row.style.display = 'none';
    		row1.style.display = 'none';
    		row2.style.display = 'none';
    }
    }
    
    function tout2()
    {
    var temp= document.tracker.start_time.value;
    
    if(temp.length>0)
    {
    var row = document.getElementById("start1_time");
    var row1 = document.getElementById("end1_time");
    var row2 = document.getElementById("start2_time");
    var row3 = document.getElementById("end2_time");
    		row.style.display = 'none';
    		row1.style.display = 'none';
    		row2.style.display = 'none';
    		row3.style.display = 'none';
    }
    else
    {
    var row = document.getElementById("start1_time");
    var row1 = document.getElementById("end1_time");
    var row2 = document.getElementById("start2_time");
    var row3 = document.getElementById("end2_time");
            row.style.display = '';
    		row1.style.display = 'none';
    		row2.style.display = 'none';
    		row3.style.display = 'none';
    }
    }
    
    
    </script> 
    
    <script type="text/javascript">
    var seconds = 0;
                var minutes = 0;
                var hours   = 0;
    	
                function zeroPad(time) {
                    var numZeropad = time + '';
                    while(numZeropad.length < 2) {
                        numZeropad = "0" + numZeropad;
                    }
                    return numZeropad;
                }
                
                function countSecs() {
                     var j=document.tracker.hide.value;
                     if(j=="yes")
                     {
                    seconds++;
    
                    if (seconds > 59) {
                        minutes++;
                        seconds = 0;
                    }
                    if (minutes > 59)
                    {
                        hours++
                        minutes = 0;
                                    
                    }
                    document.tracker.time_utilization.value = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds);
                     }
                     else
                         {}
                }
    
                function startTimer()
                {
                    
                    action = window.setInterval(countSecs,1000);
                    
                }
               
    function s()
    {
        
        document.tracker.hide.value ="yes";
        startTimer();
        
    }
    
    function p()
    {
        document.tracker.hide.value ="no";
       
        
    }
    </script>
    
    </head>
    <body>
    
                                                
    				<form name="tracker" method="post" action="processor.php" onsubmit="return formCheck(this);">
    				
    				
    
    				
    				<label class="formFieldQuestion">Start Time&nbsp;*</label><input readonly class=mainForm type=text name=start_time id=start_time size='30' value=''> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<input type="button" id="start1_time" style="width: 100px" Value="Start Time" onClick="javascript:GetDate();s();"></li>
    				
                  
    				<label class="formFieldQuestion">End Time&nbsp;*</label><input readonly class=mainForm type=text name=end_time id=end_time size='30' value='' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<input type="button" id="end1_time" style="width: 100px" Value="End Time" onClick="javascript:GetDate1(); p();" style='display: none'></li>	
    				
    				<input type="hidden" name="hide" />
    				
    			
    				<label class="formFieldQuestion">Break Time Out&nbsp;</label><input class=mainForm readonly type=text name=break_time_out id=break_time_out size='30' value='' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<input type="button" id="start2_time" style="width: 100px" Value="Start Time" onClick="javascript:GetDate2();tout1();p();"></li>		
    
    			
    				<label class="formFieldQuestion">Break Time In&nbsp;</label><input class=mainForm readonly type=text name=break_time_in id=break_time_in size='30' value=''>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<input type="button" id="end2_time" style="width: 100px" Value="End Time" onClick="javascript:GetDate3(); tout2();s();" style='display: none'></li>		
    				
    			
    				<label class="formFieldQuestion">Time Utilization</label><input class=mainForm type=text  name=time_utilization id=time_utilization size='30' value='' readonly></li>
    					<br /> <br />
    				
    					<input id="saveForm" class="mainForm" type="submit" value="Submit"  style="width : 100px"/>
    				
    				
    				</form>				
    											
                                                
        
    </body>
    
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Hi,

    it seems to be more complicated than it needs to be. Maybe you can adapt this:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    </head>
    
    <body>
    <input type="button" onclick="btnClick()" id="button" value ="start work">
    Time started: <input id="start_time">
    Time worked: <input id="worked"><br/>
    Last break started at: <input id="startbreak">
    Total break time: <input id="break"><br/>
    Breaks taken:
    <div id="breaks"></div>
    
    <script>
    var worksecs=0;
    var breaksecs=0;
    var clicks=1;
    break_timer=null;
    
    function btnClick(){ 
    clicks++
    if (clicks%2==0) { 
    document.getElementById("button").value="take break";
    GetDate();
    	} else { 
    document.getElementById("button").value="resume work";
    takeBreak();	
    	}
    }
    
    function GetDate() { 
    if (break_timer!=null){
    clearInterval(break_timer); 
    clearInterval(pause_timer);
    document.getElementById("breaks").innerHTML+=startbreak+ " ("+time_onpause+")<br/>";
    } else {
    	start = new Date().toTimeString().substring(0,5);
    	document.getElementById('start_time').value = start; 
    	}
    work_timer=setInterval(working,1000);
    }
    
    function working() {
    worksecs+=1000;
    var d = new Date("Fri, 31 Dec 1999 00:00:00 GMT");
    d.setUTCMilliseconds(worksecs);
    time_worked=d.toUTCString().substring(17,25);
    document.getElementById('worked').value = time_worked;
    }
    
    function takeBreak() {
    	startbreak = new Date().toTimeString().substring(0,5);
    	document.getElementById('startbreak').value = startbreak;
    clearInterval(work_timer);
    break_timer=setInterval(breaking,1000);
    pausesecs=0;
    pause_timer=setInterval(pause,1000);
    }
    
    function breaking() {
    breaksecs+=1000;
    var e = new Date("Fri, 31 Dec 1999 00:00:00 GMT");
    e.setUTCMilliseconds(breaksecs);
    time_onbreak=e.toUTCString().substring(17,25);
    document.getElementById('break').value = time_onbreak;
    }
    
    function pause() {
    pausesecs+=1000;
    var f = new Date("Fri, 31 Dec 1999 00:00:00 GMT");
    f.setUTCMilliseconds(pausesecs);
    time_onpause=f.toUTCString().substring(17,25);
    }
    </script>
    
    </body>
    </html>
    Last edited by xelawho; 12-29-2011 at 08:02 PM.

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question

    Thanks for your reply. However, the same issue is there in you code too. Once I click on resume work and take break couple of times, then the counter will speed up(two seconds instead of one second). Same issue.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I really don't know... I just tested it, taking 10 breaks in the space of two minutes (and thereby replicating my normal workday) and I could see no difference in the timer speed

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    There seems to be a browser issue here. I get the same speed-up in IE9. But it works fine in Chrome.

    The trouble is that you are using startbreak both as the id of an element and the name of a Javascript variable, which IE does not like. Fix that and it works.
    Last edited by Philip M; 12-30-2011 at 03:53 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    xelawho (12-30-2011)

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I really don't know... I just tested it, taking 10 breaks in the space of two minutes (and thereby replicating my normal workday) and I could see no difference in the timer speed


    Please try it in Internet Explorer and check. I am using IE 8

  • #7
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Philip M,

    You mentioned that "startbreak both as the id of an element and the name of a Javascript variable". However, I didn't using any ID with name startbreak. Could you please mention the exact line if you found any mistake in my code? Thank you.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    Philip was referring to Xelawho's code, not yours.

    Xelawho's code indeed fails in MSIE, any version.

    But it's easily fixed: Just add the line in red below:
    Code:
    <script>
    var worksecs=0;
    var breaksecs=0;
    var clicks=1;
    break_timer=null;
    var startbreak = 0; // ADD THIS!
    
    ... rest of code same ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •