您的位置：首页 > 其它

运动基础

2016-07-11 08:15 176 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="utf-8"
/>
<title></title>
<style
type="text/css">
#div1
{
width:
200px;
height:
200px;
background-color: red;
position:
absolute;
top:
50px;
left:
0;
}
</style>
</head>

<body>
<input
type="button"
name="btn1" id="btn1"
value="开始运动" />
<div
id="div1">

</div>
<script
type="text/javascript">
// 运动
// 获取这两个元素
var
oBtn = document.getElementById("btn1");
var
oDiv = document.getElementById("div1");

// 事件绑定
oBtn.onclick
= function() {
startMove();
};

// 让div运动的函数
// 匀速运动
var
timer = null;
function
startMove() {
var
speed = 7;
clearInterval(timer);
timer
= setInterval(function() {
if
(oDiv.offsetLeft >= 300) {
clearInterval(timer);
}
else {
oDiv.style.left
= oDiv.offsetLeft + speed
+ 'px';
}

},
20);
}

// 问题1 ：停不下来？
// 解决办法：写个if

// 问题2 ：速度慢一点
// 解决办法：改变speed的值

// 问题3 ：如果速度为7，停不下来
// 解决办法：改成 >= 300(潜在问题：停在301位置)

// 问题4 ：再点击还往后走
// 解决办法：写个else

// 问题5 ：多次点击加速问题
// 解决办法：在开定时器之前，把前一次的定时器关掉
</script>
</body>

</html>

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

标签： 运动基础

相关文章推荐

新的分享

章节导航