...

View Full Version : Time counter issue



naveendk.55
12-29-2011, 10:41 AM
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....












<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>

xelawho
12-29-2011, 05:11 PM
Hi,

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



<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>

naveendk.55
12-30-2011, 10:15 AM
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.

xelawho
12-30-2011, 03:11 PM
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

Philip M
12-30-2011, 03:36 PM
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.

naveendk.55
01-02-2012, 10:44 AM
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

naveendk.55
01-02-2012, 10:46 AM
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.

Old Pedant
01-05-2012, 07:26 AM
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:


<script>
var worksecs=0;
var breaksecs=0;
var clicks=1;
break_timer=null;
var startbreak = 0; // ADD THIS!

... rest of code same ...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum