html - Timer (HH:MM:SS) with javascript for online task -

i want implement simple timer (hh:mm:ss) calculating time spend user doing online task, timer should start when page loaded , stop when user press button submit result of task. hh: hours mm: minutes ss: seconds

code maintaining time :-

$(document).ready(function() {   updateclock();    setinterval('updateclock()', 250 ); });   function updateclock ( ) {   //set current time variables   var currenttime = new date ( );   var currenthours = currenttime.gethours();   var currentminutes = currenttime.getminutes();   var currentseconds = currenttime.getseconds();   var currentmiliseconds = currenttime.getmilliseconds();   var rounded = currentseconds + (currentmiliseconds / maxmilisecs);    //get color percentages based off time.   //percentage of 255 color   //percentage of 100 position   rednum = (math.round(255 * ((currenthours) / maxnumhours)));      rednum100 = (math.round(100 * ((currenthours) / maxnumhours)));   greennum = (math.round(255 * ((currentminutes) / maxnummins)));   greennum100 = (math.round(100 * ((currentminutes) / maxnummins)));   bluenum = (math.round(255 * ((rounded) / maxnumsecs)));   bluenum100 = (math.round(100 * ((rounded) / maxnumsecs)));    //convert hex   redhex = hexifywithzerolead(rednum);   greenhex = hexifywithzerolead(greennum);   bluehex = hexifywithzerolead(bluenum);    //create hex strings   var hex = "#" + redhex + greenhex + bluehex;      //total hex value   var fullredhex = "#"+redhex+"0000";               //red hex   var fullgreenhex = "#00"+greenhex+"00";           //green hex   var fullbluehex = "#0000"+bluehex;                //blue hex    //text indvidual color sliders   jquery("#red_display").html(redhex);   jquery("#green_display").html(greenhex);   jquery("#blue_display").html(bluehex);    //position , animate color sliders   leftpos = (rednum100 * 0.01 * 575) + 25;   jquery('#red_display').animate({left: leftpos}, 200);   jquery('#red_display').css('background-color',fullredhex);    leftpos = (greennum100 * 0.01 * 575) + 25;   jquery('#green_display').animate({left: leftpos}, 200);   jquery('#green_display').css('background-color',fullgreenhex);    leftpos = (bluenum100 * 0.01 * 575) + 25;   jquery('#blue_display').animate({left: leftpos}, 200);   jquery('#blue_display').css('background-color',fullbluehex);     //zerolead time display   currenthours = ( currenthours < 10 ? "0" : "" ) + currenthours;   currentminutes = ( currentminutes < 10 ? "0" : "" ) + currentminutes;   currentseconds = ( currentseconds < 10 ? "0" : "" ) + currentseconds;    //append values   jquery("#clock").html("<span id='hours'>"+ currenthours + "</span>:<span id='minutes'>" + currentminutes + "</span>:<span id='seconds'>" + currentseconds + '</span>');   jquery("#hex").html(hex);    //change background of page current hex color   //jquery('.skin-blue .logo').css('background-color',hex);   //jquery('.skin-blue .navbar').css('background-color',hex);   //jquery('.skin-blue .sidebar a').css('color',hex); }  

here div element

<div id="clock" style="color: white;width"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></div>