运动的基础是先让一个东西动起来;

其实就是开一个setInterval;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px;height: 200px;background: red;position: absolute;top:50px;left: 0;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBtn=document.getElementById("btn1")
oBtn.onclick=function(){
setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+10+"px"
},30)
}
}
</script>
</head>
<body>
<input id="btn1" type="button"value="运动" >
<div id="div1"></div>
</body>
</html>

如果想让他动。可以用下面的代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px;height: 200px;background: red;position: absolute;top:50px;left: 0;}
</style>
<script>
function startMove(){
var oDiv=document.getElementById("div1");
var oBtn=document.getElementById("btn1");
var timer=null;//储存定时器
var speed=7;//储存定时器的速度

timer=setInterval(function(){
if(oDiv.offsetLeft<=300)
{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
else
{
clearInterval(timer);
}
},30);

}
</script>
</head>
<body>
<input id="btn1" type="button"value="运动" onclick="startMove()" >
<div id="div1"></div>
</body>
</html>

上面的代码,在连续点击按钮的时候,就会越来越快的运动,因为点击一次,就开了一次定时器。点的越多,开的定时器也越多;为了让他保持匀速运动,需要在点击按钮之前,关闭一些定时器。

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></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写在函数里,这行代码就无效了。;
timer=setInterval(function(){
var speed=1;
if(oDiv.offsetLeft<=300)
{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
else
{
clearInterval(timer);
}
},30);
}
</script>
</head>
<body>
<input id="btn1" type="button"value="运动" onclick="startMove()" >
<div id="div1"></div>
</body>
</html>

要点总结:

  • 可以在超出某个范围后停止
  • 重复点击速度加快,(定时器可以开关,让每次点击只有一个定时器开启)

经验总结:

  • 如果开一个运动定时器前,要关闭这个定时器,当时执行多个同一定时器;
  • 运动和停止需要用if/else来隔开。

这个就是运动框架的基础;1、关闭定时器;2、if/else

“““