Where I can find this clock type to be used as a counter?

**b007** · 05-24-2011, 07:32 PM

Hi,

Where I can find this clock type of design with animation when number is changing to be used as a counter...

Thanks...

**djr33** · 05-25-2011, 04:00 AM

What exactly do you require? Do the numbers need to flap down? Do you just need one image for each number (0-9)? I don't think it would be too difficult to create an image like that. But then you'd need to program it, probably using Javascript-- do you have a script in mind? Do you need that also?
And when you say "counter" do you mean a page hits counter? Something else?

(Please try to give us enough information to help you. If you make it easy for us to help you we'll be able to help more, and faster too.)

**b007** · 05-25-2011, 05:52 AM

Yes,
I need it to flap down.

and I need it ready it javascript code.
Thanks..

**djr33** · 05-25-2011, 02:28 PM

Since this is a very specific custom request then, I think you'll need to hire a designer to create this for you. Of course there may be generally similar scripts out there, but adapting them might be difficult and if you need exactly this, then you'll need to hire someone I think.

**vwphillips** · 05-25-2011, 04:36 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#clock {
  position:relative;overflow:hidden;left:100px;top:100px;width:210px;height:50px;border:solid red 1px;
}

#clock IMG {
 float:left;
}


.number{
  position:relative;width:50px;height:50px;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.data[0]<0&&!this.neg) this.data[0]=0;
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body>
<input type="button" name="" value="Reset" onmouseup="C1.Reset();" /><input type="button" name="" value="Count" onmouseup="C1.Count();" />
 <div id="clock" >
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
  <img  src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="number"  width="5" height="50"/>
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
 </div>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcClock(o){
 var obj=document.getElementById(o.ID),nus=this.bycls(o.DigitsClass,obj),z0=0,img,imgs=[],ms=o.AnimationSpeed;
 for (;z0<nus.length;z0++){
  imgs[z0]=[];
  img=nus[z0].cloneNode(false);
  img.style.position='absolute';
  img.style.left=nus[z0].offsetLeft+'px';
  img.style.top='0px';
  obj.appendChild(img);
  imgs[z0][0]=new zxcAnimate('top',img);
  img=img.cloneNode(false);
  obj.appendChild(img);
  imgs[z0][1]=new zxcAnimate('top',img);
  nus[z0].style.visibility='hidden';
 }
 this.imgs=imgs.reverse();
 this.digits=o.Digits;
 this.srt=-obj.offsetHeight;
 this.ms=typeof(ms)=='number'?ms:500;
 this.Reset();
}

zxcClock.prototype={

 Reset:function(secs,mins,hrs,days){
  this.srtcnt=[];
  for (var z0=0;z0<this.imgs.length;z0++){
   this.srtcnt[z0]='0';
   this.imgs[z0][0].obj.src=this.digits[0];
   this.imgs[z0][1].obj.src=this.digits[0];
  }
  this.cnt=0;
 },

 Count:function(){
  this.cnt++;
  var cnt=(this.cnt+'').split('').reverse();
  for (var z0=0;z0<this.srtcnt.length;z0++){
   this.imgs[z0][0].obj.src=this.imgs[z0][1].obj.src;
   if (cnt[z0]&&cnt[z0]!=this.srtcnt[z0]){
    this.srtcnt[z0]=cnt[z0];
    this.imgs[z0][0].animate(0,-this.srt,this.ms);
    this.imgs[z0][1].obj.src=this.digits[cnt[z0]];
    this.imgs[z0][1].animate(this.srt,0,this.ms);
   }
  }
 },

 bycls:function (nme,el){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 }

}

C1=new zxcClock({
 ID:'clock',
 DigitsClass:'number',
 AnimationSpeed:500,
 Digits:[
  ['http://www.vicsjavascripts.org.uk/StdImages/Zero.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/One.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Two.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Three.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Four.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Five.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Six.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Seven.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Eight.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Nine.gif']
 ]
});
/*]]>*/
</script>
</body>

</html>

**vwphillips** · 05-26-2011, 12:44 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#clock {
  position:relative;overflow:hidden;left:100px;top:100px;width:210px;height:100px;border:solid red 1px;
}

#clock IMG {
 float:left;
}


