js小鸟起飞-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73301498/article/details/127433725

3.小鸟起飞
3.1开始飞
需求：点击开始飞按钮小鸟往右飞，飞到1000px的位置停止
==问题1：点击开始起飞越点小鸟飞的越快==
分析：定时器累加的问题
解决：每次声明定时器之前先清除原先的定时器
<body>
    <button>开始飞</button> <br>
    < img src="./img/right.gif" alt="">
    <script>
        /*
            问题1：点击开始起飞越点越快
            分析：定时器累加的问题
            解决：每次声明定时器之前先清除原先的定时器
        */
        var btn = document.getElementsByTagName("button");
        var oImg = document.getElementsByTagName("img")[0];
        var timer;
        //1.点击开始起飞
        btn[0].onclick = function () {
            //建议：但凡是牵扯到元素移动的建议使用定义偏移量(left right bottom top);
            //4.清除定时器
            clearInterval(timer);
            //2.添加定时器
            timer = setInterval(function () {
                //想在left值的基础上+10 如何获取left值
                var current = parseInt(getStyle(oImg, "left")) + 10;//当前的left值
                //3.运动到1000px停止
                if (current >= 1000) {
                    current = 1000;
                    //清除定时器
                    clearInterval(timer);
                }
                oImg.style.left = current + "px";
            }, 50)
        }
    </script>
</body>