I have periodically seen questions related to timers and thought I would put something together that might be useful to the community at large.
Without further ado, I present to you the 10-Second Timer 3000! Never before seen on TV… LOL
Anyway, this timer does not have lots of bells and whistles and it only goes to 10 seconds for the sake of the demo.
In this project, I utilize the concatenate technique I have posted on in order to update the display but I also introduce another piece of javascript that executes the same code every second.
setInterval(function, time);
This will repeat the function every set amount of time. In this case, I reduce a variable by 1 for every second and use that variable for my display.
Here is the link to the working demo.
https://s3.us-east-2.amazonaws.com/captivateshare/timer/index.html
Try it out and think about how you might employ things like this into your own projects.
I kinda want to make a microwave and cook up a TV Dinner…
I have included the code and a little bit of explanation so you can study it a bit if you so desire.
Feel free to ask any questions you may have.
Thanks for the great post.
Great work. I really like the popups that show the code.
One thing you should add is to disable the ‘start’ button when the setInterval has been executed. What happens is if someone hits the start button more than once than the setInterval runs more than once.
Good catch. I see that it makes it run faster. It was not something I thought of testing.
You have to make sure that you use ‘clearInterval’ before every use, not just in the conditional, otherwise you’ll be adding extra instances.
Yeah, that was a good lesson when I worked on that. I did not update it on the web, though. Perhaps I should redo that now that we can put projects right into our posts.
Greg, that looks great. Could the timer be linked to an action (i.e. a button) that would pause the timer or an action if it ran down to 0?
Thanks
Chris
Yes, a pause button could be easily made by simply putting a single line of code behind it.
clearInterval(myTimer);
The start button would then be used to resume the countdown.
You can also add a pop-up box or something when the timer reaches 0 by adding the actions to the if statement.
You must be logged in to post a comment.
