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

javascript运动的小Tip。

2015-06-27 21:37 627 查看
定时器运用

　　setInterval（function，1000)每隔1000毫秒执行一次function
　　setTimeout（function，1000）隔1000毫秒执行function（执行一次function）
　　clearInterval（） clearTimeout（）关闭定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>move</title>
<style type="text/css">
#c{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
var timer=null;
function move ( ) {
var oDiv=document.getElementById("c");
clearInterval(timer);
timer=setInterval(function   ( ) {
var speed=5;
if(oDiv.offsetLeft>300){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="move()">
<div id="c"></div>
</body>
</html>


技巧：

　　先开启定时器，再关闭定时器。如果事先关闭定时器，点击就会再次新建定时器，多个定时器同时工作，物体运动会加速。
　　把运动和停止隔开。如果只使用if，不使用else。在判断大小时候就会再次执行一次运动。

　　setInterval(function ( ) {left=offsetLeft+speed;} ,30)

　　调节速度大小时候，应该调节speed大小。30变大的时候会让这个这个运动变“卡”。

　　div.style.left和div.style.offsetLeft区别

　　div.style.left 返回的是字符串，如28px，div.style.offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。

　　style.left是读写的，offsetLeft是只读的。

　　offsetLeft好像更有性格，哈哈。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航