javascript

最新推荐文章于 2023-10-17 10:49:12 发布

qianqian0707

最新推荐文章于 2023-10-17 10:49:12 发布

阅读量61

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/qianqian0707/article/details/126693387

版权

该篇博客通过JavaScript详细讲解了如何实现小鸟从左往右、从右往左飞行的效果，包括限制飞行范围、解决速度过快问题。同时，博主对代码进行了封装，创建了通用的移动函数。文章涵盖了定时器的使用、事件处理和CSS定位等前端开发技术。

摘要由CSDN通过智能技术生成

2.小鸟起飞案例

==js中如果涉及到元素移动建议大家使用定位==

2.1开始起飞(从左往右飞)

实现步骤
- 点击按钮改变img的left值
- left值 = 在当前left值的基础上 + 10
- 开启定时器自动移动图片位置

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./common.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0px;
        }
    </style>
</head>

<body>
    <button>开始飞</button>
    <br>
    <img src="./img/right.gif" alt="">
    <script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button")[0];
        var oImg = document.getElementsByTagName("img")[0];
        // 2.点击事件
        btn.onclick = function () {

            setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                oImg.style.left = current + "px";
            }, 50)

        }
    </script>

</body>

问题1 一直飞飞出屏幕
- 解决: 限制飞的范围当飞到1000px的手停止定时器

// 2.点击事件
        btn.onclick = function () {

           var timer =  setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                if(current>=1000){
                    current = 1000;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                oImg.style.left = current + "px";
            }, 50)

        }

问题2 多次点击速度越来愉快
- 分析原因: 每次点击都会定义一个定时器多次点击会导致定时器累加会累加执行
- 解决方法:每次点击的时候先把原先的定时器清除掉

<script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button")[0];
        var oImg = document.getElementsByTagName("img")[0];
        
        var timer;
        // 2.点击事件
        btn.onclick = function () {
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer =  setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                if(current>=1000){
                    current = 1000;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                oImg.style.left = current + "px";
            }, 50)
        }
    </script>

2.2来回飞(从右往左飞)

实现步骤
- 在left值的基础上 -10
问题1:解决目标值的问题飞到0就停止

 // 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";
          
            timer =  setInterval(function () {
                // 在当前left值的基础上-10
                var current = parseInt(getStyle(oImg, "left")) - 10;
                //判断目标值
                if(current<=0){
                    current=0;
                    clearInterval(timer);
                }
                oImg.style.left = current + "px"
            }, 50)

        }

问题1 如果点击开始起飞但是飞到一半就返回和越飞越快的问题
解决方法让开始起飞和结束起飞共用一个定时器每次点击的时候都清除定时器

<script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button");
        var oImg = document.getElementsByTagName("img")[0];

        var timer;
        // 2.开始飞
        btn[0].onclick = function () {
            // 改变图片路径
            oImg.src = "./img/right.gif";
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(oImg, "left")) + 10
                if (current >= 1000) {
                    current = 1000;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                oImg.style.left = current + "px";
            }, 50)
        }

        // 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";
            clearInterval(timer);
            timer =  setInterval(function () {
                // 在当前left值的基础上-10
                var current = parseInt(getStyle(oImg, "left")) - 10
                if(current<=0){
                    current=0;
                    clearInterval(timer);
                }
                oImg.style.left = current + "px"
            }, 50)

        }
    </script>

2.3小鸟起飞函数封装

2.3.1基础封装

<body>
    <button>开始飞</button>
    <button>往回飞</button>
    <br>
    <img src="./img/right.gif" alt="">
    <script>
        // 1.点击一下  向右移动10px
        var btn = document.getElementsByTagName("button");
        var oImg = document.getElementsByTagName("img")[0];

        var timer;
        // 2.开始飞
        btn[0].onclick = function () {
            // 改变图片路径
            oImg.src = "./img/right.gif";
            move(oImg, "left", 10, 1000)

        }

        // 2.往回飞
        btn[1].onclick = function () {
            // 改变图片的路径
            oImg.src = "./img/left.gif";
            move(oImg, "left", -10, 0)
        }
        // 3.基础封装
        /* 
                封装的步骤
                    1.先声明一个函数  将主要代码放入到函数中
                    2.找函数中可变的值   作为函数参数代入到函数中
                    3.调用调试
        */

        function move(elem, attr, step, target) {
            /* 
               elem  操作的元素
               attr  属性
               step  步长  可以是正数  也可以是负数   +  10   + -10
               target  目标值
            */
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(elem, attr)) + step

                if(current>=target){
                  current = target;
                    // 停止定时器
                    clearInterval(timer)
                }
                console.log(current);
                elem.style[attr] = current + "px";
            }, 50)
        }
    </script>

</body>

qianqian0707

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript

/ timer这里存储的就是定时器id 先把原先的定时器清除掉。// timer这里存储的就是定时器id 先把原先的定时器清除掉。// timer这里存储的就是定时器id 先把原先的定时器清除掉。// 在left值的基础上+10 先获取到left值。// 在left值的基础上+10 先获取到left值。// 在left值的基础上+10 先获取到left值。// 在left值的基础上+10 先获取到left值。// 在left值的基础上+10 先获取到left值。
复制链接

扫一扫