<HTML>
<HEAD>
<TITLE>Counter - Text</TITLE>
<script type="text/javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk
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
div_1=2;div_2=2;div_3=2;div_4=2
next1=1;next2=1;next3=1;next4=1 // next pic
ani_1="";ani_2="";ani_3="";ani_4=""
function initCounter(){
containerDiv=document.getElementById("container")
el_1a=document.getElementById("div1_a") ; el_1b=document.getElementById("div1_b")
el_2a=document.getElementById("div2_a") ; el_2b=document.getElementById("div2_b")
el_3a=document.getElementById("div3_a") ; el_3b=document.getElementById("div3_b")
el_4a=document.getElementById("div4_a") ; el_4b=document.getElementById("div4_b")
}
function startCounter(){
if(on1==1||on2==1||on3==1||on4==1){return}
char1=0;char2=0;char3=0;char4=0;
count=document.f1.t1.value // counter value
if(isNaN(count)){ // comment out if not using textbox document.f1.t1.value
document.f1.t1.select() // comment out if not using textbox document.f1.t1.value
return} // comment out if not using textbox document.f1.t1.value
total=(total*1)+(count*1)
total=total.toString()
if(total.length>=4){
char4=total.charAt(total.length-4)
chk4=0
if(char4!=last4){incr4()}
last4=char4
on4=0
}
if(total.length>=3){
char3=total.charAt(total.length-3)
chk3=0
if(char3!=last3){incr3()}
last3=char3
on3=0
}
if(total.length>=2){
char2=total.charAt(total.length-2)
chk2=0
if(char2!=last2){incr2()}
last2=char2
on2=0
}
if(total.length>=1){
char1=total.charAt(total.length-1)
chk1=0
if(char1!=last1){incr1()}
last1=char1
on1=0
}
}
function incr1(){
if(chk1==1){return}
if(next1==char1){
on1=0
chk1=1
rotation1()
}
else{
on1=1
rotation1()
}
}
function rotation1(){
clearTimeout(ani_1)
if(div_1==1){
el_pos=parseInt(el_1a.style.top)
el_1a.style.zIndex=2
}
else{
el_pos=parseInt(el_1b.style.top)
el_1b.style.zIndex=2
}
el_pos+=speed
ani_1=setTimeout("rotation1()",runRate)
if(div_1==1){
el_1a.style.top=el_pos
el_1b.style.top= el_pos+containerDiv.offsetHeight+spacer
if(el_pos>=0){
el_1a.style.top=0
el_1a.style.zIndex=""
el_1b.style.top= -containerDiv.offsetHeight-spacer
next1++
if(next1>9){next1=0}
el_1b.innerHTML=next1
clearTimeout(ani_1)
div_1=2
incr_timer=setTimeout("incr1()",50) // trigger next number
}
}
else{
el_1b.style.top=el_pos
el_1a.style.top= el_pos+containerDiv.offsetHeight+spacer
if(el_pos>=0){
el_1b.style.top= 0
el_1b.style.zIndex=""
el_1a.style.top= -containerDiv.offsetHeight-spacer
next1++
if(next1>9){next1=0}
el_1a.innerHTML=next1
clearTimeout(ani_1)
div_1=1
incr_timer=setTimeout("incr1()",50) // trigger next number
}
}
}
function incr2(){
if(chk2==1){return}
if(next2==char2){
on2=0
chk2=1
rotation2()
}
else{
on2=1
rotation2()
}
}
function rotation2(){
clearTimeout(ani_2)
if(div_2==1){
el_pos2=parseInt(el_2a.style.top)
el_2a.style.zIndex=2
}
else{
el_pos2=parseInt(el_2b.style.top)
el_2b.style.zIndex=2
}
el_pos2+=speed
ani_2=setTimeout("rotation2()",runRate)
if(div_2==1){
el_2a.style.top=el_pos2
el_2b.style.top= el_pos2+containerDiv.offsetHeight+spacer
if(el_pos2>=0){
el_2a.style.top=0
el_2a.style.zIndex=""
el_2b.style.top= -containerDiv.offsetHeight-spacer
next2++
if(next2>9){next2=0}
el_2b.innerHTML=next2
clearTimeout(ani_2)
div_2=2
incr_timer2=setTimeout("incr2()",50) // trigger next number
}
}
else{
el_2b.style.top=el_pos2
el_2a.style.top= el_pos2+containerDiv.offsetHeight+spacer
if(el_pos2>=0){
el_2b.style.top= 0
el_2b.style.zIndex=""
el_2a.style.top= -containerDiv.offsetHeight-spacer
next2++
if(next2>9){next2=0}
el_2a.innerHTML=next2
clearTimeout(ani_2)
div_2=1
incr_timer2=setTimeout("incr2()",50) // trigger next number
}
}
}
function incr3(){
if(chk3==1){return}
if(next3==char3){
on3=0
chk3=1
rotation3()
}
else{
on3=1
rotation3()
}
}
function rotation3(){
clearTimeout(ani_3)
if(div_3==1){
el_pos3=parseInt(el_3a.style.top)
el_3a.style.zIndex=2
}
else{
el_pos3=parseInt(el_3b.style.top)
el_3b.style.zIndex=2
}
el_pos3+=speed
ani_3=setTimeout("rotation3()",runRate)
if(div_3==1){
el_3a.style.top=el_pos3
el_3b.style.top= el_pos3+containerDiv.offsetHeight+spacer
if(el_pos3>=0){
el_3a.style.top=0
el_3a.style.zIndex=""
el_3b.style.top= -containerDiv.offsetHeight-spacer
next3++
if(next3>9){next3=0}
el_3b.innerHTML=next3
clearTimeout(ani_3)
div_3=2
incr_timer3=setTimeout("incr3()",50) // trigger next number
}
}
else{
el_3b.style.top=el_pos3
el_3a.style.top= el_pos3+containerDiv.offsetHeight+spacer
if(el_pos3>=0){
el_3b.style.top= 0
el_3b.style.zIndex=""
el_3a.style.top= -containerDiv.offsetHeight-spacer
next3++
if(next3>9){next3=0}
el_3a.innerHTML=next3
clearTimeout(ani_3)
div_3=1
incr_timer3=setTimeout("incr3()",50) // trigger next number
}
}
}
function incr4(){
if(chk4==1){return}
if(next4==char4){
on4=0
chk4=1
rotation4()
}
else{
on4=1
rotation4()
}
}
function rotation4(){
clearTimeout(ani_4)
if(div_4==1){
el_pos4=parseInt(el_4a.style.top)
el_4a.style.zIndex=2
}
else{
el_pos4=parseInt(el_4b.style.top)
el_4b.style.zIndex=2
}
el_pos4+=speed
ani_4=setTimeout("rotation4()",runRate)
if(div_4==1){
el_4a.style.top=el_pos4
el_4b.style.top= el_pos4+containerDiv.offsetHeight+spacer
if(el_pos4>=0){
el_4a.style.top=0
el_4a.style.zIndex=""
el_4b.style.top= -containerDiv.offsetHeight-spacer
next4++
if(next4>9){next4=0}
el_4b.innerHTML=next4
clearTimeout(ani_4)
div_4=2
incr_timer4=setTimeout("incr4()",50) // trigger next number
}
}
else{
el_4b.style.top=el_pos4
el_4a.style.top= el_pos4+containerDiv.offsetHeight+spacer
if(el_pos4>=0){
el_4b.style.top= 0
el_4b.style.zIndex=""
el_4a.style.top= -containerDiv.offsetHeight-spacer
next4++
if(next4>9){next4=0}
el_4a.innerHTML=next4
clearTimeout(ani_4)
div_4=1
incr_timer4=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
next1=1;next2=1;next3=1;next4=1
el_1a.innerHTML=(div_1==1?1:0)
el_1b.innerHTML=(div_1==1?0:1)
el_2a.innerHTML=(div_2==1?1:0)
el_2b.innerHTML=(div_2==1?0:1)
el_3a.innerHTML=(div_3==1?1:0)
el_3b.innerHTML=(div_3==1?0:1)
el_4a.innerHTML=(div_4==1?1:0)
el_4b.innerHTML=(div_4==1?0:1)
}
// add onload="initCounter()" to the opening BODY tag
// -->
</script>
</HEAD>
<BODY onload="initCounter()">
<h1>Text Counter</h1>
<div id="container" style="position:absolute;left:280px;top:80px;width:120px;height:50px;clip:rect(0,120,50,0);font-size:50px">
<div id="div4_a" style="position:absolute; left:0px; top:0px; width:30px; height:50px">0</div>
<div id="div4_b" style="position:absolute; left:0px; top:-50px; width:30px; height:50px">1</div>
<div id="div3_a" style="position:absolute; left:30px; top:0px; width:30px; height:50px">0</div>
<div id="div3_b" style="position:absolute; left:30px; top:-50px; width:30px; height:50px">1</div>
<div id="div2_a" style="position:absolute; left:60px; top:0px; width:30px; height:50px">0</div>
<div id="div2_b" style="position:absolute; left:60px; top:-50px; width:30px; height:50px">1</div>
<div id="div1_a" style="position:absolute; left:90px; top:0px; width:30px; height:50px">0</div>
<div id="div1_b" style="position:absolute; left:90px; top:-50px; width:30px; height:50px">1</div>
</div>
<br><br><br><br><br><br><br>
<center>
<form name="f1">
<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()">
</form>
</center>
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>