• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 468
  • Last Modified:

Numbers running like slot machine. Can't make them run longer

Hi Expert,

I've found a little script that does what I need. But I can't make it run longer than it does.

Two series of numbers that behave like slot machine. It is build in jquery and I'm not very familiar with jquery of javascript.

Al help is apreciated.

Steynsk

running example : http://83.96.174.170/test/slot.html


<html>
<head>
<style>
body{
background-color:white;

padding:0px;

margin:0px;

}



.outer {
	width:800px;
	float: none;
}



.slots {
	font-size:100px;
	font-family:arial,helvetica,sans-serif;
	overflow:hidden;
	width:100px;
	height:100px;
	border:1px solid black;
	float:right;
}



.slots .wrapper{

	margin-top:-6px;

	width:100px;

}



.slots .slot{

	width:100px;

	height:100px;

	text-align:center;

}

</style>

<script>



//note parseInt

//note stop



var opts1 = ['0','1','2','3','4','5','6','7','8','9'];

var opts2 = ['0','1','2','3','4'];









function go(){

	addSlots1($("#slots_a .wrapper"));

	moveSlots($("#slots_a .wrapper"));

	addSlots2($("#slots_b .wrapper"));

	moveSlots($("#slots_b .wrapper"));

	addSlots($("#slots_c .wrapper"));

	moveSlots($("#slots_c .wrapper"));

	addSlots($("#slots_d .wrapper"));

	moveSlots($("#slots_d .wrapper"));

}



$(document).ready(

function(){

	addSlots($("#slots_a .wrapper"));

	addSlots($("#slots_b .wrapper"));

	addSlots($("#slots_c .wrapper"));

	addSlots($("#slots_d .wrapper"));

}		

);





function addSlots1(jqo){

	for(var i = 0; i < 300; i++){

		var ctr = Math.floor(Math.random()*opts1.length);

		jqo.append("<div class='slot'>"+opts1[ctr]+"</div>");



		

	}

}



function addSlots2(jqo){

	for(var i = 0; i < 300; i++){

		var ctr = Math.floor(Math.random()*opts2.length);

		jqo.append("<div class='slot'>"+opts2[ctr]+"</div>");



		

	}

}



function moveSlots(jqo){

		var time = 6500;

		time += Math.round(Math.random()*8000);

	jqo.stop(true,true);



		var marginTop = parseInt(jqo.css("margin-top"), 10)

		

		marginTop -= (7 * 100)

		

	jqo.animate(

		{"margin-top":marginTop+"px"},

		{'duration' : time, 'easing' : "easeOutElastic"});



}

</script>
<script>
if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    go();
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};
</script>
</head>
<body>
<script src="jquery.1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<div class="outer">

<div class="slots"  id="slots_a">
  <div class="wrapper" ></div>
</div>
<div class="slots"  id="slots_b">
  <div class="wrapper" ></div>
</div>
<div>
<p align="center">Push enter to start</p>
</div>
</body>

</html>

Open in new window

0
Steynsk
Asked:
Steynsk
1 Solution
 
GaryCommented:
function moveSlots(jqo){

		var time = 5000; // Play around with this

		time += Math.round(Math.random()*8000);

	jqo.stop(true,true);

		var marginTop = parseInt(jqo.css("margin-top"), 10)

		marginTop -= (10000) // And play around with this

	jqo.animate(

		{"margin-top":marginTop+"px"},

		{'duration' : time, 'easing' : "easeOutElastic"});
}

Open in new window

0
 
SteynskAuthor Commented:
thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now