JavaScript
文章平均质量分 55
352328759
精通各类电子设备的开启和关闭功能
展开
-
js 装饰器
// 装饰器function fun1() { console.log(arguments[0]); return arguments[0] * 2}function fun2(fun) { return function () { let res = fun(...arguments) return res }}fun1 = fun2(fun1)/* */console.log(fun1(1));end原创 2022-04-30 20:20:42 · 346 阅读 · 0 评论 -
js complete 是否完成图像加载
document.getElementById("compman").completecomplete 属性可返回浏览器是否已完成对图像的加载如果加载完成,则返回 true,否则返回 fasle判断图片是否加载完以下任意一条为true则认为图片完全加载完成:未指定 src 或 srcset 属性srcset 属性不存在且 src 属性为空图像资源已完全获取,并已排队进行渲染/合成image 元素先前已确定该映像完全可用并可供使用图像已“损坏”;即,由于错误或图像加载被禁用,图像加载失败原创 2021-09-30 11:58:13 · 748 阅读 · 0 评论 -
css 自定义属性
css 中使用自定义属性必须通过 --x 的格式申明用 var(x) 调用:root{} 下是全局声明块下是局域/* -- 是不能少的 */:root { --swq: red;}h1 { color: var(--swq);}js 中使用css 的自定义属性可以通过 js 的 setProperty 控制要注意自定义属性名仍然要以 “–” 开头// 无效document.documentElement.style.setProperty("defg", "3px"原创 2021-04-19 16:44:32 · 201 阅读 · 2 评论 -
js function.length 函数的长度
length 属性JavaScript length 属性可设置或返回数组中元素的数目, 就算是新手程序员也知道这事一般只是用于获取数组, 字符串长度"字符串".length["数", "组"].length或清空数组var a = ["数", "组"]a.length = 0a // []此外没什么地方能用到 length 属性function.length作为一个老码农, 我一直是这么认为的可今天发现, length 属性还有一个很少用的功能返回函数的长度什么是"函数的原创 2021-03-19 18:04:16 · 2400 阅读 · 5 评论 -
SVG 的 getTotalLength(), getPointAtLength() 方法简介
getTotalLengthSVG路径对象.getTotalLength()该方法返回用户代理对路径总长度(以用户单位为单位)的计算值var a = SVGPathElement.getTotalLength()getPointAtLengthSVG路径对象.getPointAtLength(len)该方法返回路径上指定距离的点的坐标len0~SVGPathElement.getTotalLength() 的浮点数, 超出范围会换算成最大值或最小值var p = SVGPathElem原创 2021-03-01 17:42:51 · 3663 阅读 · 0 评论 -
js 插入公共 css, 异步加载 css
一般样式代码会在文档开头引入, 随文档加载时同步加载无论用户该次操作是否用得到, 样式代码都会全部加载进来但是想要异步加载 css, 或者插入一段新生成的 css, 也是有办法可以实现的插入公共 css 代码块用 createElement 一个 style 节点用 innerHTML 进需要的css代码用 body.appendChild 插入 head 中即可var new_element = document.createElement("style");new_element.i原创 2021-02-03 15:32:45 · 272 阅读 · 1 评论 -
setTimeout 浏览器进入后台时不被冷却的方法
出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停待用户回到浏览器时, 才会重新激活定时任务说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异在 Chrome 中运行一下代码var t = new Date() * 1function fun1() { var _t = new Date() * 1 console.log(_t - t) t = _t setTimeout(fun原创 2021-01-19 17:52:25 · 3344 阅读 · 0 评论 -
关于页面获焦的小技巧
document.activeElement返回文档中当前获得焦点的元素, 属性只读与明确的元素比较, 可以知道目标元素是否获焦document.activeElement === document.getElementById("a")没有元素获焦时, 指向 bodyelement.focus()设置目标获焦如进入表单页面后, 主动让第一个 input 获焦document.getElementById("a").focus()利用 input 获焦的特性, 结合 cs原创 2020-12-18 14:54:59 · 1108 阅读 · 0 评论 -
js oninput 移动端替代 keyup
在移动端, keyup 事件可能失效这时可以用 oninput 事件$('#xxx').bind('input propertychange', function() {})//document.getElementById("swq").addEventListener("input", fn, false)参考资料:总结oninput、onchange与onpropertychange事件的用法和区别//end...原创 2020-12-14 09:46:57 · 1413 阅读 · 0 评论 -
javascript jquery 插入节点方法一览
插入节点的方法一点都不难, 就是经常记不住, 或者分不清, 所以假定你已经熟练甚至精通这些方法的使用本篇旨在总结它们的差别, 用法就不详细介绍了注: before & insertBefore, after & insertAfter 目标节点和操作节点的关系应该是"兄弟关系", 但我觉得以"父子关系"描述更能表达它们的主次关系javascriptappendChild父.appendChild(子)插入位置: 父节点里的最后位置insertBefore父.insertB原创 2020-12-08 17:37:46 · 1602 阅读 · 0 评论 -
js getComputedStyle 获取对像元素的计算后样式
getComputedStyle 能取到目标节点的计算后样式(最终生效的样式), 就是所见即所得相对的 style 只能取到行内样式修改样式表后, 能获取最新有效值demo<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta na原创 2020-12-04 17:23:49 · 1861 阅读 · 0 评论 -
js 样式表入门基础及简单操作
样式表核心成员及关系表数据数据类型注释document.styleSheetsStyleSheetList相当于 style 标签的集合document.styleSheets[0]CSSStyleSheetCSSStyleSheet 继承自 StyleSheet 相当于某个 style 标签; 也就是传说中的[样式表]document.styleSheets[0].cssRulesCSSRuleList相当于某个 style 标签的规则的集合docu原创 2020-12-04 14:52:49 · 2123 阅读 · 0 评论 -
js 我猜你就是记不住的 pop, push, unshift, shift
操作过数组的码农, 应该都知道 pop, push, unshift, shift 这 4 个方法可有的时候, 就是记不住这 4 个方法谁是谁下面推荐一下我对这 4 个方法的记忆联想push: 推, 想象一个弹夹, 把子弹推(push)进弹夹, 新子弹就在弹夹的最后一项pop: 枪响, 因为弹夹是栈结构, 子弹后进先出, 所以开枪(pop)得到的是最后一颗子弹, "弹夹"里删除最后一项shift: 轮班, 想象排队轮班, 排队是队列结构, 先进先出, 轮到(shift)下一个时, 第一个离开,原创 2020-12-01 14:38:06 · 2132 阅读 · 4 评论 -
Promise, async, await 的特性随笔
昨天有个小猪问我 async/await 的问题, 说是怎么调也调不出想要的结果, 调着调着头都懵了扭头过去看了一下, 果不其然, 一层套一层简直比俄罗斯还套娃不过只要静下心来, 对照着下面的几点特性慢慢看, async/await 还是很好理解的Promise 对象不需要用 () 调用实例化 Promise 时, 第一个传入的 function 就执行了var _promise = new Promise(function() { /* 这里直接就执行了 */ })async 函数原创 2020-11-13 17:11:50 · 1953 阅读 · 0 评论 -
js 报错提示三连之try...catch
try…catch 的功能就是用来捕获报错, 无论系统错误还是自定义错误(throw)都可以try…catch - JavaScript | MDNtry…catch语句标记要尝试的语句块,并指定一个出现异常时抛出的响应try…catch 用法如下try { // 被执行的语句 // 被执行的语句中触发了报错 throw "报错信息"} catch(error) { // error 返回的报错信息 // 如果在try块里有异常被抛出时执行的语句 // 没有错误则不会执行原创 2020-11-12 18:04:49 · 2310 阅读 · 0 评论 -
js 报错提示三连之throw
相信很多码农对 throw 语句并不熟悉, 因为码农的第一目标是消灭报红, 而 throw 的主要作用就是报红面向用户的项目中, 程序报错大概是个很糟糕的用户体验但事物都有双面性, 在面向开发者的框架工具中, 报错信息无疑是必不可少的重要内容throw - JavaScript | MDNthrow语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw之后的语句将不会执行),并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块,程序将会终止。th原创 2020-11-12 17:38:08 · 2955 阅读 · 1 评论 -
js 报错提示三连之Error
编程过程中最常见的往往是 Error, 而不是 Success, 毕竟 JavaScript 中并没有 Success 这个对象而 Error 对象将是下面要讨论的主题Error - JavaScript | MDN通过Error的构造器可以创建一个错误对象Error 的用法很简单, Error(“报错信息”); new Error(“报错信息”);用不用 new 都可以所谓的"创建一个错误对象", 我觉得 Error() 更像是提供一个错误格式> Error()Error: 报原创 2020-11-12 16:46:46 · 2447 阅读 · 1 评论 -
js Browser 对象简介
浏览器 Browser 对象有5个Window表示浏览器中打开的窗口处于对象层次的最顶层文档中包含框架(frame, iframe), 浏览器会对每个框架创建一个 window 对象window 可以用于父子窗口间的通讯全局变量本质就是 window 的直属属性, 全局方法亦然5个 Browser 对象都是 window 的属性, 如: window === window.window; screen === window.screen;location.href, location.as原创 2020-11-09 16:53:28 · 2782 阅读 · 0 评论 -
js for...in 的遍历范围, hasOwnProperty 判断的意义
大部分编辑器都有代码块功能, 某些编辑器(如VS code)提供的 for…in 代码块代码如下for (const key in object) { if (object.hasOwnProperty(key)) { const element = object[key]; }}除了 for (in) {} 外, 还包含了一个 object.hasOwnProperty(key) 判断当时年轻的我就很纳闷, 为什么要有这么一个判断, key 来自于 object, 可以必然属于 o原创 2020-11-06 14:52:35 · 3047 阅读 · 2 评论 -
js 生成器 Generator 用法随笔
生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议1end“符合可迭代协议和迭代器协议” 就意味着可以被 for…of 等迭代 ↩︎原创 2020-11-05 16:01:16 · 2222 阅读 · 0 评论 -
js Object.defineProperty() 描述符的特性功能详解
Object.defineProperty(obj, prop, descriptor)在对象 obj 上新建或修改一个属性 prop, 并返回新 objobj: 要定义属性的对象prop: 要定义或修改的属性的名称或 Symboldescriptor: 要定义或修改的属性的描述符descriptor.configurable: 对象的属性的描述符的特性属性的 descriptor (描述符)分两种[数据描述符, 存取描述符(访问描述符)], descriptor 只能是其中一种;desc原创 2020-11-03 11:02:43 · 2068 阅读 · 1 评论 -
js instanceof 的工作原理细解
根据 MDN 的解释instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。s instanceof F 用递归函数来表达, 流程大致如下:function _instanceof(s, F) { if(s.__proto__ === F.prototype) { // 找到目标 return true } else if("__proto__" in F) { // 存在上一层原型1 _instanceof(s, F.__p原创 2020-10-31 17:16:45 · 5087 阅读 · 0 评论 -
js 原型链的个人理解记录
前两天有同事问我:"__proto__, prototype, constructor 在原型链里是什么作业?"今天就在稍微梳理一下根据某翻译工具翻译proto: 原始; 原型;prototype: 原型; 雏形; 最初形态;constructor: 建造者, 制造者, 建造商;根据字面意思,粗略可以这样理解__proto__: 指向原型的指针prototype: 函数才有的属性, 因为 Fun.key 这样的写法不能继承给后代, 所以要用 Fun.prototype.key 的写法con原创 2020-10-30 18:04:39 · 1947 阅读 · 0 评论 -
js 浅析 Object.prototype.toString.call(_var) 获取数据类型原理
JavaScript 作为弱类型语言, 它的数据类型从来都是个令码农头疼的问题比如用 typeof _var 获取数据类型, 简直就是不靠谱的典型案例typeof {} // "object"typeof [] // "object"typeof null // "object"工具就这样, 作为使用者也是没有办法可言的, 能做的就只有另辟蹊径解决问题所以有些年头的老码农会用另一个方法获取数据类型信息——Object.prototype.toString.call(_var)Object.p原创 2020-10-28 15:59:10 · 2669 阅读 · 0 评论 -
js 元素滚动到可视区域 软键盘遮挡input
详情请阅读scrollIntoView 与 scrollIntoViewIfNeeded API 介绍本篇仅记录一些提要scrollIntoViewIfNeeded, scrollIntoView 都是让当前的元素滚动到浏览器窗口的可视区域内.scrollIntoView() 接受 Boolean型参数和Object型参数, 默认值 true.Object兼容性差.true 顶对齐; false 底对齐.scrollIntoViewIfNeeded() 接受 Boolean型参数,只有元素不在可视区原创 2020-05-25 10:08:17 · 2352 阅读 · 0 评论 -
js 捕获子元素的 focus 事件
focus 事件可以绑定任何元素,但只有可编辑元素才可以触发 focus 事件.且 focus 事件不会冒泡. 所以不能在父元素监听子元素的 focus 事件.focusin 事件与 focus 一样是在元素获取焦点时触发.但 focusin 可以冒泡.也就是说父元可以素监听子元素的 focusin 事件.可编辑元素可以是原生的input, textarea. 也可以是 css(user-modify: read-write-plaintext-only;) 控制的div; 也可以是标签属性 (cont原创 2020-05-25 09:13:58 · 4320 阅读 · 0 评论 -
js 原生js复制到粘贴板
优点:代码少纯元素JavaScript无插件无须服务器知识点:createTextRange//ie 创建TextRange 对象createRange//非ie 创建Range 对象Range 对象execCommand//允许用户对当前文档、当前选中区域或者给定范围执行一个浏览器内部命令element.select()//Input Text select()方法;选取...原创 2020-04-14 17:36:21 · 2345 阅读 · 0 评论 -
js Selection 对象 控制文本选区
Selection 对象拖蓝用户所选择的 ranges (区域)锚点 焦点 范围 可编辑元素详见:Selection - Web API 接口参考 | MDNend原创 2020-04-14 15:51:50 · 2297 阅读 · 1 评论 -
js charCodeAt, fromCharCode 字符与Unicode编码转换
道理我都懂,就是老是记不住"a".charCodeAt(0)//97String.fromCharCode(97)//"a"end原创 2020-03-20 16:09:32 · 3395 阅读 · 0 评论 -
正则表达式 去首尾空格
去首尾空格: swq.replace(/^\s*|\s*$/g, ‘’)<!doctype html><html lang="en" data-framework="backbonejs"> <head> <meta charset="utf-8"> <title>正则去首尾空格</title> <s...原创 2020-02-10 14:29:36 · 4422 阅读 · 0 评论 -
js 做Excel, PPT文件
参考资料插件下载地址用 js-xlsx.js 这个小东西, 就可以在前端生成Excel文件. demo看参考资料另外还有个 FileSaver.js 也可以, 以后研究下原创 2020-01-09 15:32:41 · 2009 阅读 · 0 评论 -
js encode, decode 的笔记
[转]js 中编码(encode)和解码(decode)的三种方法end原创 2019-10-23 10:54:44 · 2144 阅读 · 0 评论 -
控制台插入js文件方法
new_element = document.createElement("script");new_element.setAttribute("type", "text/javascript");new_element.setAttribute("src", "https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js");document.bo...原创 2019-02-19 13:58:00 · 4355 阅读 · 0 评论 -
js Object.assign() 指派函数
今天学了个新函数assignObject.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);c...原创 2019-04-23 18:11:19 · 2199 阅读 · 0 评论 -
js 插入公共css的方法
createElement 一个 style 节点innerHTML 进需要的css代码body.appendChild 插入body中即可例:new_element = document.createElement("style");new_element.innerHTML =(".tucao-content p{font-size:18px;}");d...原创 2019-05-26 18:42:19 · 4122 阅读 · 0 评论 -
Promise 4种常规用法
Promise 4种常规用法new Promise(funA).then(funB).catch(funC)new Promise(funA).then(funB, funC)new Promise(funA).then(funB).then(funC)new Promise(funA).then(funB1, funB2).then(funC1, funC2)注:resolve, re...原创 2019-09-08 19:38:10 · 2598 阅读 · 2 评论 -
js.ownerDocument 返回某元素的根元素
HTML中, HTML 文档本身是元素的根元素返回的都是html, 并没什么用 <!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Cache-Control" CONTENT="no-cache" />原创 2019-02-15 11:27:34 · 2422 阅读 · 0 评论