JS笔记3-笔记整理自智能社JS教程
2016-07-02 19:16
399 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
</style>
<script>
function startMove()
{
var oDiv = document.getElementById("div1");
setInterval(function(){
var speed = 10;
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始移动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>==1. 运动基础==
让Div动起来
速度——物体运动的快慢
运动中的Bug
1.一直运动 不会停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
</style>
<script>
var timer = null;
function startMove()
{
var oDiv = document.getElementById("div1");
timer = setInterval(function(){
var speed = 10;
if(oDiv.offsetLeft == 300)
{
clearInterval(timer);
}
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始移动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>2.速度取某些值会无法停止
当距离无法整除速度时， 将无法停止，offsetLeft的值不会刚好等于300，也就不会停止。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
</style>
<script>
var timer = null;
function startMove()
{
var oDiv = document.getElementById("div1");
timer = setInterval(function(){
var speed = 10;
if(oDiv.offsetLeft >= 300) // 改为>=
{
clearInterval(timer);
}
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始移动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>3.到达位置后再点击还会运动
当div停住以后，点击按钮后div还会动一下，因为定时器下一次才关闭，但当前的oDiv.style.left = oDiv.offsetLeft + speed + ‘px’;还是会执行一次。
解决办法：if语句跟else分别处理不同情况，隔开。把运动和停止隔开(if/else)：运动指到达指定位置前，而停止是到达指定位置后，所以这两部分不应该同时执行，要分开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
</style>
<script>
var timer = null;
function startMove()
{
var oDiv = document.getElementById("div1");
timer = setInterval(function(){
var speed = 10;
if(oDiv.offsetLeft >= 300)
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始移动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>4.重复点击速度加快
多次点击按钮时，div移动速度加快---相当于开了多个定时器。
解决方法：清除定时器，保证每次只有一个定时器工作。在开始运动时，关闭已有定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0;}
</style>
<script>
var timer = null;
function startMove()
{
var oDiv = document.getElementById("div1");
clearInterval(timer); //将其它定时器关掉！
timer = setInterval(function(){
var speed = 10;
if(oDiv.offsetLeft >= 300)
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始移动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>```
==2. 运动框架==
**运动框架实例**
演示地址：==点击打开演示地址
ps:可能反应较慢，请多多包涵。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