实用ES6代码片段
将字符串复制到剪贴板 const copyToClipboard = str => { const el = document.createElement(‘textarea’); el.value = str; el.setAttribute(‘readonly’, ”); el.style.position = ‘absolute’; el.style.left = ‘-100%’; document.body.appendChild(el); co …
分类： JavaScript
JavaScript 反控制台调试
一、开发者工具检测（Chrome） 这项技术利用的是div元素中的id属性，当div元素被发送至控制台（例如console.log(div)）时，浏览器会自动尝试获取其中的元素id。如果代码在调用了console.log之后又调用了getter方法，说明控制台当前正在运行。 let div = document.createElement(‘div’); let loop = setInterval(() => { console.log(div); console.clear(); }); Object.defineProperty(div,“ …
前端实用资源库汇总
包管理器 管理着 JavaScript 库，并提供读取和打包它们的工具。 Yarn: Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具官网 npm：npm 是 JavaScript 的包管理器。官网 Bower：一个 web 应用的包管理器。官网 component：能构建更好 web 应用的客户端包管理器。官网 spm：全新的静态包管理器。官网 jam：一个专注于浏览器端和兼容 RequireJS 的包管理器。官网 jspm：流畅的浏览器包管理器。官网 Ender：没有库文件的程序库。官网 volo：以项目模板、添加依赖项 …
js 获取精准DOM尺寸&Css伪类操作
Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 let style = window.getComputedStyle(element, [pseudoElt]); element 用于获取计算样式的Element。 pseudoElt 可选 指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。 返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。 getComputedStyle与style的区别 使用el …
快速理解 JavaScript – call(), apply(), bind()
Function.prototype.call() call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。 function printThisAndData(…data) { console.log(this.data, …data); } const obj = { data: 0 }; const data = [1, 2, 3]; printThisAndData.call(obj, data); // logs: 0 [1, 2, 3] printThisAndData.call(obj, …data); // logs: 0 1 2 3 …
JSON.stringify() 的 5 个特性
JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。 JSON.stringify() 是用于调试的最常见函数。 //初始化一个 user 对象 const user = { “name” : “Prateek Singh”, “age” : 26 } console.log(user); // 结果 // [object Object] 哦！console.log() 没有帮助我们打印出期望的结果。它输出 [object Object]，因为从对象到字符串的默认转换是 [object Object]。因此，我们使用 JSON.stri …
javascript 调用摄像头
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。 <!doctype html> <html> <head> <title>js调用摄像头拍照上传图片</title> <meta charset=“utf-8& …
impress.js 使用教程
一、官方示例 项目地址：https://github.com/impress/impress.js 文件构成 impress： js impress.js（JavaScript文件，提供特效支持，核心库） css impress_demo.css（CSS文件，提供样式支持） html index.html（HTML文件，幻灯片入口） 二、HTML说明 头部 <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8” /> …