码迷,mamicode.com
首页 > Web开发 > 详细

js运动基础1

时间:2015-08-11 09:51:53      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

1.在这个例子里面,如果在div块运动的过程中继续点击按钮的话,速度会越来越快,所以再开另一个定时器的时候要把之前的定时器给关掉。这里timer定义的位置会影响定时器是否关闭,如果把timer定义成局部变量,那么在每一次点击的时候都会是null,那么clearInterval根本起不到关定时器的作用。所以必须把定时器定义为全局变量。

2.对于speed这个变量,不用吧他放在外面,直接作为一个局部变量就好了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 300px;
            background: #ffccdd;
            position: absolute;
        }
    </style>
</head>
<body>
<input id="btn" type="button"/>
<div id="div1">
</div>
<script>
    var oBtn = document.getElementById(btn);
    var oDiv = document.getElementById(div1);
    var timer = null;
    oBtn.onclick = function(){
//      var timer = null;
        clearInterval(timer);
        timer = setInterval(function (){
        var speed = 1;


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

    };
</script>

</body>
</html>

 

js运动基础1

标签:

原文地址:http://www.cnblogs.com/zhuni/p/4715486.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!