原生js
关注
分享
扫一扫
爱早睡的老林
这个作者很懒，什么都没留下…
展开
-
原生js制作匀速动画与轮播图注意事项
笔者最近在创作轮播图，碰到了不少坑，特此分享1.轮播图需要制作多一张图片作为缓冲，使用cloneNode来实现： //1.1必须克隆li标签，用来过渡动画 $('ul').appendChild(lis[0].cloneNode(true));2.在制作匀速动画时，我使用以下代码来封装：function averageAnimation(id,target,...原创 2018-07-22 03:39:55 · 377 阅读 · 0 评论 -
js快速排序标准版与简版
快速排序的核心思想非常简单：在数组中，找一个基准点P，然后splice出去； 将数组中小于改基准点的数据放在一个数组，大于基准点的数据放在一个数组； 对左边的数组进行递归操作，对右边的数组递归操作，最后concat起来，并返回标准思想：function quickSort(arr) { arr = arr.concat(); if(arr.length<=1)...原创 2019-01-15 22:02:34 · 1841 阅读 · 0 评论 -
原生js实现二分查找法与系统自带的indexOf 性能比较
二分查找的概念在于，定义一个数组arr，找到当前数组中点middle，如果要查找的值小于当前middle索引对应的值，则将缩小范围，继续求缩小范围的middle值，接着继续比较，不断缩小范围，最后找到该值；当数据量大的时候，二分查找是很有优势的，下面是二分查找算法的比较：// 二分查找// 在有序的线性表的顺序查找中，时间复杂度为{log(n)}let arr = [];for(l...原创 2019-01-15 13:47:20 · 1432 阅读 · 0 评论 -
180行代码手动实现一个promise
function MyPromise(fn) { // 缓存当前的this,方便引用 let promise = this; // 初始化当前实例的value，error，处理成功事件的arr，处理失败事件的arr // 初始化当前状态，默认为pending promise.value = null; promise.error = null;...原创 2019-01-14 04:57:33 · 355 阅读 · 0 评论 -
js 管道思想
最近在学习es6新语法时，发现一个很有用的思想，管道思想，即一个函数的输出值是下一个函数的输入值：// pipeline 注意reduce参数的用法，将val作为reduce的第二个参数，也就是回调函数prev的默认值const pipeLine = (...methods) =>(val=0)=> methods.reduce((prev,cur)=>cur(...原创 2018-12-30 21:09:50 · 2595 阅读 · 0 评论 -
span标签在后换行不对齐解决方案
在公司做项目时，后台反馈说做的页面的span标签不对齐，让我改一下，我一看，明明就没有空格，怎么改？接着尝试在换行处加上一个&nbsp;，发觉还是无效；后来才发现，是span的padding-left惹的问题，padding-left只对第一行有效，第二行换行后，不受padding-left影响。修改为margin-left即可解决问题...原创 2018-12-10 14:39:05 · 7383 阅读 · 1 评论 -
ie中input框获得焦点时往上移动
最近做项目，在ie中打开一个input框时，获得焦点就会出现如下情况一调试，就知道是line-height与高度不一致导致的，但是奇怪的是，为什么在谷歌中，line-height跟高度不一致不会导致这样的情况，估计是谷歌内部做了优化，当行高大于高度的时候不是会将当前的字体往下拉吗？我在火狐调试，也是一样跟谷歌的情况，如果是普通的div高度设为30px,行高为60px，就会出现输入框往下移的...原创 2018-12-13 09:43:22 · 1283 阅读 · 0 评论 -
z-index误用示范
之前一直错误的观念是，z-index是可以随意调节元素的优先级的，但是最近才发现，z-index只会绝对定位有效，所以无论你怎么调节标准流的元素，只有z-index大于1，都是会覆盖在标准流之上；另外你不设置z-index，定位流默认也是会覆盖在标准流之上；...原创 2018-12-05 11:09:32 · 190 阅读 · 0 评论 -
js中的深浅拷贝理解
浅拷贝，通俗理解就是拷贝一层，例如{a:1,b:{c:1,d:2}},那么拷贝的是a，b指向的内存的位置；由于b指向的是一个对象的引用，那么，我对原来对象中的c属性进行修改，也会影响到新对象属性的值；但是修改原来对象中a的值，就不会影响后新对象a的值；那么如何实现浅拷贝呢？ function simpleClone(obj,newObj) { if(typeof...原创 2018-12-04 22:18:41 · 170 阅读 · 0 评论 -
pageX，clientX，screenX的区别
clientX是指鼠标到当前页面X轴的距离，如果有滚动，这个参考点也会改变，还不能理解就想一下fixed定位就可以了；pageX是指鼠标到当前bodyX轴的距离，如果有滚动，参考点也不会变，如果position为absolute为例；screenX是鼠标到当前屏幕X轴的距离，不会改变，但不同的会有所不同；...原创 2018-11-27 09:52:13 · 1896 阅读 · 1 评论 -
正则匹配/g在onfocus事件校验不准的小bug
最近在做表单校验页面，发现当正则匹配对象是/g的情况时，会出现校验不准的小bug，第一次focus时匹配正确，第二次focus时里面的值就不正确了，依次重复，非常奇怪；后来仔细看了global参数，是指完全匹配里面的字符串，但是按理说也不会一直校验不准确。后来尝试不添加参数，或者将参数改为i，就可以成功校验了。<!DOCTYPE html><html lang="en...原创 2018-12-04 15:27:06 · 192 阅读 · 0 评论 -
javascript中实现伪数组转为真数组的一种方法
最近在研究JQuery代码，发现JQuery实现真伪数组的代码十分巧妙；伪数组转为真数组的实现代码比较简单，如下： let obj={}; let arr=[1,2,3,4,4,5]; //通过[].push找到数组中push方法 //通过apply修改this的指向 //将arr的值赋给该对象 //将真数组转化为伪数组 [].pus...原创 2018-08-03 14:48:44 · 391 阅读 · 1 评论 -
javascript数组扁平化三种写法
数组扁平化是指将一个多重嵌套的数组变为一维数组:let arr = [1,[[2,2],1],3,[4,5,[6,7]]]; // =>[ 1, 2, 2, 1, 3, 4, 5, 6, 7 ]如何实现呢?这里有三个思路:1. 利用reduce函数: return this.reduce((total, val) => Array.isArr...原创 2019-03-16 13:41:08 · 272 阅读 · 0 评论