if I don't know how many DIV, how I can check each DIV's speed without a LOOPThere are different kinds of loops. Take a closer look at yours:
var speed=10,20,30,40,50,60,70,80,90,100,110,120,130,140,150
function fly()
{counter++
for (var x=1;x<15;x++){
if ((counter % speed[x])==0)
moveDIV(eval("elm"+x))
}
setTimeout("fly()",1)
}
What happens when the function is called for the first time? You loop 15 times doing useless (i.e. nothing flies) division and addition. What happens on the second call? Same thing, 15 times... and then again and again and again, until counter hits 10. 150 iterations for one step of one div.
Here, knock yourself out:
<html>
<head>
<script type="text/javascript">
var maxspeed = 5;
var minspeed = 1;
var counter = maxspeed;
var flyers = new Array(0);
function rand(max)
{
return Math.floor((Math.random() * max));
}
function Flyer(div)
{
this.div = div;
this.x = rand(600);
this.y = rand(400);
this.dx = rand(1) ? 2 : -2;
this.dy = rand(1) ? 2 : -2;
this.speed = rand(maxspeed) + 1;
}
function createDivs(maxcnt)
{
var body = document.getElementsByTagName("body").item(0);
var div;
var colors = new Array("red", "green", "blue", "black", "yellow", "magenta", "white", "cyan", "orange", "olive", "purple", "fuchsia", "lime", "navy", "aqua", "teal", "silver", "gray");
for(var index = 0; index < maxcnt; index++) {
div = document.createElement("div");
div.style.backgroundColor = colors[rand(colors.length)];
body.appendChild(div);
flyers.push(new Flyer(div));
}
window.setTimeout(moveDivs, 10);
}
function moveDivs()
{
var flyer;
for(var index = 0; index < flyers.length; index++) {
flyer = flyers[index];
if(flyer.speed < counter)
continue;
flyer.x += flyer.dx;
flyer.y += flyer.dy;
if(flyer.x <= 0) {
flyer.x = 0;
flyer.dx *= -1;
}
if(flyer.x >= 550) {
flyer.x = 550;
flyer.dx *= -1;
}
if(flyer.y <= 0) {
flyer.y = 0;
flyer.dy *= -1;
}
if(flyer.y >= 350) {
flyer.y = 350;
flyer.dy *= -1;
}
flyer.div.style.left = flyer.x;
flyer.div.style.top = flyer.y;
}
if(counter-- == minspeed)
counter = maxspeed;
window.setTimeout(moveDivs, 10);
}
</script>
<style type="text/css">
div {position: absolute; top: 0; left: 0; width: 50px; height: 50px; border: 1px solid #999;}
</style>
</head>
<body onload="createDivs(50)">
<div style="width: 600px; height: 400px; border: 1px solid #999;"></div>
</body>
</html>
This code isn't optimized, but you get the idea.
IE renders these divs smoother and uses about 5% of CPU. FF does not such a good job and slower divs move not as smoothly and FF uses about 25% of CPU.
J.D.