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

javaScript实现小球碰撞

2017-08-29 19:10 417 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">
<title></title>
<style type="text/css">
.room{
width: 500px;
height: 500px;
border: 1px solid black;
}
.ball{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
margin-top: 200px;
text-align: center;
}
</style>

</head>

<body>

<div class="room">
<div class="ball"></div>

</div>

</body>

<script type="text/javascript">

//获取元素
var ball=document.getElementsByClassName('ball')[0];
//定义一个初始值
var left=0;
//定义一个速度
var speed=2;
//定义一个定时器动态改变属性

var timer=setInterval(function(){
left+=speed;
if(left==400||left==0){

speed=speed*-1;
}
ball.style.marginLeft=left+"px";
},30);

</script>

</html>

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

标签： javascript

相关文章推荐

新的分享

章节导航