April 7, 2018
Countdown Timer
Comments
(7)
April 7, 2018
Countdown Timer
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 61 posts
Followers: 57 people
(7)

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.

7 Comments
2018-09-11 13:32:44
2018-09-11 13:32:44

Thanks for the great post.

Like
2018-04-09 15:16:24
2018-04-09 15:16:24

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.

Like
(3)
>
Jeremy Shimmerman
's comment
2018-04-10 06:02:36
2018-04-10 06:02:36
>
Jeremy Shimmerman
's comment

Good catch. I see that it makes it run faster. It was not something I thought of testing.

Like
>
Jeremy Shimmerman
's comment
2019-07-19 06:49:35
2019-07-19 06:49:35
>
Jeremy Shimmerman
's comment

You have to make sure that you use ‘clearInterval’ before every use, not just in the conditional, otherwise you’ll be adding extra instances.

Like
>
silverSurfer
's comment
2019-07-19 13:03:16
2019-07-19 13:03:16
>
silverSurfer
's comment

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.

Like
2018-04-09 10:22:55
2018-04-09 10:22:55

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

Like
(1)
>
Christian Lee
's comment
2018-04-09 10:42:40
2018-04-09 10:42:40
>
Christian Lee
's comment

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.

Like
Add Comment