.number{
  position:relative;width:50px;height:50px;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// 

// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.data[0]<0&&!this.neg) this.data[0]=0;
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body>
<input type="button" name="" value="Reset" onmouseup="C1.Reset();" /><input type="button" name="" value="Count 1" onmouseup="C1.Count(1);" /><input type="button" name="" value="Count 5" onmouseup="C1.Count(5);" />
 <div id="clock" >
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
  <img  src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="number"  width="5" height="50"/>
  <img class="number" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="number" />
 </div>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Flap Clock (25-May-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk

function zxcFlapClock(o){
 var oop=this,obj=document.getElementById(o.ID),nus=this.bycls(o.DigitsClass,obj),z0=0,img,imgs=[],sz=nus[0].height,ms=o.AnimationSpeed,bdr=o.Border,digits=o.Digits,z1=0,pl=[];
 for (;z0<nus.length;z0++){
  imgs[z0]=[];
  img=nus[z0].cloneNode(false);
  img.style.position='absolute';
  img.style.left=nus[z0].offsetLeft+'px';
  img.style.top='0px';
  obj.appendChild(img);
  imgs[z0][0]=img;
  img=img.cloneNode(false);
  obj.appendChild(img);
  img.style.top=sz+'px';
  imgs[z0][1]=img;
  img=img.cloneNode(false);
  if (typeof(bdr)=='string'){
   img.style.borderTop=bdr;
   img.style.borderBottom=bdr;
  }
  obj.appendChild(img);
  imgs[z0][2]=new zxcAnimate('top',img);
  imgs[z0][3]=new zxcAnimate('height',img);
  imgs[z0][3].Complete=function(){
   this.nxt.obj.src=this.src;
   this.nxt.animate(0,sz,ms);
   this.obj.src=this.src;
  }
  img=img.cloneNode(false);
  obj.appendChild(img);
  img.style.top=sz+'px';
  imgs[z0][4]=new zxcAnimate('height',img);
  imgs[z0][4].Complete=function(){
   this.nxt.src=this.obj.src;
  }
  imgs[z0][4].nxt=imgs[z0][1];
  imgs[z0][3].nxt=imgs[z0][4];

  nus[z0].style.visibility='hidden';
 }
 for (;z1<digits.length;z1++){
  pl[z1]=[];
  pl[z1][0]=new Image();
  pl[z1][0].src=digits[z0][0];
  pl[z1][1]=new Image();
  pl[z1][1].src=digits[z0][1];
 }
 this.imgs=imgs.reverse();
 this.digits=digits;
 this.sz=sz;
 this.ms=typeof(ms)=='number'?ms:500;
 this.Reset();
}

zxcFlapClock.prototype={

 Reset:function(secs,mins,hrs,days){
  this.srtcnt=[];
  for (var z0=0;z0<this.imgs.length;z0++){
   this.srtcnt[z0]='0';
   this.imgs[z0][0].src=this.digits[0][0];
   this.imgs[z0][1].src=this.digits[0][1];
   this.imgs[z0][2].obj.src=this.digits[0][0];
   this.imgs[z0][4].obj.src=this.digits[0][1];
  }
  this.cnt=0;
 },

 Count:function(nu){
  this.cnt+=typeof(nu)=='number'&&nu>=1?parseInt(nu):1;
  var oop=this,sz=this.sz,src,cnt=(this.cnt+'').split('').reverse();
  for (var z0=0;z0<this.srtcnt.length;z0++){
   if (cnt[z0]&&cnt[z0]!=this.srtcnt[z0]){
    this.srtcnt[z0]=cnt[z0];
    this.imgs[z0][0].src=this.digits[cnt[z0]][0];
    this.imgs[z0][2].animate(0,sz,this.ms);
    this.imgs[z0][3].animate(sz,0,this.ms);
    src=this.digits[cnt[z0]][1];
    this.imgs[z0][3].src=src;
    this.imgs[z0][4].src=src;
   }
  }
//  setTimeout(function(){ oop.Count(); },1000);
 },

 bycls:function (nme,el){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 }

}

C1=new zxcFlapClock({
 ID:'clock',
 DigitsClass:'number',
 AnimationSpeed:500,
 Digits:[
  ['http://www.vicsjavascripts.org.uk/StdImages/0T.gif','http://www.vicsjavascripts.org.uk/StdImages/0B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/1T.gif','http://www.vicsjavascripts.org.uk/StdImages/1B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/2T.gif','http://www.vicsjavascripts.org.uk/StdImages/2B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/3T.gif','http://www.vicsjavascripts.org.uk/StdImages/3B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/4T.gif','http://www.vicsjavascripts.org.uk/StdImages/4B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/5T.gif','http://www.vicsjavascripts.org.uk/StdImages/5B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/6T.gif','http://www.vicsjavascripts.org.uk/StdImages/6B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/7T.gif','http://www.vicsjavascripts.org.uk/StdImages/7B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/8T.gif','http://www.vicsjavascripts.org.uk/StdImages/8B.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/9T.gif','http://www.vicsjavascripts.org.uk/StdImages/9B.gif']
 ],
 Border:'solid red 1px'
});
/*]]>*/
</script>
</body>

</html>

**djr33** · 05-26-2011, 09:12 PM

It looks like that should handle the Javascript, if that's the function you wanted. I'm still not sure what you wanted to "count".

But those images aren't the same format as in the original request, so if you still need help with that then you can try to make them yourself (it should not be extremely difficult) or post here, or in the graphics section, for more information.

**jscheuer1** · 05-27-2011, 04:28 AM

Just a note - Did you see this somewhere? If so, where?

Thread: Where I can find this clock type to be used as a counter?

Thread Tools

Search Thread

Where I can find this clock type to be used as a counter?

Bookmarks

Bookmarks

Posting Permissions