JS小技巧
huyao_road
20多岁,有30年Web开发经验。
展开
-
判断浏览器是否滚动到页面底部-兼容写法
、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body所以,判断滚动条是否已拉到页面最底部,可以用如下代码:window.ons...转载 2019-11-10 14:31:29 · 707 阅读 · 0 评论 -
JavaScript获取与操作窗口属性
一、查看滚动条的滚动距离常用属性: window.pageXOffset/pageYOffsetIE8及IE8以下不同时兼容 document.body.scrollLeft/scrollTop 和 documentElement.scrollLeft/scrollTop ,兼容性比较混乱,用时取两个值相加。因为有个规律是一个有值另一个就为0;以下为获取滚动条滚动距离的兼容性函数...原创 2018-07-17 19:24:49 · 399 阅读 · 0 评论 -
javascript将扁平的数据转为树形结构 O(n)级算法
当我们需要将一个一维数组转换成一个多层结构的时候,最简单但是最慢的就是多个for循环嵌套,但是这样做有一些缺点,那就是效率太低、而且有多少层就需要嵌套几个for循环,不好用。我实现了用O(n)级算法将 一个扁平的数组即一维数组代表的菜单结构转换成一个多层级的菜单结构。一位数组中每一个元素必须要包含以下属性:拥有一个唯一的id 拥有一个parent_id, 这个id指向它父级的id其...原创 2017-11-29 13:03:39 · 6826 阅读 · 5 评论 -
使用jQuery封装轮播图插件
先展示一下效果:(因为截图工具的原因,小绿点不能正常展示)插件的拓展方式(function ($) { //添加自定义jq插件 $.fn.extend({ pluginName: function (options) { //dosometing; } })})(jQuery);插件的调用方式:...原创 2018-07-24 15:50:35 · 3017 阅读 · 0 评论 -
JavaScript异步加载
javascript 异步加载的三种方案1. defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用。2. async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script 标签里。 (不兼容IE9以下)3. 创建script,插入到DOM中,加载完毕后callBack异步加载JS并执行兼容性写法:方式一 需要被加载的工具函数...原创 2018-07-19 14:50:27 · 506 阅读 · 0 评论 -
javascript生成 [n,m] 的随机整数,包括n和m
生成 [n,m] 的随机整数,包括n和mfunction random(min, max){ var random = max - min + 1; return Math.floor(Math.random() * random + min);}生成(n, m)的随机小数原创 2018-07-14 15:39:08 · 1906 阅读 · 0 评论 -
JSONP
Web页面上用<script> 引入 js文件时则不受是否跨域的影响 (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)于是我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据)但我们无法监控通过<script>的src属性是否把数据...原创 2018-07-30 15:24:31 · 180 阅读 · 0 评论 -
操作cookie工具函数封装
var cookieUtil = { getCookie: function (name) { var arrCookie = document.cookie.split("; "); for (var i = 0; i < arrCookie.length; i++) { var cookieItem = arrCookie...原创 2018-07-31 10:55:25 · 420 阅读 · 0 评论 -
iframe跨域
按情境分1、不跨域时2、主域相同、子域不同时3、主域不同1、不跨域时访问iframe: oIframe.contentWindow 可以直接获得iframe的window属性访问父级:window.parent就是父级的window访问顶级:window.top2、主域相同、子域不同时通过设置window.domain将两个页面置为一样,然后就可以像情况一进行处理了...原创 2018-07-31 11:38:02 · 2467 阅读 · 0 评论 -
代理例子
转载 2018-09-11 14:44:21 · 258 阅读 · 0 评论 -
splice 、 slice 、split傻傻分不清
splice()splice() 方法用于插入、删除或替换数组的元素。注意:splice方法会改变原始数组!array.splice(index,howmany,item1,.....,itemN)index: 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字 howmany: 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果...原创 2018-09-11 21:37:09 · 260 阅读 · 0 评论 -
模拟let的for循环
在异步的环境中使用var很容易就出现问题,可以用let来解决,但也可以使用一个立即执行函数来迭代做这件事情 (function itarator(i){ if(i == files.length){ return; } //fs.stat是一个异步函数 fs.stat('./test/' + files[i], function(err, st...原创 2018-10-23 17:04:54 · 307 阅读 · 0 评论 -
JS数组转对象
一、保留key值和value值1、Object.entries(object)将对象的每一个键值对作为数组元素,其中键与值再被拆成一个数组。const obj = { a:'aa',b:'bb', 8: 'cc', 6:'dd' }; Object.entries(obj) 输出:[ ["6", "dd"], ["8", "cc"], ["a", "aa&quo原创 2018-11-25 17:38:57 · 2006 阅读 · 0 评论 -
javascript将扁平的数据转为树形结构(高效率)
当我们需要将一个一维数组转换成一个多层结构的时候,最简单但是最慢的就是多个for循环嵌套,但是这样做有一些缺点,那就是效率太低、而且有多少层就需要嵌套几个for循环,不好用。我实现了用O(n)级算法将 一个扁平的数组即一维数组代表的菜单结构转换成一个多层级的菜单结构。一位数组中每一个元素必须要包含以下属性:拥有一个唯一的id 拥有一个parent_id, 这个id指向它父级的id其...原创 2017-11-29 10:16:44 · 24606 阅读 · 12 评论 -
将整数转为定长的字符串,空的位上填0
function tofixstr(number,pos){ number = ("000000"+number).slice(-pos).split(''); return number;}测试结果:我这里是因为有需要所以转成了数组,如果想要定长的字符串的话就去掉那个.split('')就好...原创 2018-07-23 14:14:34 · 559 阅读 · 0 评论 -
JS获取对象键值对中key值的方法
使用Object.keysObject.keys会返回一个数组,数组中是这个对象的key值列表所以只要Object.keys(a)[0], 就可以得只包含一个键值对的key值下面是MDN中对Object.keys的描述Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是...原创 2018-05-13 10:15:18 · 234129 阅读 · 5 评论 -
JS sort()函数使用总结
srot()如果不带参数,是将按字母顺序对数组中的元素进行排序,也就是是按照字符编码的顺序进行排序。var arr1 = ['a', 'd', 'c', 'b'];arr.sort(); //['a', 'b', 'c', 'd']var arr2 = [10, 5, 40, 25, 100, 1];arr2.sort(); //[1, 10 ,100, 25, 40, 5]让JS按照根据数组中...原创 2018-05-13 11:24:30 · 13317 阅读 · 3 评论 -
JS类型判断
要求能识别所有原始类型,function, array, object, 并可以识别包装类数字包装类 -> "number - object"布尔包装类 -> "boolean - object"字符串包装类 -> "string - object"结果:代码:/** * 先判断是否为null * 再判断是对象还是typeof能识别的其他类型 */fun...原创 2018-05-16 13:11:38 · 1062 阅读 · 0 评论 -
JS对象深度克隆/复制
实现思路对象类型存储的是对象的引用地址,而把对象的实际内容单独存放,因为对象类型通常比较庞大,这是数据开销和内存开销优化的手段。因此我们不能像原始数据类型一样简单的赋值,而应该遍历数据中的每一个元素,将其中的每一个原始数据类型复制过去,做法如下使用for-in遍历对象中所有属性 判断属性是否是原型链上的,不是原型链上的才拷贝 判断属性值是原始类型还是引用类型 原始类型直接赋值 引用...原创 2018-05-28 12:13:04 · 1603 阅读 · 0 评论 -
函数记忆 - 函数角度性能优化
当一些计算结果可以保留下来为以后的运算提供方便的时候, 就可以用到记忆话函数记忆化函数将计算结果存储起来,如果之后碰到相同的参数,就直接放回已经计算过的参数使用限制: 纯函数算法思想:空间换时间/** * 记忆化函数 */function memorize(func) { var cache = {}; return function() { var key = arguments....原创 2018-06-04 18:49:21 · 496 阅读 · 2 评论 -
JS函数节流
函数节流就是预定一个函数只有在大于执行周期时才执行,周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。应用场景;抢购疯狂点击窗口调整页面滚动实现代码:/** * 节流, 让每隔wait毫秒才执行一次handler函数 */function throttle(handler, wait){ wait = wait || 1000; //不传默认是一秒钟 var lastTime...原创 2018-06-04 19:14:33 · 154 阅读 · 0 评论 -
JS函数防抖
函数防抖就是在函数需要频繁触发的情况下,只有足够的空闲时间,才执行一次。好像公交司机会等人都上车后才出站一样。应用场景:实时搜索拖拽当输完nba之后人会稍微有所停顿,在停顿时才刷新页面实现代码function debounce(handler, delay){ delay = delay || 300; var timer = null; return function() { var...原创 2018-06-04 19:45:33 · 246 阅读 · 0 评论 -
轮播图的实现
轮播图的实现, 已封装轮播轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见, 所以有必要理解其中的原理轮播图HTML中应包含几个部分?视觉窗口,即可见区域包含所有图片的容器具体的每一张轮播图片锚点列表, 点击可跳到具体某一页左右切换按钮让每一个轮播页大小刚好等于视图窗口大小设置视图窗口宽度, 让超过的部分隐藏设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够大. 因...原创 2018-05-29 10:49:32 · 2938 阅读 · 0 评论 -
JS获取dom的CSS样式
获取样式//获取样式属性值function getStyle(obj, attr) { if(obj.currentStyle) { //兼容IE return obj.currentStyle[attr]; } else { //兼容火狐谷歌 return window.getComputedStyle(obj,false)[attr...原创 2018-06-20 18:08:44 · 3020 阅读 · 0 评论 -
多物体链式运动,多值同时运动
实现函数/* * 多物体链式运动,多值同时运动 */function startMove(obj, json, callback){ clearInterval(obj.timer); var iSpeed, iCur; obj.timer = setInterval(function(){ var stopFlag = true; for(var attr in json) ...原创 2018-06-20 18:46:52 · 292 阅读 · 0 评论 -
JS 拖拽
实现后效果拖拽方法实现//鼠标拖拽方法function drag(e) { var event = e || window.event; //事件兼容 var disX = e.clientX - this.offsetLeft, //当前鼠标在区块上的横向相对位置 disY = e.clientY - this.offsetTop; //当前鼠标在区块上的...原创 2018-06-20 17:25:39 · 658 阅读 · 0 评论 -
JS实现数组去重
方法一,利用对象属性不能相同的方法进行去重Array.prototype.distinct = function (){ var arr = this, i, obj = {}, result = [], len = arr.length; for(i = 0; i< arr.length; i++){ if(!obj[arr[i]]){ //如果能查找到,证明...原创 2018-07-16 21:20:05 · 192 阅读 · 0 评论 -
数组中添加从a~z和从A ~ Z的字符
使用String.fromCharCode( ),为数组中添加从a~z和从A ~ Z的字符。var arr = [];for (var i = 65; i <= 122; i++) { if (i > 90 && i < 97) { continue; } // 接受一个指定的 Unicode 值,然后返回一个字符串...原创 2018-05-10 21:21:42 · 5576 阅读 · 0 评论