函数封装使用和小鸟起飞来回练习封装

于 2022-09-22 14:19:56 发布
阅读量56 收藏
点赞数
文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72811779/article/details/126991020
版权

函数封装使用

  • 先创建common.js文件

/* 
    *作用:获取非行间样式和行间样式
    *params   elem              标签   
    *params   attr    String    样式名
*/
function  getStyle(elem,attr){
    if(window.getComputedStyle){ //标准浏览器
       return  window.getComputedStyle(elem)[attr];
    }else{//IE低版本浏览器
       return    elem.currentStyle[attr];
    }
}

  • 在页面中使用

<script src="./common.js"></script>
​
<body>
    <div style="color: red;font-size: 20px;"></div>
    <script>
        console.log(getStyle)
        var oDiv = document.getElementsByTagName("div")[0]
        var a = getStyle(oDiv, "color");
        console.log(a);
        var b = getStyle(oDiv, "fontSize");
        console.log(b);
    </script>
</body>

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>

2.3.2解决目标值

  • 问题1:目标值问题

    • 分析原因

      • 开始飞 if (current >= target)

      • 往回飞 if (current <= target)

    • 解决方法:根据step判断

      • 开始飞 step 10 > 0

      • 往回飞 step 10 < 0

<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)
​
        }
​
        /*
            问题1:目标值问题
            分析原因
                    开始飞     if (current >= target)
                    往回飞     if (current <= target)
            解决方法
                    根据step判断
                        开始飞  step 10  > 0
                        往回飞  step 10 < 0
        */
​
        function move(elem, attr, step, target) {
            /* elem 移动的元素  attr 改变的属性  step步长 可以是正数也可以是负数  target目标值 */
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(elem, attr)) + step
​
                if (step > 0 && current >= target) {
                    current = target;
                    // 停止定时器
                    clearInterval(timer)
                } else if (step < 0 && current <= target) {
                    current = target;
                    clearInterval(timer);
                }
​
                elem.style[attr] = current + "px";
            }, 50)
        }
    </script>
​
</body>

2.3.3解决step正负数问题

  • 问题2:用户不考虑step正负数的问题

    • 解决方法：判断current值和target值 current target

      • 开始飞 0 < 1000 +step

      • 往回飞 1000 > 0 - step

​
​
<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)
​
        }
        /*
            问题1:目标值问题
            分析原因
                    开始飞     if (current >= target)
                    往回飞     if (current <= target)
            解决方法
                    根据step判断
                        开始飞  step 10  > 0
                        往回飞  step 10 < 0
        */
        /*
            问题2:用户不考虑step正负数的问题
            解决方法
                 current     target
            开始飞   0    <    1000       +step
            往回飞  1000   >     0         -step
        */ 
​
        function move(elem, attr, step, target) {
            /* elem 移动的元素  attr 改变的属性  step步长 可以是正数也可以是负数  target目标值 */
            //解决步长
            step =  parseInt( getStyle(elem,attr) ) < target ? step:-step
           
            clearInterval(timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
            timer = setInterval(function () {
                // 在left值的基础上+10    先获取到left值
                var current = parseInt(getStyle(elem, attr)) + step
                                //解决目标值
                if (step > 0 && current >= target) {
                    current = target;
                    // 停止定时器
                    clearInterval(timer)
                } else if (step < 0 && current <= target) {
                    current = target;
                    clearInterval(timer);
                }
                elem.style[attr] = current + "px";
            }, 50)
        }
    </script>
</body>

2.3.4函数封装最终版

  • common.js

/* 
    *author  朱银娟
    *作用     让样式运动
    * params   elem                  标签
    * params   attr     string类型   样式名
    * params   step      numbre类型   步长
    * params   target    number类型   目标值
​
*/
function move(elem, attr, step, target) {
    /* elem 移动的元素  attr 改变的属性  step步长 可以是正数也可以是负数  target目标值 */
    step =  parseInt( getStyle(elem,attr) ) < target ? step:-step
    clearInterval(elem.timer);// timer这里存储的就是定时器id  先把原先的定时器清除掉
    elem.timer = setInterval(function () {  //将定时器id存储到标签的自定义属性timer上
        // 在left值的基础上+10    先获取到left值
        var current = parseInt(getStyle(elem, attr)) + step
​
        if (step > 0 && current >= target) {
            current = target;
            // 停止定时器
            clearInterval(elem.timer)
        } else if (step < 0 && current <= target) {
            current = target;
            clearInterval(elem.timer);
        }
        elem.style[attr] = current + "px";
    }, 50)
}

  • 在页面中使用

<script>
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0];
        btn.onclick = function(){
            // move(oDiv,"width",20,500);
            move(oDiv,"height",10,100);
        }
    </script>
