JavaScript小鸟起飞案例

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

Suixin。

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

阅读量503

点赞数 2

文章标签： html javascript

本文链接：https://blog.csdn.net/lzh17538073353/article/details/126679110

版权

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

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值