您的位置：首页 > Web前端 > JavaScript

10个小球随机动

2016-07-14 11:41 495 查看

<h1>javascript编写<p>
<h5><!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

.body{
background-color:rgb(207,252,224);
width:1000px;
height:600px;
border:3px solid rgb(24,24,24);
}
.circle{
width:50px;;
height:50px;
background-color:rgb(100,23,155);
border-radius:25px;
left:0px;
top:0px;
position:absolute;
box-shadow:5px 5px 5px rgb(107,95,95);
}
.btn{
width:100px;
height:50px;
background-color:rgb(50,100,100);
box-shadow:5px 5px 5px rgb(107,95,95)
}
</style>

</head>
<body>

<div class="body">
<div class="circle" name="t1"></div>
<div class="circle" name="t1" style="background-color:red;"></div>
<div class="circle" name="t1" style="background-color:green;"></div>
<div class="circle" name="t1" style="background-color:gray;"></div>
<div class="circle" name="t1" style="background-color:#0ff;"></div>
<div class="circle" name="t1" style="background-color:#e0a;"></div>
<div class="circle" name="t1" style="background-color:#d5e;"></div>
<div class="circle" name="t1" style="background-color:#a3a;"></div>
<div class="circle" name="t1" style="background-color:#d5b;"></div>
<div class="circle" name="t1" style="background-color:#ccc;"></div>
</div>
<button onclick="startgun()" class="btn">开始滚动</button>
<script type="text/javascript">
var x=[0,0,0,0,0,0,0,0,0,0];
var xstep=[15,15,5,15,15,15,15,65,5,5];
var y=[0,0,0,0,0,0,0,0,0,0];
var ystep=[15,15,5,15,5,15,5,15,5,5];
var a=document.getElementsByName("t1");
for(var i=0;i<10;i++){
x[i]=Math.random()*200;
y[i]=Math.random()*600;
a[i].style.left=xstep[i]+"px";
a[i].style.top=ystep[i]+"px";
}
function aaa(){
//var a=document.getElementsByName("t1");
for(var i=0;i<10;i++){
x[i]=x[i]+xstep[i];
a[i].style.left=x[i]+"px";
y[i]=y[i]+ystep[i];
a[i].style.top=y[i]+"px";
}
for(var j=0;j<10;j++){
if(x[j]>=950)
{
xstep[j]=-10;

}
if(x[j]<=0){
xstep[j]=10;
}

if(y[j]>=550)
{
ystep[j]=-10;
}
if(y[j]<=0)
{
ystep[j]=10;
}
}
}
function startgun(){
var th=window.setInterval("aaa()",50);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航