A Flexible Countdown Timer

Hi Jonathan,

At the end of the set time, what about if I want to redirect the countdown page to a new URL in this sample please? do I still need using timeline action of “go to URL”?

Thanks

See the section of the code:

	if(deltaTimeInterval < 0) {
		// do special handling when timer is expired; default is to just set it to 0
		deltaTimeInterval = 0;
	}

In here you can place code if you want to go to a different URL. You could either fire a timeline with the action, or from a more javascript-y approach just use:

        window.location.href = "http://www.example.com";
1 Like

Hello,

Thanks for your code it is what I was looking for. Is it possible to display always two digits? I mean 21:01:25 instead of 21:1:25

Regards.

The code should already do this through the pad() function. Can you send a screenshot and perhaps the time of it not working?

Sorry, it is working now.

Thanks.

1 Like

Mechanical Letter Countdown Timer

Demo:
MechanicalLetterCountdownTimer.html

Download:
MechanicalLetterCountdownTimer.hype.zip

Based on the work of @jonathan

3 Likes

Great! anyway to trigger a redirection of specific url after countdown end?

It fires a custom behavior called “timerExpired”. You can do what ever you want with that. Make sure you have the latest version.

Great, that would be more easy to custom style by Hype and trigger something.

Great work Max!

1 Like

Hi…Given the lack of accuracy, I opted to go with basic math and define 2 variables: mn and sec and decrement via a 1 sec delay.
Was able to make that approach work and print via serial to a 16x2 LCD. Got the minutes (mn) to print first, then a colon, then the sec. And it decremented correctly.
Then acquired a 4 digit 7 segment LED display with backpack. Assembled same and it performed the test functions correctly. On to trying to get it to display what I want.

complete pcb

Not sure what lack of accuracy your are referring to.

1 Like

Thanks man, i will use it in my web game!

Hi Jonathan!
Thank You for this! :slight_smile: I am new at coding and Hype as well, but so far I think that Hype is amazing!
I need to create a banner which is counting down to 19:00 o'clock every day, so the countdown timer has to refresh itself to the following day when reached at 19:00. I can't seem to figure it out.

If anybody would help me I would be super-grateful! :slight_smile:

I made some adjustments so that it will reset for the day when it gets to 0. Feel free to give it a try:

FlexibleCountdownTimer-day.hype.zip (68.8 KB)

You'll probably need to hide the day part, since it would always show 0.

2 Likes

OMG THANK YOU!!!!! :heart::heart::heart:

Everything works now perfectly!!!

2 Likes

how to make days can be 3 digit:

136:18:46:20

The class name itself embeds how many digits you want. So if you want days to have 3 digits (including 0 padding), then you would select the day element, and adjust Class Name in the Identity Inspector from countdown_days countdown_format_1 to countdown_days countdown_format_3.

For the inner html version, you'd likewise change:

<span class="countdown_days">0</span>d

to

<span class="countdown_days countdown_format_3">0</span>d

1 Like

how to use that in your "flexible countdown timer" ?
it's look different

3 days… version of the mechanical countdown:
MechanicalLetterCountdownTimer-3days.hype.zip (74,6 KB)

2 Likes