JavaScript_网页中使用按钮控制图形的移动效果

刺骨的言语ヽ痛彻心扉 2023-10-08 12:44 36阅读 0赞

注：在本案例中强调了如何获取一个元素的当前属性值（getStyle方法），和封装后的使元素移动的移动方法（move）

首先看一下简单的左右移动效果：  
![在这里插入图片描述][20210411213434322.gif]

源码解析：

下面看一下升级版的四个按钮控制效果：  
![在这里插入图片描述][20210411213537862.gif]  
源码解析：

<!DOCTYPE html>
    <html lang="en">
    <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>定时器的应用</title>
        <style>
            *{
         
                padding: 0px;
                margin: 0px;
            }
            #box1{
         
                width: 30px;
                height: 30px;
                background-color: tomato;
                position: absolute;
                top: 50px;
                left: 0px;
            }
    
            #box3{
         
                width: 100px;
                height: 100px;
                /* background-color: tomato; */
                position: absolute;
                left: 0px;
                top: 200px;
            }
        </style>
        <script>
            window.onload = function(){
         
                var btn01 = document.getElementById("btn01");
                var btn02 = document.getElementById("btn02");
                var btn03 = document.getElementById("btn03");
                var btn04 = document.getElementById("btn04");
                var btn05 = document.getElementById("btn05");
                var btn06 = document.getElementById("btn06");
    
                var box1 = document.getElementById("box1");
                var box3 = document.getElementById("box3");
                //点击按钮以后，使box1向右移动
                // btn01.disabled = true;
                // btn02.disabled = true;
                // btn03.disabled = true;
                // btn04.disabled = true;
                // btn05.disabled = true;
    
                //强调回调函数的作用
                btn01.onclick = function(){
         
                    move(box1, "left", 470, 10);
                }
                //点击按钮以后，是box1向左移动
                btn02.onclick = function(){
         
                    move(box1, "left", 0, 10);
                };
                //单击按钮以后，box3向左移动
                btn03.onclick = function(){
         
                    move(box3, "left", 400, 10);
                };
                //单击按钮后，box1向下移动
                btn05.onclick = function(){
         
                    move(box1, "top", 470, 20)
                }
                //单击按钮后，box1向上移动
                btn04.onclick = function(){
         
                    move(box1, "top", 50, 10);
                }
    
    
            };
    
            /* 
                目前我们的定时器的标识由全局变量timer保存
                    所有的执行正在执行的定时器都在这个变量中保存
             */
    
            var timer;
            //创建一个可以执行简单动画的函数
            /* 
                参数：
                    obj：要执行动画的对象
                    st: 要执行动画的样式，比如：left、top、width
                    target: 执行动画的目标位置
                    speed: 移动的速度（正数向右移动，负数向左移动）
                    callback: 回调函数，这个函数将会在动画执行完毕以后执行
             */
            function move(obj, st, target, speed, callback){
         
                clearInterval(obj.timer);
    
                var current = parseInt(getStyle(box1, st));
                //判断速度的正负值
                //如果从0向400移动，则speed为正
                //如果从400向0移动，则speed为负
                console.log(current + "  " + target);
                if(current > target){
         
                    speed = -speed;
                }
    
                obj.timer = setInterval(function(){
         
                    //获取box1的原来的left值
                    var oldValue = parseInt(getStyle(obj, st));
                    console.log(oldValue);
                    //在旧值的基础上增加
                    var newValue = oldValue + speed ;
                    //将新值设置给box1
                    obj.style[st] = newValue + "px";    
    
                    if(speed < 0 && newValue <= target){
         
                        obj.style[st] = target + "px"; 
                        clearInterval(obj.timer);
    
                        //动画执行完毕，调用回调函数
                        callback && callback(); //如果有callback则执行，否则不执行
    
                    }else if(speed > 0 && newValue >= target){
         
                        obj.style[st] = target + "px";
                        clearInterval(obj.timer);
    
                        //动画执行完毕，调用回调函数
                        callback && callback(); //如果有callback则执行，否则不执行
                    }
                    
                }, 10);
            }
    
            function getStyle(obj, name){
         
                    //此处条件不可直接使用getComputedStyle作为参数，因为在浏览器中变量没找到会报错
                    // 而作为window的属性使用，属性找不到会返回false，如果是IE8浏览器则会返回false
                    //  如果是IE8以上的版本或者其他类型浏览器，则返回true
                    if(window.getComputedStyle){
         
                        //正常浏览器的方式，具有getComputedStyle方法
                        return getComputedStyle(obj, null)[name];
                    }else{
         
                        //IE8的方式，没有getComputedStyle方法
                        return obj.currentStyle[name];
                    }
    
                    //另一种方法
                    //该方法有缺陷，因为IE9/10/11即含有currentStyle属性有含有getComputedStyle方法
                    // if(obj.currentStyle){
         
                    //     return obj.currentStyle[name];
                    // }else{
         
                    //     return obj.getComputedStyle[name];
                    // }
            }
        </script>
    </head>
    <body>
        <button id="btn02">点击按钮以后box1向左移动</button>
        <button id="btn01">点击按钮以后box1向右移动</button>
        <button id="btn03">点击按钮以后box3向左移动</button>
        <br>
        <button id="btn04">点击按钮以后box1向上移动</button>
        <button id="btn05">点击按钮以后box1向下移动</button>
        <button id="btn06">点击按钮后图形循环一周</button>
        <br><br>
        <div id="box1"></div>
        <div id="box2" style="border-left: solid 1px black; height: 450px; position: absolute;
                            left: 500px; top: 50px;"></div>
        <div id="box3"></div>
        <div id="box4" style="border-top: solid 1px black; width: 500px; position: absolute;
                            top: 50px;"></div>
        <div id="box5" style="border-top: solid 1px black; width: 500px; position: absolute;
        top: 500px;"></div>
    </body>
    </html>

