Analog Clock: Need some JS help please

Hey Guys,

need some help with a little project that is using JavaScript. Here is my hype project:

  1. the first scene is a simple count-up and it is working as expected. I just would need to format my numbers like “0019” and not “19”

  2. in the second screen I am trying to use a HTML widget inspiered by – here the respective codepen

I am pretty sure that I am doing the things right, but unfortunately I can not get it running. Any idea what I am doing wrong here?

Or any idea for a simpler analog clock where I can define different timezones?

Any help is greatly appreciated!



I think you just need to write the counter text like this example.

$('.counter3').text("00" + (Math.ceil(this.countNum)));

Thanks @MarkHunte. This is working “partly” – only if the number has less digits than 4. But probably my question was misleading :slight_smile: I try to be more precize: I would like to start with “0000” and end up with “9264”… Hope this is making now more sense :slight_smile:

Nevermind! After experimenting a bit i came up with this. Semms to working fine:

    countNum: $('.counter2').text()
    countNum: 9730
}, {
    duration: 30000,
    easing: 'linear',
    step: function () {
        $('.counter2').text(("0000" + (Math.ceil(this.countNum))).slice(-4));
    complete: function () {

Anyone an idea for my problem with the analog clock? Or even better: an idea to build an analog clock that can display world-time completely in Hype?

Well to start, making a Clock is pretty easy in Hype. (32.0 KB)

1 Like

@MarkHunte – thank you VERY much Mark! Very cool! I will figure out some ways to setup different timezones :wink: Just one thing in the code – I think that hould be like this for the hours (h * 12) insted of (h * 6):

var hoursHand = document.getElementById('hoursHand');
hypeDocument.setElementProperty(hoursHand, 'rotateZ', (h * 12)) 

Thank you again for the great support!!!

Oops my bad… :dizzy_face:

will update the example above in a min…

Hmm, must admit my math is not always great, in my mind

(h * 12) should have done it. But it looked wrong to me when displaying. So I looked at how the hour was obtained in you example…

(h * 30) + (m / 2)

Which seems to put the hour hand in the right place.


A world clock.

To add to it simply duplicate a clock Symbol & drag it onto the scene.
Gve the new Symbol an ID. The ID needs to the timezone name for the place you want the time for.



Place like the USA may do things slightly different.

i.e New York works as US/Eastern

You can see a list here

It may have a list for a city like America/New_York if a code like this does not work there probably is a second one in the database for it. America/New_York = US/Eastern

P.s I cannot swear to any consistency with this as time zones are like mine fields…

Project Example

World Clock (76.6 KB)

Clock Symbol. (68.6 KB)


I have posted slight updated version in the Template Gallery

@MarkHunte Mark, this is simply AMAZING! Thank you very, very much for the outstanding support. Well, this is actually much more than support :slight_smile:



No problem. I liked the idea of this.