A graphic odometer with javascript

JavaScript
1

Please tell me what I have done wrong in the following code.
It all works except when I attempt to display images.


<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function GraphicOdo(Nommer)
    {
    d = Nommer.toString();
    for (i=0; i<d.length; i++)
            {
            var image="<IMG SRC=c"+d[i]+".gif>";
            alert(image+c2.gif);
            document.getElementById('GraphicCounter').innerHtml=image;
            }
    }

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
GraphicOdo(c);
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div id="GraphicCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>

The images are in the same folder as the script and when I use alert to display the generated image URL it looks fine.
2 
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function GraphicOdo(Nommer){
    d = Nommer.toString();
    for (i=0; i<d.length; i++){
            var image="<IMG SRC=c"+[COLOR="#FF0000"]d.charAt(i)[/COLOR]+".gif>";
            alert("<IMG SRC=c"+d.charAt(i)+".gif>");
            document.getElementById('GraphicCounter').innerHtml=image;
            }
    }

function timedCount(){
 document.getElementById('txt').value=c;
 c=c+1;
 GraphicOdo(c);
 t=setTimeout("timedCount()",1000);
}

function doTimer(){
 if (!timer_is_on){
   timer_is_on=1;
   timedCount();
 }
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div id="GraphicCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>
3

Have a look at http://www.k9t.za.net/odometer/

4

Vic, the current version incorporating your code is at http://www.k9t.za.net/vicodo/index.html which almost does everything I need.
I have used percentages to position and size various aspects of this hoping that one could also get it to display correctly on smart phones but so far I have failed…:frowning:

5

tricky

but if you had an image strip with 11 numbers

0
1
2
3
4
5
6
7
8
9
0

it would make this easier

6

It is easier to just update the src of the image directly rather than updating the HTML.

7

Vic, unfortunately the reel is as supplied by the client but be so good as to explain why 11 numbers would be better than 10.
Stephen, please explain what you mean.

8

the numbers will need to be placed with relative positioning, and 11 numbers are needed to achieve a seam less change between 9 and 0.

I suggest you use the customers image to make one with the eleven numbers.

9 
<!DOCTYPE HTML PUBLIC>
<html manifest="odometer.manifest">
<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#p {
  position:relative;left:20%;top:12%;width:69%;height:55%;border:solid red 1px;
}

.bg {
  position:absolute;left:0px;top:0px;width:100%;
}

#tst {
  position:relative;overflow:hidden;left:20%;top:20%;width:80%;height:80%;
}

.digit {
  position:relative;width:80px;height:1500px
}

/*]]>*/
</style>
</head>

<body>
 <div id="p" >
  <img class="bg" src="http://www.k9t.za.net/vicodo/Metal_BackR.png" />
 <div id="tst" >
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" style="width:10%;"/>
  <img class="commer" src="http://www.k9t.za.net/vicodo/Metal_Comma.png" style="position:relative;top:0px;height:100%;" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
  <img class="commer" src="http://www.k9t.za.net/vicodo/Metal_Comma.png" style="position:relative;width:3%;height:100%;" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
  <img class="commer" src="http://www.k9t.za.net/vicodo/Metal_Decimal.png" style="position:relative;width:3%;height:100%;" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
  <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
</div>
</div>

<script type="text/javascript" >
/*<![CDATA[*/
// Odometer (16-October-2011)
// by Vic Phillip http://www.vicsjavascripts.org.uk/


function zxcOdometer(o){
 var el=document.getElementById(o.ID),p=el.parentNode,digs=this.bycls(o.DigitClass,el),coms=this.bycls(o.CommerClass,el),ary=[],z0=0,ms=o.SlideDuration;
 this.r=digs[0].height/digs[0].width;
 for (;z0<digs.length;z0++){
  img=digs[z0].cloneNode(true);
  img.style.position='absolute';
  img.style.top='0px';
  el.appendChild(img);
  digs[z0].style.visibility='hidden';
  digs[z0].style.height='20px';
  ary[z0]=new zxcOdometerSlide(img,typeof(ms)=='number'?ms:500);
 }
 this.ary=ary;
 this.el=el;
 this.p=p;
 this.digs=digs;
 this.coms=coms;
 this.dw=o.DigitWidth;
 this.cw=o.CommerWidth;
 this.resize();
 this.nu=1;
 this.addevt(window,'resize','resize');
}

zxcOdometer.prototype={

 resize:function(){
  var el=this.el,p=this.p,digs=this.digs,coms=this.coms,ary=this.ary,z0=0,z1=0,z2=0,sz=el.offsetWidth/this.dw,mve,h=sz*this.r;
  for (;z0<digs.length;z0++){
   digs[z0].style.width=sz+'px';
  }
  for (;z1<coms.length;z1++){
   coms[z1].style.width=el.offsetWidth/this.cw+'px';
  }
  mve=(digs[0].width*this.r)/10;
  for (;z2<ary.length;z2++){
   ary[z2].obj.style.left=digs[ary.length-z2-1].offsetLeft+'px';
   ary[z2].obj.style.width=sz+'px';
   ary[z2].obj.style.height=h+'px';
   ary[z2].obj.style.top=-ary[z2].cnt*mve+'px';
   ary[z2].img.style.left=digs[ary.length-z2-1].offsetLeft+'px';
   ary[z2].img.style.width=sz+'px';
   ary[z2].img.style.height=h+'px';
   ary[z2].img.style.top=-ary[z2].cnt*mve+sz*this.r+'px';
   ary[z2].h=h;
  }
  el.style.height=mve+'px';
  el.style.top=(p.getElementsByTagName('IMG')[0].offsetHeight-mve)/2+'px';
  this.mve=mve;
 },

 Count:function(){
  var z0=0,ary=this.ary,cnt=1;
  for (;z0<ary.length;z0++){
   if (this.nu%cnt==0||z0==0){
    ary[z0].cnt++;
    if (ary[z0].cnt==11){
     ary[z0].cnt=1;
     ary[z0].now=0;
    }
    clearTimeout(ary[z0].dly);
    ary[z0].animate('top',ary[z0].now,-this.mve*ary[z0].cnt,new Date());
   }
   cnt*=10;
  }
  this.nu++;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 },

 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;
 }

}
function zxcOdometerSlide(obj,ms){
 this.img=obj.cloneNode(true);
 obj.parentNode.appendChild(this.img);
 this.obj=obj;
 this.ms=ms;
 this.now=0;
 this.cnt=0;
}

zxcOdometerSlide.prototype.animate=function(mde,f,t,srt){
  var oop=this,ms=new Date().getTime()-srt,mS=this.ms,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.obj.style[mde]=now+'px';
   this.img.style[mde]=now+this.h+'px';
   this.now=now;
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt); },10);
  }
  else {
   this.now=t;
  }
 }



M1=new zxcOdometer({
 ID:'tst',             // the unique ID name of the parent DIV element.              (string)
 DigitClass:'digit',   // the common class name of the digit images.                 (string)
 DigitWidth:12,        // the digits width as apercentage of the parent DIV width.   (number)
 CommerClass:'commer', // the common class name of the commer images.                (string)
 CommerWidth:60,       // the commers width as apercentage of the parent DIV width.  (number)
 SlideDuration:200     //(optional) the slide duration in milli seconds.             (number, default = 500)
});


setInterval(function(){ M1.Count(); },600);

/*]]>*/

 </script>

</body>

</html>
10

Thanks Vic, that looks better in my laptop but some fixing needs to be done with the appearance on my cell phone.

11

Vic, what would be neat would be to be able to translate the display into a number and vice versa. Do you think that that can be done?