无味～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript小鸟起飞案例
lzh17538073353的博客
09-03 544
实现步骤：1、点击按钮 改变img的left值 2、left值 = 在当前left值的基础上 + 10 3、开启定时器 自动移动图片位置
函数封装的应用
inhacker的博客
02-04 307
1.封装函数实现如下要求 ： 例如：输入2，5 则求：2 + 22＋222 + 2222＋22222的和 # 输入一个要扩展计算的正整数 var1=int(input("请输入一个1-9的整数：")) # 输入扩展的最大位数 var2=int(input("请输入一个正整数:")) # 变量求和 sum1=0 # 用变量来储存扩展位数 b=var2 # range（1,5+1）来计算出2,22,2...
封装函数
rongmingye
10-03 3063
在js封装一些函数，可以全局调用， 1 在自执行的函数里，声明一个构造函数(即想封装的函数) (function(){       var demo = function(options){             // dosomething        } })() 2 然后将构造函数暴露在全局 (function(){      var demo = function(op...
JavaScript飞翔的小鸟
M_X_B_MR_L的博客
12-20 1229
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>疯狂的小鸟</title> <style>
封装的函数
alanzinuo的博客
04-26 545
(一).封装的函数: /** * 判断是否为11121 * @return bool */ function is_11121() { return in_array(date("d",time()),[1,11,21]); } /** * 微信签名算法 * @param $arr * @param $key * @return string ...
长颈鹿与小鸟_《长颈鹿和小鸟》综合练习二.pdf
03-03
【教育】领域的数学综合练习题解析： 1. 口算：这部分主要训练...这些练习题涵盖了数学的基础知识，包括数的比较、运算、除法概念、倍数关系、估算和实际应用等，对孩子的数学思维和解决问题的能力有很好的锻炼作用。
小鸟起飞.html
06-06
小鸟起飞.html
小班故事：小鸟和小田鼠（教案）.doc
01-12
小班故事：小鸟和小田鼠（教案）
cocos初学者练习项目：飞翔的小鸟
01-17
在项目中，`playerbride`很可能代表玩家角色的节点或组件，包含了玩家小鸟的动画和行为控制。 在源码中，JavaScript是主要的编程语言，Cocos Creator支持基于ECMAScript 6的语法。学习如何编写和组织JS代码至关重要...
cocos练习游戏：快乐小鸟
最新发布
03-22
角色：背景、小鸟，地面，管子 游戏逻辑： 小鸟自己有逐帧动画 小鸟穿过水管中间加分，碰到地面或者水管其他地方死亡 小鸟鼠标点击的时候向上移动，正常会有重力下掉 背景和水管都向左移动 水管的纵坐标要随机生成
flappyBird:用js制作的飞扬的小鸟游戏
03-29
飞扬的鸟 用js制作的游戏在
飞翔的小鸟js源码
08-23
plappybird游戏js源码
原生js 写的flappy brid 飞翔的小鸟
05-10
flappy brid js原生 代码 还有部分图片资源也有 ，飞翔的小鸟
js制作飞行的小鸟游戏
08-22
使用js制作的小鸟飞行的游戏，里面使用了canvas绘图，和js的一些常规操作，图片可自行更改更好的。
疯狂的小鸟 js代码
08-15
这是一款用cocos-js开发的疯狂的小鸟源码
js飞翔的小鸟
Welcome to my csdn!
01-31 742
提示：未经本人同意，请不要转载哦。 一个简单易懂js飞翔的小鸟游戏 代码写的可能不是很好，可以学个思路 由于管道图片没找到，就自己搜了一张 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、css排版部分 * { margin: 0; padding: 0; } #box { width: 343px;
JavaScript实现Fly Bird小游戏
qianduan666a的博客
07-13 643
JavaScript实现Fly Bird小游戏 1.分析页面结构，理清需求和功能 游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。 1.1 开始界面 游戏的大背景 上下移动的游戏标题和翅膀摆动的小鸟 start 按钮，点击进入游戏界面 一直移动的地面 1.2 游戏界面 显示越过障碍数量的计分器 移动的障碍物，分别是上管道和下管道 点击游戏界面，小鸟向上飞起，然后在重力作用下下坠， 当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面 1.3 结束界面...
飞翔的小鸟
Vivian_shuang的博客
08-09 1448
DOCTYPE html> html> head>     title>Flappy Birdtitle>     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     script type="text/javascript">         // Edit by xingoo    
python用定义函数用七巧板画小鸟
04-27
在主程序中，我们调用`draw_bird()`函数来绘制小鸟，并使用turtle库设置了窗口大小和绘制速度。 你可以根据自己的需要修改这段代码，并使用不同的参数来绘制不同形状的小鸟。希望这个例子能够帮助到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值