以下为凸显该练习中的回调函数作用的效果：  
![在这里插入图片描述][20210411213723776.gif]  
源码解析：

<!DOCTYPE html>
    <html lang="en">
    <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>定时器的应用</title>
        <style>
            *{
         
                padding: 0px;
                margin: 0px;
            }
            #box1{
         
                width: 30px;
                height: 30px;
                background-color: tomato;
                position: absolute;
                top: 50px;
                left: 0px;
            }
    
            #box3{
         
                width: 100px;
                height: 100px;
                /* background-color: tomato; */
                position: absolute;
                left: 0px;
                top: 200px;
            }
        </style>
        <script>
            window.onload = function(){
         
                var btn01 = document.getElementById("btn01");
                var btn02 = document.getElementById("btn02");
                var btn03 = document.getElementById("btn03");
                var btn04 = document.getElementById("btn04");
                var btn05 = document.getElementById("btn05");
                var btn06 = document.getElementById("btn06");
    
                var box1 = document.getElementById("box1");
                var box3 = document.getElementById("box3");
                //点击按钮以后，使box1向右移动
                btn01.disabled = true;
                btn02.disabled = true;
                btn03.disabled = true;
                btn04.disabled = true;
                btn05.disabled = true;
    
                btn06.onclick = function(){
         
                    move(box1, "left", 470, 10, function(){
         
                        move(box1, "top", 470, 10,function(){
         
                            move(box1, "left", 0, 10,function(){
         
                                move(box1, "top", 50, 10, function(){
         
                                    console.log("循环执行一周结束！");
                                });
                            });
                        });
                    });
                }
                // //点击按钮以后，是box1向左移动
                // btn02.onclick = function(){
         
                //     move(box1, "left", 0, 10);
                // };
                // //单击按钮以后，box3向左移动
                // btn03.onclick = function(){
         
                //     move(box3, "left", 400, 10);
                // };
                // //单击按钮后，box1向下移动
                // btn05.onclick = function(){
         
                //     move(box1, "top", 470, 20)
                // }
                // //单击按钮后，box1向上移动
                // btn04.onclick = function(){
         
                //     move(box1, "top", 50, 10);
                // }
    
    
            };
    
            /* 
                目前我们的定时器的标识由全局变量timer保存
                    所有的执行正在执行的定时器都在这个变量中保存
             */
    
            var timer;
            //创建一个可以执行简单动画的函数
            /* 
                参数：
                    obj：要执行动画的对象
                    st: 要执行动画的样式，比如：left、top、width
                    target: 执行动画的目标位置
                    speed: 移动的速度（正数向右移动，负数向左移动）
                    callback: 回调函数，这个函数将会在动画执行完毕以后执行
             */
            function move(obj, st, target, speed, callback){
         
                clearInterval(obj.timer);
    
                var current = parseInt(getStyle(box1, st));
                //判断速度的正负值
                //如果从0向400移动，则speed为正
                //如果从400向0移动，则speed为负
                console.log(current + "  " + target);
                if(current > target){
         
                    speed = -speed;
                }
    
                obj.timer = setInterval(function(){
         
                    //获取box1的原来的left值
                    var oldValue = parseInt(getStyle(obj, st));
                    console.log(oldValue);
                    //在旧值的基础上增加
                    var newValue = oldValue + speed ;
                    //将新值设置给box1
                    obj.style[st] = newValue + "px";    
    
                    if(speed < 0 && newValue <= target){
         
                        obj.style[st] = target + "px"; 
                        clearInterval(obj.timer);
    
                        //动画执行完毕，调用回调函数
                        callback && callback(); //如果有callback则执行，否则不执行
    
                    }else if(speed > 0 && newValue >= target){
         
                        obj.style[st] = target + "px";
                        clearInterval(obj.timer);
    
                        //动画执行完毕，调用回调函数
                        callback && callback(); //如果有callback则执行，否则不执行
                    }
                    
                }, 10);
            }
    
            function getStyle(obj, name){
         
                    //此处条件不可直接使用getComputedStyle作为参数，因为在浏览器中变量没找到会报错
                    // 而作为window的属性使用，属性找不到会返回false，如果是IE8浏览器则会返回false
                    //  如果是IE8以上的版本或者其他类型浏览器，则返回true
                    if(window.getComputedStyle){
         
                        //正常浏览器的方式，具有getComputedStyle方法
                        return getComputedStyle(obj, null)[name];
                    }else{
         
                        //IE8的方式，没有getComputedStyle方法
                        return obj.currentStyle[name];
                    }
    
                    //另一种方法
                    //该方法有缺陷，因为IE9/10/11即含有currentStyle属性有含有getComputedStyle方法
                    // if(obj.currentStyle){
         
                    //     return obj.currentStyle[name];
                    // }else{
         
                    //     return obj.getComputedStyle[name];
                    // }
            }
        </script>
    </head>
    <body>
        <button id="btn02">点击按钮以后box1向左移动</button>
        <button id="btn01">点击按钮以后box1向右移动</button>
        <button id="btn03">点击按钮以后box3向左移动</button>
        <br>
        <button id="btn04">点击按钮以后box1向上移动</button>
        <button id="btn05">点击按钮以后box1向下移动</button>
        <button id="btn06">点击按钮后图形循环一周</button>
        <br><br>
        <div id="box1"></div>
        <div id="box2" style="border-left: solid 1px black; height: 450px; position: absolute;
                            left: 500px; top: 50px;"></div>
        <div id="box3"></div>
        <div id="box4" style="border-top: solid 1px black; width: 500px; position: absolute;
                            top: 50px;"></div>
        <div id="box5" style="border-top: solid 1px black; width: 500px; position: absolute;
        top: 500px;"></div>
    </body>
    </html>

希望本文能够对你有所帮助，加油^ \_ ^！

[20210411213434322.gif]: https://img-blog.csdnimg.cn/20210411213434322.gif
[20210411213537862.gif]: https://img-blog.csdnimg.cn/20210411213537862.gif
[20210411213723776.gif]: https://img-blog.csdnimg.cn/20210411213723776.gif