Simple CountDown (from 100 to 0) with JS

So there are many examples here of fancy count down timers which include date and time etc.

However, I need a simple count down meter which will count down from 100 to whatever number I indicate. Just like the countUp.js but counting down. Also, it would be nice to be able to control the speed of the count down.

Thanks for your help!

Greg

https://inorganik.github.io/countUp.js/

it includes everything you asked for :wink:

1 Like

Hi Hans

Yes I found this in a previous post but there is so much code there I don’t know where to start.

A more step-by-step explanation would be helpful.

Greg

create a hypefunction and paste this code:

//fill in below as you need
let startCount = 100;

const	stopCount = 0,	
		duration = 5000,//milliseconds
		countDownElement = hypeDocument.getElementById('exampleElement'),//your element to display the countDown
		//end fill in ...
		
		
		
		intervalTime = duration/Math.abs(startCount - stopCount);
		
		
let countDown = setInterval(

function(){

if(startCount === stopCount)clearInterval(countDown)

countDownElement.innerHTML = startCount;

if(startCount > stopCount)	{
startCount--
}else{
startCount++
}	


},
intervalTime
);

attach the behaviour to run the function to whatever action you want.

not many options, but should work :slight_smile:countDownOrUp.hype.zip (13.0 KB)

1 Like

Thank you Hans! Exactly what I wanted!

Greg

Posting since I was writing it any way.

The simplest up/down counter I can think of.

Is have your timeline fire the Javascript at the end of any animations for the counter.

Put the time line in a loop with a start timeline action at the end.

This should in most cases allow you to adjust the speed of the animation in sync to the javascript changing the counter number.

The script that is run by the counter timeline is this.

The script is first run by the On Prepare For Display

Only the first bit is run because we use an if condition to check whom called the script.

The rest of the script is commented.

	var countNumber_  = hypeDocument.getElementById('countNumber')
	
	let startNumber =  0
	let endNumber =  10
	
	let directionISGoingUp = true  // true = count up, false = count down.
	
	
	//-- set the number in the scene 
	if (event.type == "HypeScenePrepareForDisplay"){ 
	// ------------------   Only run on HypeScene Prepare For Display              ------------------///
	
	countNumber_.innerHTML = startNumber
	
	  return
	  }
	
	
	
	
	
	
	
	var countNumberInner =  parseInt(countNumber_.innerHTML, 10);  /// Parse string into number
	
	
	 //--- COUNT UP
		if ( countNumberInner != ( endNumber - 1) &&  directionISGoingUp ){ //check if we have fully counted up
		//--if not change the nmuber
	 countNumber_.innerHTML =   (countNumberInner + 1)
	 
	 return
	 }
	 
	 
	 //--- COUNT DOWN
  if ( countNumberInner != ( endNumber  + 1) &&  !directionISGoingUp ){ //check if we have fully counted down  
	 	//--if not change the nmuber
	 	countNumber_.innerHTML =   (countNumberInner - 1)
	 	
	 return
	 }
	
	 
	
	//--- stop the counter
	 
	hypeDocument.goToTimeInTimelineNamed(0, 'counter')
	hypeDocument.pauseTimelineNamed('counter')
	
	//set the final number
	countNumber_.innerHTML =   endNumber

simple countdownUP.hype.zip (23.6 KB)

2 Likes

WOW! This is great! Thanks for sharing Mark. It uses vector shapes which is what I want to learn since I upgraded to the newest release lately.

Cool,

Just changed the code a little so we automatically get if the count is up or down.

We simply calculate if start time is less than end time.

	var countNumber_  = hypeDocument.getElementById('countNumber')
	
	let startNumber =  10
	let endNumber =   0
	
	
	// check if start time is less or more than end time to determine if count should go up or down, 
	 if ( startNumber < endNumber ) { hypeDocument.customData.direction =  true } else { hypeDocument.customData.direction = false }   // true = count up, false = count down.
	
	let directionISGoingUp = hypeDocument.customData.direction
	
	//-- set the number in the scene 
	if (event.type == "HypeScenePrepareForDisplay"){ 
	// ------------------   Only run on HypeScene Prepare For Display              ------------------///
	
	countNumber_.innerHTML = startNumber
	
	  return
	  }
	
	
	
	
	
	
	
	var countNumberInner =  parseInt(countNumber_.innerHTML, 10);  /// Parse string into number
	
	
	 //--- COUNT UP
		if ( countNumberInner != ( endNumber - 1) &&  directionISGoingUp ){ //check if we have fully counted up
		//--if not change the nmuber
	 countNumber_.innerHTML =   (countNumberInner + 1)
	 
	 return
	 }
	 
	 
	 //--- COUNT DOWN
  if ( countNumberInner != ( endNumber  + 1) &&  !directionISGoingUp ){ //check if we have fully counted down  
	 	//--if not change the nmuber
	 	countNumber_.innerHTML =   (countNumberInner - 1)
	 	
	 return
	 }
	
	 
	
	//--- stop the counter
	 
	hypeDocument.goToTimeInTimelineNamed(0, 'counter')
	hypeDocument.pauseTimelineNamed('counter')
	
	//set the final number
	countNumber_.innerHTML =   endNumber

simple countdownUP_v2.hypetemplate.zip (15.7 KB)


Fancy version.

Two vector timelines, the new one reverses the animation to match the count direction.
The button runs the same counter() function but only its part. Doing this gives us a simple reset and also guard on multiple clicks.

	 if(element.id == "startButton"){
	 // ------------------   Only run on  button click  ------------------///
	if (countNumber_.innerHTML ==  endNumber){
	countNumber_.innerHTML = startNumber
	}
	
	hypeDocument.startTimelineNamed(hypeDocument.customData.timeLine)
	return
	}

we can also change the vector colour depending on up or down. Run in the “Prepare For Display” section of the code.

	if (event.type == "HypeScenePrepareForDisplay"){ 
	// ------------------   Only run on HypeScene Prepare For Display     ------------------///
	
	countNumber_.innerHTML =startNumber
	
hypeDocument.customData.timeLine =  (directionISGoingUp ? "counterUp"  :  "counterDown");

//-- Change the vectors color depending on up or down

if (directionISGoingUp){
 hypeDocument.getElementById("countVector").querySelector("path").style.stroke  = upColor
 	} else{
  		hypeDocument.getElementById("countVector").querySelector("path").style.stroke  = downColor
 	}
 	
	  return
	  
 }

simple countdownUPFancyPants-1.hypetemplate.zip (23.5 KB)

1 Like

Legend! Thanks :grin:

Hi Hans

I have one more question. Would it be possible to tweak the code so that the startCount and StopCount values are taken from the form or some other form? In other words, we could type the start and end values ourselves in some kind of a form.

Thanks for your help.

Greg

what formelement do you mean/prefer?

you may serve a example-hypefile which includes the formelements you’d prefer :slight_smile:

Hi Hans

See the attached example. However, if you have any other ideas on how to do this feel free to change it. Basically, I would like the user to decide what value the counter starts and ends at by typing numbers into the forms.

However, this approach presents another problem with the speed. Currently your code sets the speed to 5000ms to count from 100 to 0. That’s good speed. However, would it be also possible to tweak the code so that the speed is calculated based on the inputs from the forms (in 50ms increments)? For example it takes 5000ms to count down from 100-0, 4950ms to count down from 100-1, 4900 to count from 100-2 etc. and 50ms to count from 100-99.

Looking forward to your reply.

Simple CountDown:Up timer.hype.zip (82.0 KB)

countDownUpWithInput.hype.zip (81.7 KB)
not well tested …

2 Likes

This is perfect! Thank you Hans!