Countdown Timer for an animation built with Tumult hype

22

ok thanks

23

Hi DBear

Thanks for sharing this awesome example! I managed to figure out how to make it count down from 100 but I don’t know how to make it stop at 0. I’m talking about the green timer at the bottom of the page.

Any help greatly appreciated!

Thanks!
Greg

24

Hi Daniel

Is there a way to trigger this on click? The countdown in your example starts when the page launches. I would like to start it with a click. So I simply copied the .js script in the HTML widget and triggered with a button on a textbox inner html but it doesn’t work for some reason.

Any help appreciated

Thanks!

25

There are a lot of different examples on this thread; it would be useful if you could post a zip of your current .hype document so we can better advise. Thanks!

26

I never really looked at this thread but just did as it was linked in another question.
I did not read it all so I am un sure why this code ever went into the innerHTML.

The answer I give here can be used to do what you want by triggering the timer on click.

I am just adding it here for completeness.

If you put a similar JS into a normal Hype function. you can call that function at any time you are ready. i.e on scene load , on click.

var seconds = 15;

function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;  
    }
    
  
     hypeDocument.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "=>";
    } else {
        seconds--;
    }
}
 
var countdownTimer = setInterval(secondPassed, 1000);

You then use a Rect as the display and give it the counter id.

Set the function to be called how you want. i.e on click.

2 Likes