JavaScript
关注
分享
扫一扫
Stavin Li
许一人之偏爱，尽余生之慷慨。
展开
-
你不知道的qs.stringify
在项目开发中，发现会导致等特殊符号转义，导致页面处理正常逻辑时报错。例如，实际上我们想要的结果是这时候可以配置options中来处理。原创 2024-02-01 15:58:29 · 1179 阅读 · 0 评论 -
H5实现手机扫描二维码识别
主要依赖于二维码解析库，它是一个纯javascript的二维码阅读库。这个库接收原始图像，并将定位、提取和解析其中发现的任何QR码。jsQR 被设计成一个完全独立的库，用于扫描二维码。按照设计，它不包含任何特定于平台的代码。这使它可以轻松扫描前端网络摄像头流、用户上传的图像，或用作后端 Node.js 进程的一部分。原创 2023-05-11 15:28:40 · 1784 阅读 · 1 评论 -
你不知道的图片批量下载
核心原理：利用a标签 download属性。但只限于同源URL，非同源的话会打开图片，除非原创 2023-01-10 20:17:23 · 524 阅读 · 0 评论 -
js 水平无限滚动字幕
https://github.com/StavinLi/horizontal-marquee原创 2022-09-09 15:53:54 · 347 阅读 · 0 评论 -
js 正则匹配获取文件格式、匹配相同字符间文字及不同字符间文字
js 正则匹配获取文件格式、匹配相同字符间文字及不同字符间文字原创 2022-08-12 14:30:11 · 956 阅读 · 0 评论 -
js video清空src
let video = documnet.querySelector('video')try { if ('srcObject' in video) { video.srcObject = null; } else { // Avoid using this in new browsers, as it is going away. video.src = null; }} catch(e){ console.log(e)}注意src置为''无法清空video 且原创 2022-05-10 10:21:05 · 2173 阅读 · 0 评论 -
sortablejs实现table拖拽
1.安装sortablejsnpm install sortablejs --save-dev-或yarn add sortable -D2.调用const tbody = document.querySelector('.ant-table-tbody');const _this = this;this.sort = Sortable.create(tbody, { filter: '.filtered', // 'filtered' class is not draggable原创 2021-09-15 20:48:27 · 785 阅读 · 0 评论 -
rem动态计算rem
((win,doc){ const docEl = document.documentElement, calc = function(){ let clientWidth = docEl.clientWidth if(clientWidth>=750){ docEl.style.fontSize = '100px' }else{ docEl.style.fontSize = 100 * clientWidth / 750 + 'px' } } window.ad原创 2021-03-03 21:15:03 · 548 阅读 · 1 评论 -
in 与 hasOwnProperty的区别
in 与 hasOwnProperty的区别in 不仅会查找对象实例自身属性，还会查找其原型属性hasOwnProperty 只会查找对象实例自身属性let obj = {name: 'ys'}Object.setPrototypeOf(obj,{action:'move'})console.log('name' in obj) // true console.log('action' in obj) // trueconsole.log(obj.hasOwnProperty('n原创 2021-07-20 19:36:38 · 330 阅读 · 0 评论 -
Object对象原型方法调用
hasOwnProperty调用let obj = {name: '123'}1.({}).hasOwnProperty.call(obj,'name')//true2.Object.prototype.hasOwnProperty.call(obj,'name')//true3.obj.hasOwnProperty('name') //truetoString调用let obj = {name: '123'}1.console.log(({}).toString.call(obj)原创 2021-07-20 17:48:34 · 475 阅读 · 0 评论 -
__proto__、getPrototypeOf()、与setPrototypeOf()
__proto__是一个内部属性，不是一个正式的对外的API在操作原型对象时应该a.使用Object.getPrototypeOf()代替读取操作，b.使用Object.setPrototypeOf()代替设置操作。获取对象原型function User(){}let u = new User()u.__proto__ === Object.getPrototypeOf(u); // true设置对象原型let a = {}a.__proto__ = {b:1}相当于Objec.原创 2021-07-20 17:29:34 · 558 阅读 · 0 评论 -
js video不能自动播放，获取video宽高，跨域video截图，监听video.currentTime
1.video 不能 自动播放据新政策，媒体内容将在满足以下至少一个的条件下自动播放：a.音频被静音声音设置为0 , 即video新增mutedb.用户和网页上的交互行为（包括点击、触摸、按下某个键等）c.网站已被触发这白名单；如果浏览器确定用户经常与媒体互动，可能会自动通过首选项或其他用户界面功能手动操作d.自动播放策略应用到或者其文档上否则，会被阻止。导致事件被其他人的具体情况以及可能会因为浏览而异，但最好是遵循以上的原则。2.获取video视频的宽高通过canplay 事件，其他原创 2021-07-20 16:11:04 · 1632 阅读 · 0 评论 -
8种数据类型和8种值为falsy
一. 8种数据类型基本数据类型BooleanNumberStringundefined - 表示没有值，此处应该有值，但是未定义。null - 表示没有对象，此处不应该有值。BigIntSymbol引用数据类型Object （普通对象，数组，set，map，weakset，weakmap，Date日期，RegExp正则）二. 8种值为falsyfalse0-00n‘’ 、""、``undefinednullNaN...原创 2021-07-19 15:29:04 · 268 阅读 · 0 评论 -
Promise链式调用解惑
case 1：let promise = new Promise((resolve,reject)=>{ reject(new Error('Test'))}).catch(e=>{ console.log(e)})console.log(promise)//Promise {<fulfilled>: undefined}//__proto__: Promise//[[PromiseState]]: "fulfilled"//[[PromiseResult]]:原创 2021-05-26 16:07:42 · 448 阅读 · 0 评论 -
获取设备像素比及屏幕宽高，便于@media机型适配
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var screenwidth=window.screen.width; var screenheight=window.screen.he原创 2021-02-23 16:17:13 · 538 阅读 · 0 评论 -
h5设置页面title为空
<script> document.title ='\ u200E'; </ script>原创 2021-02-22 19:08:03 · 1383 阅读 · 0 评论 -
js 定时器0 和 1 轮询
let index = 0;方法一setInterval(()=>{ index = !index * 1})方法二 setInterval(()=>{ index = index ? 0 : 1})方法三setInterval(()=>{ index++ index = index == 2 ? 0 : index})原创 2020-11-03 11:06:56 · 474 阅读 · 0 评论 -
面试算数
数组存在a[i]+a[b]==a[c]let sortArr = [1, 3, 4, 6, 7, 8]console.log(three(sortArr))function three(arr) { var obj = {}; var newArr = [] for (let i = 0; i < arr.length; i++) { for (let j = 1 + i; j < arr.length; j++) { ob原创 2020-09-15 21:30:53 · 321 阅读 · 0 评论 -
js 弹窗弹出+关闭+拖动效果
需求打开时，从右下角弹出关闭时，从右下角收回拖动效果技术点jquery animate() 方法draggabilly插件代码html<span class="tip">消息通知</span><div class="dialog"> <h3>弹窗标题 <span class="close">关闭</span></h3></div>javascript&l原创 2020-07-03 09:53:49 · 677 阅读 · 0 评论 -
js 字符串根据下标索引实现高亮显示
效果图实现代码<script> var str = `我们于前述时间更新了《爱奇艺隐私政策》的相关内容。本次更新的内容主要包括： 依照最新法律要求更加详细地介绍了我们对儿童个人信息的保护规则并据此增加了附件一《爱奇艺儿童个人信息保护规则》、增加了身份认证功能下我们对身份认证信息的收集和使用情况以及其他文案描述性内容调整等。 请您在使用/继续使用爱奇艺集团的产品与/或服务前仔细阅读和充分理解全文，并在同意全部内容后使用/继续使用。` var list = [原创 2020-05-11 15:51:22 · 1113 阅读 · 1 评论 -
js postMessage实现iframe同步滚动对比
注意：不能用绝对路径打开html，否则报错 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null').1.index.html<!DOCTYPE html><...原创 2020-04-29 10:54:19 · 711 阅读 · 1 评论 -
js表单页面退出或刷新时，如何触发事件保存表单内容
window.addEventListener('beforeunload', function(e) { saveForm() e.preventDefault(); });function setCookie(val) { //cookie设置[{key:value}]、获取key、清除['key1','key2'] for (var i = 0, len = va...原创 2020-03-18 14:39:59 · 1083 阅读 · 0 评论 -
js 行内事件JSON对象传参
<img onclick="getInfo(reData({id:1}))"/>function reData(data) { return typeof JSON.parse(data) == "object" ? data.replace(/"/g, '"') : JSON.stringify(data).replace(/"/g, '&quo...原创 2020-03-18 14:14:59 · 710 阅读 · 0 评论 -
js @功能实现
PC端html<link rel="stylesheet" href="/atwho/jquery.atwho.css" /><script type="text/javascript" src="/atwho/jquery.caret.js"></script><script type="text/javascript" src="/atw...原创 2019-11-20 09:58:21 · 3800 阅读 · 0 评论 -
js如何点击父级元素关闭，点击子级不受影响
$(".parent").on("click", function() {//点击父级元素关闭 $('.parent').hide();});$(".parent").on("click", ".son", function(e) {//点击子级不受影响 e.stopPropagation()})原创 2019-11-16 19:20:22 · 2890 阅读 · 0 评论 -
js判断点是否在平面几何图形内(基于百度地图方法)
1. 点线面数据格式点: { x: xxx, y: xxx }线: [{ x: xxx, y: xxx }, { x: xxx, y: xxx }]面: [{ x: xxx, y: xxx }, { x: xxx, y: xxx }, { x: xxx, y: xxx }…]2. 方法详解//判断点是否在另一平面图中function isPointInPolygon(po...原创 2018-09-05 10:51:54 · 3905 阅读 · 0 评论 -
js 判断平面几何图形是否重叠
1. 点线面数据格式点: { x: xxx, y: xxx }线: [{ x: xxx, y: xxx }, { x: xxx, y: xxx }]面: [{ x: xxx, y: xxx }, { x: xxx, y: xxx }, { x: xxx, y: xxx }...]2. 重叠情况分析：无外乎相交与包含两种情况(1 判断相交//判断两多边形线段是否相交fu...原创 2018-09-05 10:20:08 · 7385 阅读 · 18 评论 -
js 基础词汇及方法整理
闲余之际整理了一些Js初级词汇，分享于大家，现炮制如下:一.数组1.检测arr.isArray(要判断的变量):判断一个变量是否是数组2.数组方法1).arr.toString():数组转为字符串,默认使用逗号来分隔元素2).arr.join('指定符号'):使用指定符号分隔元素3).arr.push('新元素1','新元素2'):从数组末位的位置添加新元素,并返...原创 2018-08-20 09:56:22 · 1994 阅读 · 0 评论 -
js日历控件-选择入住离开时间 super-calendar
super-calendar日历-选择入住离开时间 效果预览在线预览 https://stavinli.github.io/super-calendar/index.html开源地址 https://github.com/StavinLi/super-calendar.git使用说明1.引入文件css &amp;lt;link rel=&quot;stylesheet&quot;...原创 2018-07-24 16:39:10 · 1887 阅读 · 1 评论 -
js 两条直线（可自动延伸）的交点坐标计算
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;原创 2017-01-10 10:31:40 · 4233 阅读 · 0 评论 -
js 对象去重
【代码】js 对象去重。原创 2017-01-11 15:20:43 · 8988 阅读 · 5 评论 -
js $和Date对象扩展time方法
jquery 扩展time方法$.extend({}); //为jQuery类添加添加类方法，可以理解为添加静态方法。1.个位时间加0前缀addZero: function(temp) { return temp &amp;amp;amp;amp;amp;amp;amp;lt; 10 ? &amp;amp;amp;amp;amp;amp;quot;0&amp;amp;amp;amp;amp;amp;quot; + temp : te原创 2018-09-11 18:08:10 · 1558 阅读 · 0 评论 -
js 文件上传的两种类型： FormData、FileReader
&amp;amp;lt;input type=&amp;quot;file&amp;quot; title=&amp;quot;&amp;quot;&amp;amp;gt;一. 通过new FormData()上传$(&amp;quot;input&amp;quot;).on(&amp;quot;change&amp;quot;, functi原创 2018-10-24 14:50:09 · 2653 阅读 · 0 评论 -
小问题及技巧
1.数组代替对象var nameIndex = 1;var peopleObj = { 1:&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;小米&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;, 2:&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;小明&amp;amp;amp;amp;amp;amp;amp;amp;amp;quo原创 2018-12-27 10:03:36 · 376 阅读 · 0 评论 -
jquery温故知新-核心篇
1.jQuery([selector,[context]])//在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。$(&amp;quot;input:radio&amp;quot;, document.forms[0]);//在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。$(&amp;quot;div&amp;quot;, xml.responseXML);2原创 2019-01-18 15:13:16 · 395 阅读 · 0 评论 -
jquery温故知新-选择器篇
1.#id使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：\\。&amp;amp;lt;span id=&amp;quot;foo:bar&amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span id=&amp;quot;foo[bar]&amp;quot;&原创 2019-01-18 18:07:40 · 362 阅读 · 0 评论 -
jquery温故知新-属性篇
1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值。\\把src属性的值设置为title属性的值。$("img").attr("title", function() { return this.src });2.removeAttr(name)从每一个匹配的元素中删除一个属性1.6以下版本在IE6使用JQuery的removeAt...原创 2019-01-21 14:32:22 · 338 阅读 · 0 评论 -
jquery温故知新-css篇
1.css(name|pro|[,val|fn]) 1.9*访问匹配元素的样式属性。jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-原创 2019-01-22 16:34:52 · 431 阅读 · 0 评论 -
jquery温故知新-文档处理篇
1.append(content|fn) 与 prepend(content|fn)append(content|fn) 向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。prepend(content|fn) 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。参数content appen...原创 2019-01-23 11:03:50 · 389 阅读 · 0 评论 -
js 鼠标、键盘等事件的自动触发
代码if(document.all) { document.getElementById("clickMe").click();}// 其它浏览器else { var e = document.createEvent("MouseEvents"); e.initMouseEvent("click", true, true); document.getEle..原创 2018-05-23 09:10:03 · 10173 阅读 · 0 评论