The Task Clock provides stopwatch that determines how long it takes to complete a task.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Task Clock</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="javascript" type="text/javascript"> // // Task Clock // Some Rights Reserved // webdeveloper.50webs.com // function clearLog() { if (confirm('Are you sure you want to erase the log?')) { document.getElementById('taskInfo').innerHTML = ""; document.getElementById('taskRecord').innerHTML = ""; document.getElementById("clockStart").disabled = false; document.getElementById("clockEnd").disabled = true; } } var setToRecord = false; function toggleRecordLog() { if (setToRecord === false) { document.getElementById("logRecord").value = "Running Log [ON]"; setToRecord = true; return; } if (setToRecord === true) { document.getElementById("logRecord").value = "Running Log [OFF]"; setToRecord = false; alert("The system will no longer keep a record of tasks. The log will be erased if you restart the clock."); return; } } function chkDigits(inputNum, checkSum) { var calc = inputNum.toString(); if (calc.length < checkSum) { for (i=calc.length;i<checkSum;i++) { calc = "0" + calc; } return calc; } else { return calc; } } function getDayPeriod(inputTime, outputHour) { var calc = inputTime.toString(); var period = ""; if (calc < 12) { period = "AM" } if (calc > 12) { period = "PM" calc = calc-12; } if (outputHour === false) { return calc; } if (outputHour === true) { return period; } } function getCurrentTime() { var time= new Date() var timeMin = time.getMinutes(); var timeHour = time.getHours(); var timePeriod = ""; var timeDay = time.getDate(); var timeMonth = time.getMonth() +1; var timeYear = time.getFullYear(); timeDay = chkDigits(timeDay, 2); timeMonth = chkDigits(timeMonth, 2); timeMin = chkDigits(timeMin, 2); timeHour = chkDigits(timeHour, 2); timePeriod = getDayPeriod(timeHour, true); return timeMonth+ "/" +timeDay+ "/" +timeYear+ " " +timeHour+ ":" +timeMin+ " " +timePeriod; } function getDuration(start, end) { var day1 = start.slice(3, 5); var month1 = start.slice(0, 2); var hour1 = start.slice(11, 13); var min1 = start.slice(14, 16); var period1 = start.slice(17, 19); var day2 = end.slice(3, 5); var month2 = end.slice(0, 2); var hour2 = end.slice(11, 13); var min2 = end.slice(14, 16); var period2 = end.slice(17, 19); var agoMinute = Math.abs(parseInt(min2) - parseInt(min1)); var agoHour = Math.abs(parseInt(hour2) - parseInt(hour1)); var agoDay = Math.abs(parseInt(day2) - parseInt(day1)); var agoMonth = Math.abs(parseInt(month2) - parseInt(month1)); var calendar = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31", 12); agoMonth if (day2 < day1) { agoMonth = agoMonth -1; agoDay = calendar[month1] - day1 + day2; } return agoMonth + " Months<br>" +agoDay + " Days<br>" +agoHour+ " Hours<br>" +agoMinute+ " Minutes\n"; } var timeTaskStart = ""; function clockControl(state){ if (state === true) { if (setToRecord === true) { document.getElementById("taskRecord").innerHTML += "=== END TASK ===<br>"; document.getElementById("taskRecord").innerHTML += document.getElementById("taskInfo").innerHTML; } else { document.getElementById("taskRecord").innerHTML = ""; } document.getElementById("clockStart").disabled = true; document.getElementById("clockEnd").disabled = false; document.getElementById("taskInfo").innerHTML = "<u>Started</u><br>" +getCurrentTime()+ "<br><br>"; timeTaskStart = getCurrentTime(); } if (state === false) { document.getElementById("clockStart").disabled = false; document.getElementById("clockEnd").disabled = true; document.getElementById("taskInfo").innerHTML += "<u>Ended</u><br>" +getCurrentTime()+ "<br><br>"; document.getElementById("taskInfo").innerHTML += "<u>Duration</u><br>" +getDuration(timeTaskStart, getCurrentTime())+ "<br><br>"; } } function saveLog() { var time= new Date() var timeMin = time.getMinutes(); var timeHour = time.getHours(); var timeDay = time.getDate(); var timeMonth = time.getMonth() +1; var timeYear = time.getFullYear(); pr=window.open("about:blank","preview","scrollbars=0,resizeable=1,menubar=1,status=0,width=1,height=1,left=0,top=0"); pr.document.write("Task Clock<br>Some Rights Reserved<br><a href='http://webdeveloper.50webs.com'>http://webdeveloper.50webs.com</a><hr>"); pr.document.write(document.getElementById('taskInfo').innerHTML); pr.document.write(document.getElementById('taskRecord').innerHTML); pr.document.execCommand('SaveAs',false,'task_clock_' +timeYear+ '_' +timeMonth+ '_' +timeDay+ '.htm'); } function clockOverride() { timeTaskStart = prompt("Set Start Time \(Format: MM/DD/YYYY HH:MM\)", getCurrentTime()) document.getElementById("taskInfo").innerHTML += "<font color='red'><u>Started (by override)</u><br>" +timeTaskStart+ "</font><br><br>"; } </script> </head> <body> <form> <fieldset style="width:160px;display:block;margin-bottom:6px;"> <legend>Task Control</legend> <input type="button" value="Start" id="clockStart" style="width:75px;" onclick="clockControl(true)" /> <input type="button" value="End" id="clockEnd" style="width:75px;" onclick="clockControl(false)" /> <! Advanced Features ==================> <div style="display:none;"> <input type="button" value="Set" style="width:75px;" onclick="clockOverride();" /> <input type="button" value="Lap" style="width:75px;" onclick="clockControl(false)" /> </div> </fieldset> <fieldset style="width:160px;display:block;margin-bottom:6px;"> <legend>Task Log</legend> <div id="taskInfo"><br /><br /><br /></div> <div id="taskRecord"></div> </fieldset> <fieldset style="width:160px;display:block;margin-bottom:6px;"> <input type="button" value="Clear Log" id="logClear" style="width:150px;" onclick="clearLog();" /> <input type="button" value="Save Log" id="logSave" style="width:150px;" onclick="saveLog();" /> <input type="button" value="Running Log [OFF]" id="logRecord" style="width:150px;" onclick="toggleRecordLog();" /> </fieldset> </form> <script language="javascript"> document.getElementById("clockStart").disabled = false; document.getElementById("clockEnd").disabled = true; if (navigator.appName != "Microsoft Internet Explorer") { document.getElementById('logSave').style.display = 'none'; } </script> </body> </html>
