Countdown clock

1

Hello friends,

I am looking to create a countdown clock that shows percent.
I set the date and day of the beginning and end. And the clock is supposed to show me how long I stayed in percentages
From 100% to 0

Any ideas how?

2

Hi Eden

I would say that there are probably a few ways that have been shown here for a count down clock. Maybe a search is in order. You could probably then customise a solution to your needs in regards to showing percent.

Or if you have something that you are already working on then share and perhaps someone can customise it for you.

3

Instead of a display of time back … I want to display the percent back … from 100 to 0

Countdown clock.hype.zip (17.7 KB)

4

@DBear @Daniel Is it possible…?

5

Well, in "A Book About Hype", one of the examples involves displaying the date. (I just loaded it up and forgot exactly what I did. It was cool to see a functional clock – in a book!)

Anyway, if you can display the date with JavaScript, you can do math with it.

The problem is that the book uses seconds, minutes and hours. That's not quite the easiest way to get a percentage. Instead, you'd probably want to use a "Timestamp". Basically, a Unix Timestamp is the number of seconds since January 1, 1970.

If you keep track of the seconds, then it's just a matter of calculating the percentage of current seconds vs the total available seconds. So, sounds possible.

6

This code should help you:

update_clock();

setInterval(function() {
    update_clock();
}, 1000);
	
function update_clock() {
    var start = new Date('Mar 19 2016 02:00 UTC');
    var end = new Date('Mar 20 2016 02:00 UTC');
    var now = new Date();
	
    var time = ((Date.parse(end) - Date.parse(start)) / 1000);
    var t = ((Date.parse(end) - Date.parse(now)) / 1000);

    document.getElementById('countDownTimerPercent').innerHTML =  Math.floor((t / time) * 100) + "%";
}

This code will give you the percentage of time left between 2 given times.

if you want the percentage of time that has gone change the line to this:

document.getElementById('countDownTimerPercent').innerHTML =  Math.floor(100 -((t / time) * 100) / now) + "%";
7

It worked for you … ??
You can send me a file I see that it works.?

8

countDownPercent.zip (15.7 KB)

9

Beautiful. Thank you

Now … how do I do that it will have only a round number (50, 49%, 48%) is not a decimal point 48.5 …?

And it’s another question: How can I format the numbers …? Change the font, enlarge, change color, etc. …
?

Which command, I need to add to display only the percentage …?

10

Change the “Math.abs” to “Math.floor” and remove the “.toFixed(2)”

You format the numbers (font, size, etc) using the inspector in Hype as you would normally.

11

How do I make it appear just by times that I set …?

  1. When the time runs out, I want to receive a message such as: the time is over …

  2. When the time has not yet come receive a message such as: We have not started …

12

You have the time (in seconds) from the dates you set. So just run a conditional check within update_clock():

if (timeleft >= timedifference) {
    //update your element's innerHTML to reflect that the clock has not started yet
}

if (timeleft <= 0) {
    //update your element's innerHTML to reflect that the clock has finished
    
    //make sure you clear your setInterval
    clearInterval(timer); // timer is a variable you assign to your setInterval
}

you have to replace the variables above to your own one’s or the one’s in the previous code

13

Can you please send me file …?
I want to open the file in HTML same page and it does not work …

14

I have sent you the file previously. You just need to update it. Show me what you have done and I’ll help.

15

Test.hype.zip (232.8 KB)

Thanks DBear

16

countDownPercent-v2.zip (236.0 KB)

17

This is exactly what I need … Thank champion

Last question … How do I change the clock display from 16:30 to - 04:30 pm

18

overwrite the following code: “...innerHTML = now.getHours()...” (line 32)

with:

document.getElementById('countDownTimerPercent').innerHTML = ("0" + (now.getHours() + 24) % 12 || 12).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2) + ":" + ("0" + now.getSeconds()).slice(-2);
19

Hey, what you sent me this look CET,
I mean the clock display US
It shows: am / pm
for example:
If this morning, then it will show: 08:00 am
If this evening then it will show: 08:00 pm

20

DBear, can you help me with one that counts down the time left until a specific date. I’m trying for days to find something.