Creating a timer is a very simple task. We will only be using variables, functions and THAT'S IT!
HTML code:
<html>
<head>
...
For further actions, you may consider blocking this person and/or reporting abuse
It's a good implementation but I think by the time it won't represent the real-time as the 'setTimeout()' function won't run after an exact second, there will be some small lag.
I think it will be better if you made use of the Date object.
That's a great idea, but at the moment I don't know how to do that.
If I ever learn how to do it, I might update the post.
Why did you use a string inside settimeout ? setTimeout(timer,1) works too
I just decided to use that at the time, but yeah that works too.
Salut très bien
Found this when I was searching for a simple stopwatch. It's a nice starting point, but as others said, setTimeout() isn't 100% reliable, so I've made a version that uses performance.now() to keep track of time. It might be best to use window.requestAnimationFrame() for the most stable update frequency, but then you'll always have 60 cycles per second, and you might not need/want that many.
Also, I wanted to have millisecond precision, and the ability to start the timer delayed, so you can 'alt-tab to another window' / 'activate another tab in your browser' before it starts!
Please don't bother commenting on code readability, cuz I don't care for that, it's purely for functionality.
jsfiddle.net/Larph/he10jyu9/
This is a very good post!!!
However, there are times when the code runs in the timerCycle function. If I run the function again after exactly 1 second, wouldn't the time be wrong? Or is it not the time to be so concerned?
Your code might work but I really don't think it's good level of code bcoz it's not understandable easily for someone else analysing it.
Have a look at mine and decide yourself which one is better.
jsfiddle.net/2vwcd3a8/
Reset Functionality is not fully implemented.
What do you mean? Reset just makes the string 00:00:00 again. What isn't implemented?
It is just resetting the UI Part but not the actual variables which are still storing the old time values. Below is what i did to get it working.
function resetTimer() {
timer.innerHTML = "00:00:00";
stoptime = true;
hr = 0;
sec = 0;
min = 0;
}
yeah you are right! missed that lol
Great post. Thanks for this. You can clearTimeout to remove the lag when you stop/reset the timer.
Created a global variable
let startTimeout;
then in the timerCycle() function, initiate the timeout with
startTimeout = setTimeout('timerCycle()', 1000);
Create this function for stopping timer cycle
function stopTimerCycle() {
clearTimeout(startTimeout);
}
then Add stopTimercycle() and "function stopTimer()" to "function resetTimer()"
Thank you! I am trying to learn javascript and I need more of these projects explained.
Very happy I could help!
Great post bro
Thank you!
How can I learn to do this kind of projects myself instead of copying the code?
If you don't have a lot of programming experience it will be hard to just work on projects without any online help. I personally still looked up stuff on the internet for this project as I do for every project.
how to restart timer?
There is a "resetTimer()" function which will reset the timer.