javascript - How do I display millisecond in my stopwatch? -
i implementing stopwatch using javascript. have basic html document setup , javascript file called stopwatch.js in have next code. create utilize of setinterval function execute clockrunning function every 1 second(1000ms). gives me command on sec, min , hr increment them accordingly, having difficulty inserting millisecond stopwatch. how should increment millisecond 0 1000 , reset zero?
i have tried decreasing interval time setinterval function called every 1ms , set millisecond variable time%1000 in time variable increased 1 every time function called. not give result want. millisecond seems increasing way slow.
class="snippet-code-js lang-js prettyprint-override">var running = 0 var time = 0; var hr = 0; var min = 0; var sec = 0; var millisec = 0; function start(){ started = window.setinterval(clockrunning, 1000); } function stop(){ window.clearinterval(started); } function clockrunning(){ time++; sec++; if (sec == 60){ min += 1; sec = 0; if (min == 60){ hour += 1; min = 0; } } document.getelementbyid("display-area").innerhtml = (hour ? (hour > 9 ? hr : "0" + hour) : "00") + ":" + (min ? (min > 9 ? min : "0" + min) : "00") + ":" + (sec > 9 ? sec : "0" + sec); }; class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> <meta charset="utf-8"> <title>stopwatch</title> <script src="stopwatch.js"></script> <style> #display-area { font-size: 20pt; } </style> </head> <body> <div> <output id="display-area">00:00:00.000</output> </div> <div> <button id="toggle-button" onclick="start()">start</button> <button id="toggle-button" onclick="stop()">stop</button> <button id="reset-button">reset</button> </div> </body> </html>
you should maintain track of starting time subtract time current time using date:
class="snippet-code-js lang-js prettyprint-override">var timebegan = null , timestopped = null , stoppedduration = 0 , started = null; function start() { if (timebegan === null) { timebegan = new date(); } if (timestopped !== null) { stoppedduration += (new date() - timestopped); } console.log(stoppedduration); started = setinterval(clockrunning, 10); } function stop() { timestopped = new date(); clearinterval(started); } function reset() { clearinterval(started); stoppedduration = 0; timebegan = null; timestopped = null; document.getelementbyid("display-area").innerhtml = "00:00:00.000"; } function clockrunning(){ var currenttime = new date() , timeelapsed = new date(currenttime - timebegan - stoppedduration) , hr = timeelapsed.getutchours() , min = timeelapsed.getutcminutes() , sec = timeelapsed.getutcseconds() , ms = timeelapsed.getutcmilliseconds(); document.getelementbyid("display-area").innerhtml = (hour > 9 ? hr : "0" + hour) + ":" + (min > 9 ? min : "0" + min) + ":" + (sec > 9 ? sec : "0" + sec) + "." + (ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms); }; class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> <meta charset="utf-8"> <title>stopwatch</title> <style> #display-area { font-size: 20pt; } </style> </head> <body> <div> <output id="display-area">00:00:00.000</output> </div> <div> <button id="toggle-button" onclick="start()">start</button> <button id="toggle-button" onclick="stop()">stop</button> <button id="reset-button" onclick="reset()">reset</button> </div> </body> </html>
the reason seeing milliseconds "lagging" before setinterval notorious not firing exactly when specify. can around using strategy above.
update: maintain track of how long timer has "paused" between resets. updated reply accommodate this.
javascript stopwatch
No comments:
Post a Comment