CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*設置樣式*/
#rect{
width: 75px;
height: 75px;
/*設置為圓形*/
border-radius:100%;
background-color: #FF0000;
position: fixed;
}
</style>
<!--引用JS代碼-->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="rect"></div>
</body>
</html>
JS代碼
// JS是弱語言類型轩拨，一個變量可以賦任意類型
var rect;
var x=0,y=0,speedX=5,speedY=5;
window.onload = function(){
rect = document.getElementById("rect");
setInterval(moveRect,50);
}
function moveRect(){
x+=speedX;
y+=speedY;
//超出左邊距
if(x<0){
speedX = Math.abs(speedX);
}
//超出上邊距
if(y<0){
speedY = Math.abs(speedY);
}
// 超出右邊距
if(x>window.innerWidth - 75){
speedX = -Math.abs(speedX);
}
//超出下邊距
if(y>window.innerHeight - 75){
speedY = -Math.abs(speedY);
}
rect.style.left=x+"px";
rect.style.top=y+"px";
}
效果圖
效果圖
