极客观点
项目管理
HarmonyOS
现在是所有li运动轨迹一样，请问怎么让每个li运动轨迹不同随机移动？并且后面不会一直在边缘滑来滑去
<!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; i++){
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>
这两个随机值总共才取了一次，所以每个 li 的位移值都是一样的。你应该放在循环里。