js
文章平均质量分 53
qq_37200686
这个作者很懒,什么都没留下…
展开
-
web worker 解决定时器不准的问题
解决定时器不准的问题原创 2023-02-22 19:09:25 · 741 阅读 · 0 评论 -
前端盲水印
需求给图片加上看不到的水印,当通过其他的方式可以清楚的看到图片中暗藏的水印,以此方式追溯到泄密的人解决办法利用canvas实现图片和水印的绘制,具体过程如下:新建canvas,宽度和高度取要加水印的图片的宽度和高度 在该canvas上绘制要添加的水印文字,文字透明度设置要特别的低,但是当水印透明度小于等于0.003,不可恢复到水印。所以我们设置透明度要不得低于0.003 将该canvas转成img(为什么canvas要转成img?之前遇到canvas在移动端无法长按出现保存、转发等操作)原创 2021-01-08 15:54:53 · 858 阅读 · 0 评论 -
解决html2canvas截图空白的问题
问题:当出现滚动条时截图会有空白解决办法:获取需要截图的图片的绝对定位,截图时设置精确的x,yhtml2canvas(that.$refs.imageDom, { // that.$refs.imageDom为需要截图的img元素 getActuralPosition为获取绝对位置,之前的文章有写过 x: that.getActuralPosition(that.$refs.imageDom).left, y: that.getActuralPosition(that.$refs.ima原创 2020-10-16 19:06:09 · 7550 阅读 · 3 评论 -
获取精确的滚动条的宽度
// 获取滚动条的宽度getScrollWidth() { // 创建一个div元素 let noScroll, scroll, oDiv = document.createElement('DIV'); oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'; // 没有滚动条的clientWidth clientWidth为content+p.转载 2020-10-16 18:52:08 · 1523 阅读 · 0 评论 -
canvas在移动端长按保存图片
一、背景同一个网页,canvas在PC端可以右键下载,但是在移动端长按时却没反应。现在要求在移动端支持长按图片下载二、实现方式画布(canvas)对象有一个非常有用的方法toDataURL(),这个方法能把画布里的图案转变成base64编码格式的png,然后返回Data URL数据。利用这个我们可以将转成一个image/png格式的图片// 获取所有的canvas图片文件let canvasDom = document.getElementsByTagName('canvas')for原创 2020-09-24 12:00:24 · 2956 阅读 · 1 评论 -
获取元素在页面的位置
一、基本须知一张网页的全部面积就是它的大小,通常情况下由css决定。例如我们给网页设置3000*2000的大小,则网页大小为3000*2000,即使在浏览器中我们需要滚动条才能将这个网站看完整 浏览器窗口的大小(视口)指的是浏览器中看到的那部分网页的面积,例如当我们缩小浏览器的大小时,那视口也会减小 当网页可以在浏览器中全部展示时,不需要滚动条时,则浏览器的适口和网页的大小相同二、获取浏览器窗口的宽和高网页上每个元素都有clientWidth和clientHeight属性,该属性指元素的内容加转载 2020-09-23 14:26:41 · 3208 阅读 · 1 评论 -
用柯里化思想手写bind方法
模拟bind方法Function.prototype.mybind = function () { //保存原函数,就是this var self = this; //取第一个参数为新的this var context = [].shift.call(arguments); //取剩下的参数args var args = [].slice.ca...原创 2020-05-08 16:59:42 · 170 阅读 · 0 评论 -
js内存释放和作用域销毁
如何查找上级作用域当前函数是在哪个作用域下定义的,那么它的上级作用域就是谁var num = 12;function f() { var num = 120; return function () { console.log(num) }}var fn = f();fn();//120(function ...原创 2020-04-23 10:28:17 · 593 阅读 · 0 评论 -
预解释(变量提升)
基本概念在当前作用域中,js代码执行之前,浏览器首先会默认把所有带var和function关键字的及进行提前声明或者定义;理解声明和定义 var num = 12; 申明:var num; 定义: num= 12对于带var和function关键字的预解释操作是不一样的 var:在预解释的时候只是提前声明 function:在预解...原创 2020-04-22 15:51:55 · 181 阅读 · 0 评论 -
js函数三种角色,函数存储与执行的过程
函数的预解释function f(a,b){ var total = a+b; console.log(total)}上面这个函数,首先会进行预解释,函数的预解释是声明+定义的;函数的执行当函数执行时首先会形成一个私有作用域,这个作用域是栈内存,然后按以下步骤执行:1)有形参则给形参赋值2)私有作用域预解释3)在私有作用域中将函数代码从上到下执行...原创 2020-04-22 14:48:39 · 673 阅读 · 0 评论 -
js常用的六种继承方式
一、原型链继承实现方法:设置B.prototype = new A即可(其中B为子类,A为父类)特点:它把父类中的私有属性和共有属性都继承到了子类的原型链上(new A得到一个实例对象,该对象具有构造函数A的私有和公有属性)核心:原型链继承方式并不是将父类的所有属性克隆一份给了子类,而是在父类和子类之间建立了原型链的连接,如果子类需要使用父类的方法,则通过原型链一级一级的向上查找即可...原创 2020-04-02 16:15:30 · 373 阅读 · 0 评论 -
正则总结
一、创建正则的两种方式1. 字面量方式var reg = /\d+/字面量方式//之间包起来的都是元字符,有的是具有特殊意义的元字符,大部分是代表本身含义的普通元字符2. 实例创建var reg = new RegExp("\\d+")两种方式的区别(1)字面量方式中出现的都是元字符,不能进行变量的拼接,而实例创建的方式可以eg: var reg = new Reg...原创 2020-01-15 14:46:09 · 707 阅读 · 0 评论 -
如何解决算百分比,加起来不是100%的问题
思想:1. 所有的百分比取整数部分2. 将所有百分比相加,最理想状态是100%,但相信大部分是小于100%的,取差值3. 数组按小数部分排序4. 从小数最大的那个百分比开始加一,直到补全所有的差值下面这个图说的很清楚了,图是我从百度过来的实现:我把它封装成了方法/* ** ary 要处理的数据的数组集合 ** field 要求百分比的字段 *...原创 2019-12-18 19:21:06 · 24175 阅读 · 0 评论 -
js线程和进程
这篇文章写得很好https://newpromise.github.io/2018/06/21/%E8%AF%A6%E8%A7%A3js%E4%B8%AD%E7%9A%84%E7%BA%BF%E7%A8%8B%EF%BC%8C%E8%BF%9B%E7%A8%8B/#comments转载 2019-04-26 16:52:11 · 346 阅读 · 0 评论 -
DOM库
获取页面中元素的方法document.getElementById('xxx');context.getElementsByName('xxx');context.getElementsByClassName('XXX');不兼容IE6-8,没有这个方法document.getElementsByName('XXX');//在IE中只对表单元素的name起作用document.bod...原创 2019-03-17 23:07:32 · 291 阅读 · 0 评论 -
DOM盒子模型
css盒子模型DOM盒子模型通过js提供的一些方法获取页面中的样式信息,下面就是我们获取样式信息的一系列方法计算联合样式内容的宽度和高度:我们设置的width/height这两个样式就是内容的宽和高;如果没有设置height,容器的高度会根据里面内容自己进行适应,这样获取的值就是真实内容的高;如果设置固定高度,不管内容是多了还是少了,其实我们的内容高度指的都是设定的那个值;...原创 2019-03-14 17:27:30 · 469 阅读 · 0 评论 -
常用的dos命令
1. 打开DOS命令window+R2. 查看自己电脑ip地址ipconfig / ipconfig -all3. 查看当前网络状态(以www.baidu.com为例)ping www.baidu.com -t4. 终止当前的dos命令ctrl+c5. 关闭当前的dos窗口exit6. 清屏cls7. 文件夹cd ../ 进入上级目录cd ...原创 2019-03-04 19:34:29 · 153 阅读 · 0 评论 -
ES6 iterator迭代器
iterator迭代器是ES6非常重要的概念,但是很多人对它了解的不多,但是它却是另外4个ES6常用特性的实现基础(解构赋值,剩余/扩展运算符,生成器,for of循环),了解迭代器的概念有助于了解另外4个核心语法的原理,另外ES6新增的Map,Set数据结构也有使用到它。对于可迭代的数据解构,ES6在内部部署了一个[Symbol.iterator]属性,它是一个函数,执行后会返回iterat...转载 2019-02-27 11:02:59 · 155 阅读 · 0 评论 -
js事件委托(事件代理)
场景:多个li标签,点击时alert它的innerHTMLhtml代码:<ul id="all"> <li class="item">1</li> <li class="item">1</li> <li class="item">原创 2018-10-30 23:56:26 · 128 阅读 · 0 评论 -
js浅拷贝和深拷贝
数据准备:var o = { //基本数据类型 name:'hxj', //引用数据类型中的Object user:{ age:23, id:201 }, //引用数据类型中的Array friend:['zs','yy','f'],}浅拷贝function Copy(o,copyO) {...原创 2018-10-18 13:33:12 · 201 阅读 · 0 评论 -
localStorage设置过期时间
localStorage是永久保存的,但是如果存储的过多的话会影响客户端,所以保存时要设置过期时间模拟场景:从localStorage中获取name对象,并alert出来首先:定义存储localStorage的函数function store(key,value,expire) { let obj = { time:new Date().getTime(),...原创 2018-11-13 14:19:28 · 1471 阅读 · 0 评论 -
js预解释
基础知识点:js的数据类型:基本数据类型 number、string、boolean、undefined、null引用数据类型 object包括 {}、[]、/^$/、Date function全局作用域:当浏览器加载HTML页面时,首先会提供一个供全局js代码执行的环境->全局作用域(window)预解释在当前作用域...原创 2019-01-14 11:11:43 · 155 阅读 · 0 评论 -
js全局作用域的一些细节问题
在全局作用域中带var和不带var的区别 带var的可以执行预解释,不带的不能进行预解释,所以会报错console.log(a); //undefinedvar a = 10; console.log(b); //ReferenceError: b is not definedb = 20; b = 20相当于给window增加了一个叫b的属性名,属性值...原创 2019-01-14 14:27:52 · 167 阅读 · 0 评论 -
js预解释的特殊情况
预解释不管判断条件是否成立,都会对var进行预解释if(! ('num' in window)){ var num = 12;}console.log(num); //undefined 以上例子中执行过程如下:1. 预解释 var num2. if 条件不成立3. console.log(num) //undefined预解释只解释‘=’左边的,右边的是值,不...原创 2019-01-14 15:50:14 · 138 阅读 · 0 评论 -
js如何查找当前作用域的上级作用域
方法:看当前函数是在哪个作用域下定义的,那它的上级作用域就是谁,和函数在哪执行的没有任何关系var num = 20;function fn() { var num = 10; return function () { console.log(num); }}var foo = fn();foo(); // 10(function () {...原创 2019-01-14 17:00:03 · 528 阅读 · 0 评论 -
js内存释放和作用域销毁
堆内存对象或者函数(引用数据类型) 在定义的时候都会开辟一个堆内存,堆内存有一个引用地址,如果外面有变量引用了这个地址,我们就说这个内存被占用了,不能被销毁了。如果想要销毁堆内存,将所有引用这个堆内存的对象或者函数都赋值为null(空指针)即可。如果堆内存没有任何东西被占用,那么浏览器会在空闲的时候把它销毁(垃圾回收)。//开辟堆内存var obj1 = {name:'hxj'};...原创 2019-01-15 11:26:39 · 7862 阅读 · 2 评论 -
js作用域面试题
function fn() { var i = 10; return function (n){ console.log(n + (++i)); }}var f = fn();f(10);//21f(20);//32fn()(10);//21fn()(20);//31原创 2019-01-15 17:23:26 · 649 阅读 · 0 评论 -
JS this
js中主要研究的是函数中的this js中this代表的是当前行为执行的主体,js中的context代表的是当前行为执行的环境(区域) this是谁和函数在哪定义的和函数在哪执行的没有任何关系;如何区分this呢函数执行,首先看函数名前面是否有'.',如果有的话'.'前面是谁this就是谁,没有的话this就是windowfunction fn(){ console.log(...原创 2019-01-15 20:03:10 · 103 阅读 · 0 评论 -
关于作用域和this的综合面试题
var num = 20;var obj = { num:30, fn:(function (num) { this.num *= 3; num += 15; var num = 45; return function () { this.num *= 4; num ...原创 2019-01-15 21:07:21 · 733 阅读 · 0 评论 -
ES6总结
看到一篇文章,关于ES6的总结,写的很好,保存下来,跪求作者不要删除https://mp.weixin.qq.com/s/WxZYN9W-cSG2sd0wo-rAPw转载 2019-02-25 15:27:49 · 113 阅读 · 0 评论 -
ES6(let和const)
作用域let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域)这里外部的console.log(x)拿不到前面块级作用域声明的let:在日常开发中多存在于使用if/for关键字结合let/const创建的块级作用域,值得注意的是使用let/const关键字声明变量的for循环和v...转载 2019-02-25 17:27:05 · 86 阅读 · 0 评论 -
ES6箭头函数
箭头函数和普通函数的区别箭头函数没有arguments(建议使用更好的语法,剩余运算符替代) 箭头函数没有prototype属性,没有constructor,即不能用作与构造函数(不能用new关键字调用) 箭头函数没有自己this,它的this是词法的,引用的是上下文的this,即在你写这行代码的时候就箭头函数的this就已经和外层执行上下文的this绑定了(这里个人认为并不代表完全是静态...转载 2019-02-26 11:29:30 · 134 阅读 · 0 评论