See also Text Counter
Adds to the total by incrementing each number.
The buttons and textbox are for this example only as the counter value can be set by a function or another variable.
<HTML>
<HEAD>
<TITLE>Counter - Image</TITLE>
<script type="text/javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk
digit=new Array()
digit[digit.length]="0.gif"
digit[digit.length]="1.gif"
digit[digit.length]="2.gif"
digit[digit.length]="3.gif"
digit[digit.length]="4.gif"
digit[digit.length]="5.gif"
digit[digit.length]="6.gif"
digit[digit.length]="7.gif"
digit[digit.length]="8.gif"
digit[digit.length]="9.gif"
speed=10
spacer=5
pause=5
runRate=50
total=0
chk1=0;chk2=0;chk3=0;chk4=0
last1=0;last2=0;last3=0;last4=0
on1=0;on2=0;on3=0;on4=0
div1=2;div2=2;div3=2;div4=2
np1=1;np2=1;np3=1;np4=1 // next pic
ani1="";ani2="";ani3="";ani4=""
function initCounter(){
containerDiv=document.getElementById("container")
el1a=document.getElementById("pic1a") ; el1b=document.getElementById("pic1b")
el2a=document.getElementById("pic2a") ; el2b=document.getElementById("pic2b")
el3a=document.getElementById("pic3a") ; el3b=document.getElementById("pic3b")
el4a=document.getElementById("pic4a") ; el4b=document.getElementById("pic4b")
}
function startCounter(){
if(on1==1||on2==1||on3==1||on4==1){return}
num1=0;num2=0;num3=0;num4=0;
countValue=document.f1.t1.value // counter value
total=(total*1)+(countValue*1)
total=total.toString()
if(total.length>=4){
num4=total.charAt(total.length-4)
chk4=0
if(num4!=last4){incr4()}
last4=num4
on4=0
}
if(total.length>=3){
num3=total.charAt(total.length-3)
chk3=0
if(num3!=last3){incr3()}
last3=num3
on3=0
}
if(total.length>=2){
num2=total.charAt(total.length-2)
chk2=0
if(num2!=last2){incr2()}
last2=num2
on2=0
}
if(total.length>=1){
num1=total.charAt(total.length-1)
chk1=0
if(num1!=last1){incr1()}
last1=num1
on1=0
}
}
function incr1(){
if(chk1==1){return}
if(np1==num1){
on1=0
chk1=1
rotation1()
}
else{
on1=1
rotation1()
}
}
function rotation1(){
clearTimeout(ani1)
if(div1==1){
elPos=parseInt(el1a.style.top)
el1a.style.zIndex=2
}
else{
elPos=parseInt(el1b.style.top)
el1b.style.zIndex=2
}
elPos+=speed
ani1=setTimeout("rotation1()",runRate)
if(div1==1){
el1a.style.top=elPos+"px"
el1b.style.top= elPos+containerDiv.offsetHeight+spacer+"px"
if(elPos>=0){
el1a.style.top=0
el1a.style.zIndex=""
el1b.style.top= -containerDiv.offsetHeight-spacer+"px"
np1++
if(np1>digit.length-1){np1=0}
el1b.src=digit[np1]
clearTimeout(ani1)
div1=2
incrTimer=setTimeout("incr1()",50) // trigger next number
}
}
else{
el1b.style.top=elPos+"px"
el1a.style.top= elPos+containerDiv.offsetHeight+spacer+"px"
if(elPos>=0){
el1b.style.top= 0
el1b.style.zIndex=""
el1a.style.top= -containerDiv.offsetHeight-spacer+"px"
np1++
if(np1>digit.length-1){np1=0}
el1a.src=digit[np1]
clearTimeout(ani1)
div1=1
incrTimer=setTimeout("incr1()",50) // trigger next number
}
}
}
function incr2(){
if(chk2==1){return}
if(np2==num2){
on2=0
chk2=1
rotation2()
}
else{
on2=1
rotation2()
}
}
function rotation2(){
clearTimeout(ani2)
if(div2==1){
elPos2=parseInt(el2a.style.top)
el2a.style.zIndex=2
}
else{
elPos2=parseInt(el2b.style.top)
el2b.style.zIndex=2
}
elPos2+=speed
ani2=setTimeout("rotation2()",runRate)
if(div2==1){
el2a.style.top=elPos2+"px"
el2b.style.top= elPos2+containerDiv.offsetHeight+spacer+"px"
if(elPos2>=0){
el2a.style.top=0
el2a.style.zIndex=""
el2b.style.top= -containerDiv.offsetHeight-spacer+"px"
np2++
if(np2>digit.length-1){np2=0}
el2b.src=digit[np2]
clearTimeout(ani2)
div2=2
incrTimer2=setTimeout("incr2()",50) // trigger next number
}
}
else{
el2b.style.top=elPos2+"px"
el2a.style.top= elPos2+containerDiv.offsetHeight+spacer+"px"
if(elPos2>=0){
el2b.style.top= 0
el2b.style.zIndex=""
el2a.style.top= -containerDiv.offsetHeight-spacer+"px"
np2++
if(np2>digit.length-1){np2=0}
el2a.src=digit[np2]
clearTimeout(ani2)
div2=1
incrTimer2=setTimeout("incr2()",50) // trigger next number
}
}
}
function incr3(){
if(chk3==1){return}
if(np3==num3){
on3=0
chk3=1
rotation3()
}
else{
on3=1
rotation3()
}
}
function rotation3(){
clearTimeout(ani3)
if(div3==1){
elPos3=parseInt(el3a.style.top)
el3a.style.zIndex=2
}
else{
elPos3=parseInt(el3b.style.top)
el3b.style.zIndex=2
}
elPos3+=speed
ani3=setTimeout("rotation3()",runRate)
if(div3==1){
el3a.style.top=elPos3+"px"
el3b.style.top= elPos3+containerDiv.offsetHeight+spacer+"px"
if(elPos3>=0){
el3a.style.top=0
el3a.style.zIndex=""
el3b.style.top= -containerDiv.offsetHeight-spacer+"px"
np3++
if(np3>digit.length-1){np3=0}
el3b.src=digit[np3]
clearTimeout(ani3)
div3=2
incrTimer3=setTimeout("incr3()",50) // trigger next number
}
}
else{
el3b.style.top=elPos3+"px"
el3a.style.top= elPos3+containerDiv.offsetHeight+spacer+"px"
if(elPos3>=0){
el3b.style.top= 0
el3b.style.zIndex=""
el3a.style.top= -containerDiv.offsetHeight-spacer+"px"
np3++
if(np3>digit.length-1){np3=0}
el3a.src=digit[np3]
clearTimeout(ani3)
div3=1
incrTimer3=setTimeout("incr3()",50) // trigger next number
}
}
}
function incr4(){
if(chk4==1){return}
if(np4==num4){
on4=0
chk4=1
rotation4()
}
else{
on4=1
rotation4()
}
}
function rotation4(){
clearTimeout(ani4)
if(div4==1){
elPos4=parseInt(el4a.style.top)
el4a.style.zIndex=2
}
else{
elPos4=parseInt(el4b.style.top)
el4b.style.zIndex=2
}
elPos4+=speed
ani4=setTimeout("rotation4()",runRate)
if(div4==1){
el4a.style.top=elPos4+"px"
el4b.style.top= elPos4+containerDiv.offsetHeight+spacer+"px"
if(elPos4>=0){
el4a.style.top=0
el4a.style.zIndex=""
el4b.style.top= -containerDiv.offsetHeight-spacer+"px"
np4++
if(np4>digit.length-1){np4=0}
el4b.src=digit[np4]
clearTimeout(ani4)
div4=2
incrTimer4=setTimeout("incr4()",50) // trigger next number
}
}
else{
el4b.style.top=elPos4+"px"
el4a.style.top= elPos4+containerDiv.offsetHeight+spacer+"px"
if(elPos4>=0){
el4b.style.top= 0
el4b.style.zIndex=""
el4a.style.top= -containerDiv.offsetHeight-spacer+"px"
np4++
if(np4>digit.length-1){np4=0}
el4a.src=digit[np4]
clearTimeout(ani4)
div4=1
incrTimer4=setTimeout("incr4()",50) // trigger next number
}
}
}
function resetCounter(){
total=0
chk1=0;chk2=0;chk3=0;chk4=0
last1=0;last2=0;last3=0;last4=0
on1=0;on2=0;on3=0;on4=0
np1=1;np2=1;np3=1;np4=1
el1a.src=(div1==1?digit[1]:digit[0])
el1b.src=(div1==1?digit[0]:digit[1])
el2a.src=(div2==1?digit[1]:digit[0])
el2b.src=(div2==1?digit[0]:digit[1])
el3a.src=(div3==1?digit[1]:digit[0])
el3b.src=(div3==1?digit[0]:digit[1])
el4a.src=(div4==1?digit[1]:digit[0])
el4b.src=(div4==1?digit[0]:digit[1])
}
// add onload="initCounter()" to the opening BODY tag
// -->
</script>
</HEAD>
<BODY onload="initCounter()">
<h1>Image Counter</h1>
<div style="text-align:center">
<div id="container" style="position:relative;width:120px; height:35px;overflow:hidden;margin:0 auto 0 auto">
<img name="pic4a" src="0.gif" id="pic4a" style="position:absolute; left:0px; top:0px; width:30px; height:35px">
<img name="pic4b" src="1.gif" id="pic4b" style="position:absolute; left:0px; top:-35px; width:30px; height:35px">
<img name="pic3a" src="0.gif" id="pic3a" style="position:absolute; left:30px; top:0px; width:30px; height:35px">
<img name="pic3b" src="1.gif" id="pic3b" style="position:absolute; left:30px; top:-35px; width:30px; height:35px">
<img name="pic2a" src="0.gif" id="pic2a" style="position:absolute; left:60px; top:0px; width:30px; height:35px">
<img name="pic2b" src="1.gif" id="pic2b" style="position:absolute; left:60px; top:-35px; width:30px; height:35px">
<img name="pic1a" src="0.gif" id="pic1a" style="position:absolute; left:90px; top:0px; width:30px; height:35px">
<img name="pic1b" src="1.gif" id="pic1b" style="position:absolute; left:90px; top:-35px; width:30px; height:35px">
</div>
<form name="f1">
<p>
<input type="text" name="t1" value="123" maxlength=4 size=4>
<input type="button" value="Advance" onclick="startCounter()">
<input type="button" value="Reset" onclick="resetCounter()">
</p>
</form>
</div>
Adds to the total by incrementing each number.<br>
The buttons and textbox are for this example only as the counter value can be set by a function or another variable
</BODY>
</HTML>