杜沫-CSDN博客

原创 JS游戏——flappy bird

效果展示（视频加载可能在点慢哦~） 1587043477485 总体思路在点击开始游戏之前的设置1、需要设置背景的移动，2、小鸟上下的跳跃3、开始游戏按钮设置思路点击开始按钮之后的设置1、小鸟不需要上下跳跃2、开始游戏这个按钮需要隐藏3、背景图片的移动速度要加快...

2020-04-17 23:08:26 2379 4

原创 JS的作用域链、闭包及举例说明

作用域链是什么？、1、每个函数中都会有一个[[ scope]]属性，这个属性指向一个作用域链，这个作用域链里面存有自己的作用域地址、全局的作用域地址，是一个集合2、当一个函数被定义之后就会存在作用域链，当一个函数开始执行时就会将自己的上下文执行环境放在作用域链的最顶端为什么要引入闭包？我们知道JS只有两种作用域，即全局作用域和局部作用域，所以在函数内部的变量只在它当前的作用域内有效，也就是...

2020-04-12 12:06:51 464

原创 JS中继承的几种方法（包括ES6的）

ES6 之前利用call改变this指向实现继承父类的属性一般都是在子函数中写入父类名. call(this) 来实现call的第一个参数就是你要改变的对象的对象名，后面的就是传参在Son函数中，我们要继承父类的uname,age,sex这三个属性，但是Father中的this指向Father的对象，Son中的this指向Son的对象，那么如何实现在Father的构造函数中使用S...

2020-04-10 21:57:41 506

原创 JS中的原型以及prototype、constructor、proto三者之间的关系

为什么要引入原型如上图所示，我创建了两个对象person1 与 person2，这两个对象都要调用study 这个函数，这样就会在内存开辟两个study空间，但函数实现的功能都是一样的，所以这样太浪费内存空间了，所以原型的出现就是为了解决了这个内存浪费的问题，如下图所示原型是什么？原型的作用是什么？1、任何一个函数内都有prototype属性,这个prototype属性指向另一个对象...

2020-04-09 13:32:30 620

原创 JS中类、对象、构造函数

什么是类，什么是对象？1、类是抽象了对象的公共部分，类里面包括的是一些公有的特点，2、对象特指某一个，通过类实例化一个具体的对象，是一个具体的物体。对象的特点：1、对象是一组无序的集合例如字符串、数值、数组、函数2、有属性也有方法，属性可以理解为这个对象本身所带的一些特征，静态的方法可以理解为这个对象可以做什么，动态的3、必须通过new来调用构造函数在ES6之前没有出现类...

2020-04-09 11:32:36 611 1

原创原生JS实现桌面弹出数字，并在屏幕中央显示，并遇到偶数时从屏幕中央移出且消失

需要屏幕上输出一个范围的数字，并同时实现数字出现在屏幕中央的思路首先在页面动态的创建一个标签用于输出数字，至于屏幕中央的数字在html中设一个div，使用定位居中当遇到偶数时，需要将数字从屏幕中央移出且消失的思路当遇到偶数时，我们动态创建一个div，使它的位置与原来在中央的div的位置与大小一样，然后将偶数值再赋值给div,同样的颜色必须保持与原来的屏幕中的颜色一致关于移动时注意的问题...

2020-04-05 21:54:23 390

原创原生JS用select标签实现三级联动

三级联动思想与二级联动的一样，添加省与市的过程我就不写了，参考原生JS用select标签实现二级联动，就说一下如何添加区对于区的数组设置，我们需要一个二维数组，拿数组中下标为0的值来说，从整体上来说，下标为0 的数是一个数组。里面存放的是一个市所包括的所有区的值，不同市所包括的区的值分别放在不同的下标中，实现思路1、第一个下标代表的是选择的哪个省2、第二个下标代表的是选择的哪个市因此我...

2020-04-05 21:43:24 671 1

用div实现二级联动封装的函数较多，大家看起来会很困难，这个实现只是我自己突发其想才这么实现的，大家可以看 https://blog.csdn.net/qq_36091461/article/details/105317483 这个是用select标签实现的，省去了许多操作，不过实现的的思想都是一样的，div实现二级联动的实现是多了一些select本身的功能原生JS用普通 div 实现二级联动...

2020-04-04 21:36:51 536

原创原生JS用select标签实现二级联动

原生JS用select标签实现二级联动的思路1、需要设置一个省数组，还有一个市数组，2、页面一加载时，我们需要动态的给省区域创建元素，3、当选中其中一个省份时，同时需要将其省份对应的市动态的添加市的内容区域中，这样一个二级联动就实现了== 当动态添加元素时需要注意的点：==1、首先要明确添加的是哪个数组，2 、以及要给哪个元素添加，3、因为动态添加元素需要用到好几次，所有封装一...

2020-04-04 21:33:20 1177

原创原生js实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹

小球在桌面上自由移动，要清楚的几个问题1、小球在桌面移动的最大距离是多少2、小球移动的步长是多少3、当小球碰到屏幕边缘时怎么实现反弹4、如何实现多个小球5、怎么实现小球的颜色及大小关于第一步实现小球在桌面上移动的最大距离的思路1、首先要获取桌面的宽度与高度，注意获取屏幕的宽度与高度需要封装一下，如下所示宽：document.documentElement.clientWidth ...

2020-04-03 13:30:14 4093 1

原创原生js实现倒计时

原生原生js实现倒计时的思路1、用原生js实现倒计时，首先得利用 Date 获取系统提供的当前时间，其实还需要一个截止时间，这样才可以去思考下来应该怎么实现倒计时这个功能2、既然是倒计时，肯定会用setInterval(()=>, 时间数) 来实现自动计时2、利于系统的当前时间和用户提供的截止时间，我们可以知道总共还剩多少时间，再将剩下时间分别换算成天、时、分和秒，3、当到了截止时间...

2020-04-02 18:15:35 1183

原创事件对象event及其相关属性

事件对象event一、什么是事件对象二、事件对象的属性1、事件对象的兼容性2、事件对象的type属性3、target 与currentTarget4、事件对象的keyCode属性5、ctrlKey 、altKey、 shiftKey6、screenX与screenY7、offsetX 与offsetY8、clientX与clientY一、什么是事件对象1、event是事件对象，是关于事件的...

2020-04-01 10:11:20 4648

杜伊沫的博客