date - Continue a clicking clock when user chooses new time in JavaScript -
i've run problem whilst building clock using vanilla javascript. i'm getting current time fine user able set own time. time user wants grabbed 3 input fields , passed in optional paramters(updateh,updatem,updates
) below function:
function updatetime(updateh,updatem,updates){ updateh = updateh || false; updatem = updatem || false; updates = updates || false; today = new date(); if (updateh != false || updatem != false || updates != false) { today.sethours(updateh); today.setminutes(updatem); today.setseconds(updates); } h = addleadingzeroes(today.gethours()); //today's time (hours) m = addleadingzeroes(today.getminutes()); //today's time (minutes) s = addleadingzeroes(today.getseconds()); //today's time (seconds) day = getday().touppercase(); //today's date (day) date = today.getadmante(); //today's date (date) month = getmonth().touppercase(); //today's date (month) time24h = h + ":" + m + ":" + s; drawwatch(); settimeout(updatetime, 1000); } updatetime();
this function ran every second (1000ms), therefore clock resets current time after 1 second, making users choice time dissapear.
is there anyway update time user passed in time , continue clock ticking using new time? e.g:
the clock reads '12:00:00', user enters time '13:30:00', clock continues ticking '13:30:01....13:30:02....13:30:03...etc'.
many help!
when user sets time, calculate difference between time , current time, store value. each time want redraw watch new current time, subtract stored difference , redraw watch.
personally create new prototype called "watch" , things want within object.
/* create "watch" prototype */ function watch(hours, minutes, seconds, drawinterval){ var t = this; this.offset = 0; this.drawinterval = drawinterval || 1000; this.settime = function(hours, minutes, seconds){ var = new date().gettime(); var theirtime = new date(); if(hours) theirtime.sethours(hours); if(minutes) theirtime.setminutes(minutes); if(seconds) theirtime.setseconds(seconds); this.offset = - theirtime.gettime(); }; this.gettime = function(){ var d = new date( new date() - this.offset ); return d.gethours()+":"+d.getminutes()+":"+d.getseconds(); }; this.draw = function(elementid){ function draw(){ document.getelementbyid(elementid).innerhtml = t.gettime(); settimeout(draw, t.drawinterval); }; draw(); }; this.settime(hours, minutes, seconds); // initialize } /* create instance of "watch" prototype */ var w = new watch(); /* draw watch dom */ w.draw("watch"); /* set users time */ w.settime(12,45,30); // 12:45:30
<div id='watch'></div>
Comments
Post a Comment