Seconds-only digital countdown timer?

[NavionDriver (John)]

CONCEPT

• A visitor opens a page to find some text and a simple digital countdown timer already counting down from 15 seconds to zero.
• At zero, the counter simply stops and remains at zero. If the page is refreshed, the timer begins counting down again at 15 seconds.
• The 15 seconds is not tied to a year, date, time of day, or location. No other variables such as year, month, day of week, or hour are visible; only seconds appear. The timer just starts at 15 seconds (or other number, of course).
• Microseconds? If they could optionally be made invisible, perhaps.
• Having some control over formatting (size, font, colour of text, placement) would be a strong plus.

Is there such a stack available? I’ve looked at a number of countdown stacks, but so far all I’ve seen require year, date, time etc. to appear before getting to seconds.

Thanks for your thoughts on this idea!

John

[willwood (William Woodgate)]

Download the Builder stack.

Clear all the code fields.

In the HTML Content box, enter this:

<div id="seconds_countdown"></div>

In the Javascript Code box, enter this:

var timeleft = 15;
var countdownTimer = setInterval(function(){
  if(timeleft <= 0){
    clearInterval(countdownTimer);
    document.getElementById("seconds_countdown").innerHTML = "Finished";
  } else {
    document.getElementById("seconds_countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);

In edit mode, you will now have something like this:

Then when you preview your page, you will see a simple plain text countdown start from 15 seconds. At the end of 15 seconds, it simply changes to the word “Finished”:

Styling - what did you have in mind? You could already use some simple CSS code to change the font styling, colouring and alignment of this. Starting with something basic like this in the CSS Code box:

#seconds_countdown {
	background: #333;
	color: #fff;
	font-size: 3em;
	text-align: center;
	padding: 1rem;
}

Which results in:

It is possible to take this much further. At this stage, it is probably best for you to decide how you want it styled. Perhaps give us a design mockup of what you had in mind and how you want to incorporate it into your existing page design.

[NavionDriver (John)]

Thanks, Will, for your help; the Builder stack loaded with the code you provided did the trick. I’ve already tweaked the javascript and CSS for settings and desired colour. A bit of sleuthing led me to stackoverflow.com, with a whole new world of possibilities opening to me, again thanks to Builder and your suggestion. This is exactly what I wanted.

Cheers,

John