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

37、JavaScript的运动-----匀速运动

2016-06-20 15:40 239 查看
1、运动基础
     • 让Div运动起来
     • 速度——物体运动的快慢
     • 运动中的Bug
         –  不会停止
         –  速度取某些值会无法停止
         –  到达位置后再点击还会运动
         –  重复点击速度加快
2、匀速运动
     • 速度不变
3、运动的原理

     • 在开始运动时，关闭已有定时器
     • 把运动和停止隔开(if/else)

4、匀速运动的代码
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>运动1</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
position: absolute;
background: red;
left: 0;
top: 50px;
}
</style>
<script type="text/javascript">
var timer = null;

function startMove() {
var oDiv = document.getElementById('div1');
/**
* 在开始运动前,先清除定时器
* 防止多次点击按钮，开多个定时器函数
* 因为定时器函数为异步的，这样的话速度会变快
*/
clearInterval(timer);
/**
* 用于实现运动的定时器函数
*/
timer = setInterval(function() {
/**
* 因为速度固定，所以是匀速运动
*/
var iSpeed = 7;
/**
* 使用if和else，用于区别是否到达终点
*/
if (oDiv.offsetLeft >= 300) //是否到达终点,
{
//速度为7为301,所以判断条件用oDiv.offsetLeft >= 300，>=
clearInterval(timer); //到达终点
} else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; //到达之前
}
}, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JavaScript JavaScript的运动 DIV的运动
相关文章推荐
新的分享
章节导航