Random Number Spinner

Press the button to start the numbers spinning, when they stop the number shown is the selected number.
This number is then eliminated from the list.

You can use image or text numbers, the script automatically adjusts for which type is used.
If the variable range is set to zero the images in the array are used, you can add any number of images to this array.
To use text numbers set the variable range to the maximum number required.

You can set how many numbers are selected at variable howMany, this is currently set to 5.

The numbers spin for a randomly generated length of time, the slowdown speed is also randomly generated, both these values can be change within function setStopTime if required.

<HTML>

<HEAD>
<TITLE>Random Number Spinner</TITLE>

<script type="text/javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk

range=10 // range of number to generate, set to zero if using image numbers
howMany=5 // how many number to chose

data=new Array()

if(range==0){ // use images
data[0]='<img src="0.gif">'
data[1]='<img src="1.gif">'
data[2]='<img src="2.gif">'
data[3]='<img src="3.gif">'
data[4]='<img src="4.gif">'
data[5]='<img src="5.gif">'
data[6]='<img src="6.gif">'
data[7]='<img src="7.gif">'
data[8]='<img src="8.gif">'
data[9]='<img src="9.gif">'

var preloaded=new Array()
for (var i=0;i<data.length;i++){
preloaded[i]=new Image()
preloaded[i].src=data[i]
}

}
else{ // use text

for(var i=0;i<range;i++){ // create text numbers
data[i]=i+1
}

}

count=0
pause=5
spacer=0
speed=10
divNum=1
firstRun=1
runRate=50
aniDown=""
nextDown=""
slowspeed=speed

function genNums(){
temp=new Array()

for(var i=0;i<data.length;i++){
temp[i]=data[i]
}

if(firstRun!=1){
document.getElementById("butt").disabled=false
}

running=0
firstRun=1
nextNum=0
count=howMany
}

function preChk(){
document.getElementById("butt").disabled=true

if(howMany>temp.length){
howMany=temp.length
}

if(count==0){
return
}

count--

elCenter=document.getElementById("center_div")
elOne=document.getElementById("div_one")
elTwo=document.getElementById("div_two")

if(firstRun==1){
document.getElementById("div_one").innerHTML=temp[0]
firstRun=0
}

if(running==1){
return
}

running=1

if(nextNum>temp.length-1){
nextNum=0
}

if(divNum==1){
document.getElementById("div_one").innerHTML=temp[nextNum]
elOne.style.top= -elCenter.offsetHeight-spacer
elOne.style.left=0
divNum=1
}

if(divNum==2){
document.getElementById("div_two").innerHTML=temp[nextNum]
elTwo.style.top= -elCenter.offsetHeight-spacer
elTwo.style.left=0
divNum=2
}

speed=slowspeed
scrollDown()
setStopTime()

}

function scrollDown(){
if(divNum==1){
elPos=parseInt(elOne.style.top)
elOne.style.zIndex=2
}
else{
elPos=parseInt(elTwo.style.top)
elTwo.style.zIndex=2
}

elPos+=speed
aniDown=setTimeout("scrollDown()",runRate)

if(divNum==1){
elOne.style.top=elPos
elTwo.style.top= elPos+elCenter.offsetHeight+spacer

if(elPos>=0){
elOne.style.top=0
elOne.style.zIndex=""
elTwo.style.top= -elCenter.offsetHeight-spacer
nextNum++

if(nextNum>temp.length-1){
nextNum=0
}

document.getElementById("div_two").innerHTML=temp[nextNum]
clearTimeout(aniDown)

if(running==1&&temp.length!=1){
nextDown=setTimeout("scrollDown()",pause)
}

divNum=2

}

}
else{

elTwo.style.top=elPos
elOne.style.top= elPos+elCenter.offsetHeight+spacer

if(elPos>=0){
elTwo.style.top= 0
elTwo.style.zIndex=""
elOne.style.top= -elCenter.offsetHeight-spacer
nextNum++

if(nextNum>temp.length-1){
nextNum=0
}

document.getElementById("div_one").innerHTML=temp[nextNum]
clearTimeout(aniDown)

if(running==1&&temp.length!=1){
nextDown=setTimeout("scrollDown()",pause)
}

divNum=1
}

}

}

function setStopTime(){
if(temp.length==1){return}
stopTime=parseInt(100+Math.random()*100) // time to begin slowing
stopStep=(0.450+Math.random()*0.550).toFixed(4) // amount to slow by
setTimeout("slowdown()",stopTime)
}

function slowdown(){
speed=speed-stopStep
sd=setTimeout("slowdown()",stopTime)

if(speed<=2){
speed=2
running=0
clearTimeout(sd)

if(count!=0){
setTimeout("document.getElementById(\"butt\").disabled=false",1000+stopTime)
}

temp.splice(nextNum--,1)
}

}

genNums()

// -->
</script>
</HEAD>
<BODY>
<h1>Random Number Spinner</h1>

<center>

<table border="0" width=80 height="120">
<tr>
<td valign="top" width=75 height=75>

<div id="border_div" style="position:absolute;width:70px; height:75px;border:2px solid #8e8462">

<div id="div_one" style="position:absolute; left:0px; top:0px;width:66px;text-align:center"> </div>
<div id="div_two" style="position:absolute; left:0px; top:-30px;width:66px;text-align:center"> </div>

</div>

</div>

</td>
</tr>
<tr>
<td align="center">
<button id="butt" onclick="preChk()">Spin</button><BR><BR>
<button onclick="genNums()">Reset</button>
</td>
</tr>
</table>

</center>

</BODY>
</HTML>