Javascript
关注
分享
扫一扫
何迟
这个作者很懒，什么都没留下…
展开
-
筋斗云案例—理解动画和offsetLeft属性
要点：1.为通过循环遍历的方式，为同组的每一个对象定义相同的事件时，不要每次都通过临时创建一个匿名事件，来将对象绑定事件，而是通过调用命名函数的方式2.这个例子的lastPosition注意定义一个全局变量，offsetLeft的距离是所调用的对象，距离浏览器窗口的左边的距离，不是固定窗口代码：<!DOCTYPE html><html lang="en">...原创 2018-11-10 10:19:50 · 901 阅读 · 0 评论 -
图片跟着鼠标移动—理解page系列、client系列、scroll系列和window.event和window.e的兼容问题
要点：1.这个例子中，如果可以直接pageX或者pageY就可以直接写一步操作即可，因为IE8不支持，通过 pageX (页面的具体横坐标位置)= scrollLeft（卷曲的横坐标距离） + clientX（可视区域横轴距离）这样曲线兼容 。2.在JS高级里面，有window.event来获取函数对象，而在谷歌火狐直接可以通过传参返回，以后再详细说明。3.这个例子中，是通过对象内部调...原创 2018-11-13 19:16:54 · 317 阅读 · 0 评论 -
旋转木马案例—数组和动画的联合应用
要点：1.这个例子中的数组操作的四个方法，都是在进行运算之后，都有返回值，而这些返回值有所不同。执行删除相关的操作时，返回的是被删除的值，而追加到数组对象中，返回的是被操作后的整个数组。2.关键点是，在点击切换按钮后，原来图片数组对应的图片发生了改变，但是通过js获取到的多个li标签组成的伪数组的每个li的样式并没有改变，需要重新将样式改变一下。代码：<!DOCTYPE h...原创 2018-11-13 19:31:48 · 404 阅读 · 0 评论 -
通过计算样式封装动画实例—多条动画结合，多个参数变化的动画
要点：1.原来想写animate()的多态形式的，写到一半想起来，js不需要在声明变量时就声明数据类型，无法完成多态的性质，可以通过曲线方法完成多态效果，以后再说。2.getComputerStyle计算样式属性，可以将setoff系列没能获取到的样式属性获取出来，getComputerStyle能返回所调用对象的所有样式键值对，形成一个样式对象3.这个例子中有原来可以改变一个参数，到...原创 2018-11-11 19:45:59 · 192 阅读 · 0 评论 -
来回动画的封装—练习定时器和函数封装的思想
要点：1.定时器原本只打开一个，在不做任何处理的时候，如果在上一个定时器执行完成之前快速点击按钮。定时器的所执行的函数的速度，会不断的加快 ，自己臆测的原因是，多线程，同时打开多个定时器，不会等到上一个处理完成之后来处理下一个，而是类似于多线程的原理，共同的处理定时器绑定的处理函数。2.理解封装思想，这个函数，原来只是处理单一的功能，而封装之后，将需要的不同的对象接口暴露出来，功能模块代码...原创 2018-11-08 14:59:05 · 253 阅读 · 0 评论 -
网页高清放大镜—理解大小图片的比例
要点：1.小图的遮挡层的位置确定，注意抵消margin的值，并且注意盒子模型的位置都是左上角点为原点，注意减去本身宽高的一半，才能将其居中对齐。2.注意遮挡层的取值范围，不能超过小图的图片范围。3.大图移动的距离 = 遮挡层移动的距离 * 大图和小图的最大移动距离的比例 ，方向跟遮挡层移动方向相反，所以添加一个 “-”号代码：<!DOCTYPE html>&...原创 2018-11-15 20:05:05 · 1037 阅读 · 0 评论 -
拖拽登陆框案例—client区域和offset系列
要点：1.鼠标点击拖动时，获取点击时候的位置，距离登陆框的上边框和左边框的距离（X和Y）2.鼠标移动的时候，将登陆框的位置设置为可视距离（clientLeft）- 减去上面获取的X或Y = 登陆框的位置3.鼠标弹起时，移除鼠标移动事件<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2018-11-14 20:33:03 · 329 阅读 · 0 评论 -
bind()方法复制函数或者方法，理解this不同作用域下的指代问题
要点：1.用法：函数名(方法名).call(对象，参数1，参数2)，来复制函数或者方法的名字。2.这个例子中，参数随机数，只在构造函数实例化的时候，创建rm实例对象时调用一次，定时器中调用的是函数的显示方法。3.理解bind方法前后this指代不同的原因，看注释。代码:<!DOCTYPE html><html lang="en"><head&...原创 2018-11-19 15:33:13 · 394 阅读 · 0 评论 -
将电影文件排序—函数作为参数和返回值，理解js提供的sort冒泡排序
要点：1.理解函数作为参数和作为返回值，就是将函数的处理结果直接使用了，而没有进行用第三个变量进行接收而已。2.js提供的sort冒泡排序算法是不稳定的，需要加一步比较两个对象的操作，同时想要进行降序排序只要将返回的值改变一下，即可改变升降排序，不需要重写。代码：<!DOCTYPE html><html lang="en"><head> ...原创 2018-11-19 16:49:22 · 348 阅读 · 0 评论 -
js闭包例子—对不同对象实现点赞累加
要点：1.js中的闭包有两种，一种是函数模式闭包，此实例就是这个模式，并且一般这种模式会有返回处理函数，需要缓存的值，在返回处理函数才能实现缓存数据，而延长作用域链的作用一半定义的是匿名函数。2.大部分情况下函数模式闭包有返回值，如有返回值不能直接调用，需要接收函数。3.这里的点赞对象有四个，他们的内存空间不同，所以他们缓存的value值是对应的对象的value。代码：<...原创 2018-11-19 20:29:02 · 926 阅读 · 0 评论 -
JS实现贪吃蛇—重点理解原型和自调用函数的沙箱
要点：1.通过为构造函数的原型对象添加属性或者方法，可以实现数据共享，节省内存空间，不需要每次重新定义。如果构造函数中的属性或者方法跟原型对象中冲突，以构造函数为准，因为原型对象就是建立在构造函数的基础之上的。注意浏览器中使用的实例对象中的原型__proto__(两个英文状态下的下划线)和构造函数中的原型prototype结构是一样的，但是前一种是通过构造函数的原型创建的，指向后一种，并且...原创 2018-11-17 21:30:25 · 439 阅读 · 0 评论 -
递归案例，遍历DOM树
要点;1.这个例子的递归不是一个函数的递归而是两个函数组成一个整体完成递归，上面一个后函数获取子节点的伪数组，下面一个函数遍历打印节点。2.这个递归的中止条件是所有的子节点再没有别的节点了，要看懂递归先找到中止条件。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2018-11-20 09:31:25 · 1688 阅读 · 0 评论 -
js中组合方式实现继承实例
要点：1.js非高级语言，而是一本轻量级的脚本语言，本身没有继承的特性。但是，开发实践中，利用继承可以节省大量重复的对象的属性和方法的定义，所以基于原型，达到曲线继承。2. 若直接修改原型的指向，如果构造函数需要接收值他们的参数是一致的，那么初始化得到的对象属性值都相同，想要修改只能通过实例对象的原型来修改，比较麻烦。 若使用借用构造函数的方式来完成初始化，那么初始化的实例对象无...原创 2018-11-18 14:45:31 · 729 阅读 · 0 评论 -
js的拷贝继承的两种方式
要点：1.通过改变新实例对象的指针指向被继承的实例对象的地址，达到继承的效果2.通过遍历复制前一个对象的属性和方法达到拷贝的效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</t原创 2018-11-18 14:51:07 · 525 阅读 · 0 评论 -
对同一个对象绑定多个响应事件并都执行，和此例子的兼容代码
要点：1.因为 onclick=" " 添加的元素响应事件，先添加的事件，会被后来添加的事件层叠掉，只能执行最后一个响应的事件所以要用到事件监听addElementLitener()来绑定多个处理函数，而因为兼容性的问题需要兼容代码。2.在IE8中，addElementLitener()这个函数不被兼容，而使用attachEvent()。但是，这个又不被谷歌，火狐兼容，所以需要写兼容...原创 2018-11-04 21:37:24 · 1206 阅读 · 0 评论 -
光标聚焦事件—搜索框实例
要点：1. .onfocus事件是光标聚集响应的事件 .onblur是焦点失去事件2. 注意光标聚焦时，将提示内容去掉，并将字体的前景色改为黑色，和用户输入颜色上作区分，在改回提示内容时，将前景色改为灰色html和内置的js代码：<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2018-11-02 20:58:47 · 3801 阅读 · 0 评论 -
通过自定义属性，排他的原理实现列表的表头和对应内容的切换
要点：1.自定义属性，可以用来存放类似于这个案例中索引的不是自带的属性能满足的，通过setAttribute（"自定义属性名"，值）来自定义一个属性，切记不可直接通过this.自定义属性来设定值 同时，获取和移除自定义属性，分别是getAttribute（）和removeAttribute（）来实现，removeAttribute（）可以将属性彻底删除掉，自带的属性也可以彻底删除，而不...原创 2018-11-02 20:48:40 · 244 阅读 · 0 评论 -
Javascript—通过计时器了解setInterval（）和setTimeout
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计时器事件</title></head><body> &原创 2018-08-18 14:49:52 · 251 阅读 · 0 评论 -
Javascript—瀑布流效果（动态）
HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS瀑布流</title> <link rel="stylesheet" type=&原创 2018-08-20 11:47:00 · 379 阅读 · 1 评论 -
为同一个元素，添加相同名字的处理函数的不同绑定事件—通过switch语法
要点：1.switch语法跟break语法结合使用，才能达到效果，满足条件后，执行出路函数，然后跳出循环。2.这里的.type是返回的是事件的绑定类型，如click。区别与typeof 判断的是值的类型，如 "undefined"。代码：<!DOCTYPE html><html lang="en"><head> <meta char...原创 2018-11-06 09:25:23 · 358 阅读 · 0 评论 -
JS排他功能—一个选中，其余的都变化
要点：1.input添加点击的响应事件，用的for循环，是在加载页面的时候执行的，而onclick事件后面的的for循环，是需要将点击之后，响应这个操作之后执行的。2.通过getElementByTagName()选择出来的标签元素，不管是一个还是多个都是存放在伪元素中的。所以可以通过遍历来获取准确的标签元素，而不可以使用 . 语法来改变对象的属性值（就算只有这一个对象）。html和内...原创 2018-11-01 20:52:40 · 3581 阅读 · 0 评论 -
搜索匹配显示实例—主要keyup事件和数组的理解
要点：1.兼容代码的使用，这里独立遇到的第一个兼容问题，并解决，有点开心。以前，自己写兼容代码，都是根据返回值跟 "undefined"比较，这里直接跟 "string"比较类型，速度更快，用这个方法。2.空数组的创建，可以作为容器，也就就是接下来放入div中的数据。最后调试出现的问题是，如果输入多个匹配的值时，删除最后一个，前面的还符合数组中的元素，又会添加到临时创建的div中，造成冗余。...原创 2018-11-06 09:35:54 · 341 阅读 · 0 评论 -
div控制显示与隐藏状态的两种方式
要点：1.本人原来用的是IDEA编译器，因为什么环境都配置好了，代码提示功能也好，界面也优美，可惜什么都好导致太庞大。本人在自习室敲代码，笔记本电池管不了一上午，后用sublime，真轻便哈哈。但是里面的插件的代码其实，应该是只收录了js的关键字，然后给的提示，并不会筛选。这里，因为前段时间写网页布局，用了很多浮动，有个overflo:hidden经常用，这里写了display:hidden，...原创 2018-11-02 10:05:49 · 9044 阅读 · 0 评论 -
电商的广告切换—三种切换效果，动画的使用。
要点：1.动画的封装，前面已经写了一个动画函数的封装，这是应用。这个例子中全部都是用一个封装的动画函数做成的，所以在第一张点击左边按钮时切换到最后一张，很突兀，同时如果切换的图片不是相邻的图片动画时间很长，这些都可以另外加动画解决。同时，从这个例子，对函数实际操作理解又深了一层。2.定时器的使用，定时器的定义方式有两种，清理方式最好跟定义的方式相同。一般来说，定时器清除之后，还会定义同名定...原创 2018-11-09 21:30:07 · 1024 阅读 · 0 评论 -
通过节点操作，实现隔行变色效果
要点：1.通过.childNodes获取的节点，有标签、文本（包括空文本）、和属性都要算在内。我们要的只是元素类型为标签，通过nodeType判断元素的类型，标签返回值是1，属性返回的是2，文本返回的是32.通过nodeName返回的节点名字，如果是标签节点，返回标签类型的大写名字如LI（<li>），如果是属性节点返回的是属性的小写，文本节点返回#text3.通过nodeV...原创 2018-11-04 13:31:33 · 893 阅读 · 0 评论 -
元素的创建三种方式案例—动态创建列表
要点：1.通过document.write()创建，如果是页面加载完成再执行这种方式创建元素对象，会将原来页面上的内容全部清除掉。如果在页面加载的过程中，则不会出现这种状况，但是也没有什么意义2.通过.innerHTML会重新赋值，如果原来节点有内容会被层叠掉，为了创建有文本内容元素时候用的多3.通过.createElement()创建元素，并返回元素对象，这样做可以实现布局元素，可以...原创 2018-11-04 16:46:30 · 457 阅读 · 0 评论 -
浏览器端的模板引擎使用—art-template
要点：1.模板引擎不光能在浏览器客户端中使用， 也能在node等服务器中使用。2.在替换模板引擎中占位符写完语句后，反而不能添加分号，会报错。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&am原创 2018-12-01 10:11:41 · 662 阅读 · 0 评论