now that all li tracks are the same, how to make each li track move randomly? And it won"t slide around the edge all the time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;}
li{height:100px;width:100px;background:red;position:absolute;}
/**/
</style>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var odiv=document.getElementById("div");
var ali=odiv.getElementsByTagName("li");
var speedx=Math.floor(Math.random()*15 + 5);
var speedy=Math.floor(Math.random()*18 + 8);
var t=null;
btn.onclick=function(){
clearInterval(t);
t=setInterval(function(){
for(var i=0; i<ali.length; iPP){
var l=ali[i].offsetLeft+speedx;
var t=ali[i].offsetTop+speedy;
if(l>=document.documentElement.clientWidth-ali[i].offsetWidth){
speedx*=-1;
l=document.documentElement.clientWidth-ali[i].offsetWidth;
}else if(l<=0){
speedx*=-1;
l=0;
}
if(t>=document.documentElement.clientHeight-ali[i].offsetHeight){
speedy*=-1;
t=document.documentElement.clientHeight-ali[i].offsetHeight;
}else if(t<=0){
speedy*=-1;
t=0;
}
ali[i].style.left=l+"px";
ali[i].style.top=t+"px";
}
},10);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="">
<div id="div">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>