Counter

[Guest Pusher]

Hi there,

 

I have just realised that Greensock can do counting! I am making a counter that needs to arrive at a phone number but is meant to look like a bomb timer.

 

Does anybody know how to make the counter...

• Start from 0 000 000 000 and count up.
• And possibly put some : in between the groups of numbers.

Thanks for any help,

 

Phil

 

See the Pen ojYVGz by phillip_vale (@phillip_vale) on CodePen

[Diaco]

Hi Pusher 

 

if i understood correctly what you're looking for , i think one of these methods can help you :

 

#1 :

var distance = {score:0} , zero = [0,0,0,0,0,0,0,0,0,0] ,
scoreDisplay = document.getElementById("score");

TweenMax.to(distance, 10, {score:"+=1800222123", roundProps:"score", onUpdate:update});

function update(){
  var N = distance.score.toString().split('');
  if(N.length<zero.length){N.unshift(0)};
  function R(x){ return N[x] || zero[x] };
scoreDisplay.innerHTML =R(0)+':'+R(1)+R(2)+R(3)+':'+R(4)+R(5)+R(6)+':'+R(7)+R(8)+R(9);
};

#2:

var d1=[0,0,0,0] , d2=[1,800,222,123] ,
    scoreDisplay = document.getElementById("score");

d2.roundProps="0,1,2,3";
d2.onUpdate=update;
TweenLite.to(d1,10,d2);

function update(){
  function R(x){
    var X = d1[x]<100?d1[x]<10?'00':'0':'';
    return X+d1[x]
  };
scoreDisplay.innerHTML = d1[0]+':'+R(1)+':'+R(2)+':'+R(3) ;
};

pls check this out : 

See the Pen LpbvWO by MAW (@MAW) on CodePen

 

[Guest Pusher]

Amazing, thanks Diaco! I am going to pull this apart to get a better understanding.

 

Cheers,

 

Phil

[OSUblake]

The ScrambleText plugin would be great for this. The only problem is that it randomly chooses the value/char. Maybe Jack could add in an option to use sequential values instead of random ones. 

 

I didn't set it up like a timer. I just wanted to show how it looks weird using random numbers.

 

See the Pen RWoOzO by osublake (@osublake) on CodePen

[sensenel]

On 9/29/2015 at 2:22 AM, Diaco said:

Hi Pusher 

 

if i understood correctly what you're looking for , i think one of these methods can help you :

 

#1 :

var distance = {score:0} , zero = [0,0,0,0,0,0,0,0,0,0] ,
scoreDisplay = document.getElementById("score");

TweenMax.to(distance, 10, {score:"+=1800222123", roundProps:"score", onUpdate:update});

function update(){
  var N = distance.score.toString().split('');
  if(N.length<zero.length){N.unshift(0)};
  function R(x){ return N[x] || zero[x] };
scoreDisplay.innerHTML =R(0)+':'+R(1)+R(2)+R(3)+':'+R(4)+R(5)+R(6)+':'+R(7)+R(8)+R(9);
};

#2:

var d1=[0,0,0,0] , d2=[1,800,222,123] ,
    scoreDisplay = document.getElementById("score");

d2.roundProps="0,1,2,3";
d2.onUpdate=update;
TweenLite.to(d1,10,d2);

function update(){
  function R(x){
    var X = d1[x]<100?d1[x]<10?'00':'0':'';
    return X+d1[x]
  };
scoreDisplay.innerHTML = d1[0]+':'+R(1)+':'+R(2)+':'+R(3) ;
};

pls check this out : 

See the Pen LpbvWO by MAW (@MAW) on CodePen

 

looking for something similar after some real brainf**k ... your stuff and ideas are just awesome - every single time!

Thank you so much Diaco!!