<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>
10個小球隨機動—javascript學習（1）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章