Umbrella_Um的博客

前言续上一章将的addEventListener和attachEvent比较的第四个不同点续讲…事件冒泡概念：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）这就话怎么理解 >>> 看代码var ...

什么？？音视频标签在IOS手机上播放不了，你一定踩了这个坑，来看看怎么解决吧~

震惊😱 👉🏻 JSON.stringify 原来还可以这样用

js判断字符串是否为JSON格式function isJSON(str) { if (typeof str == 'string') { try { var obj=JSON.parse(str); if(typeof obj == 'object' && obj ){ return true; }else{ return fals

如何隐藏滚动条，同时仍然可以在任何元素上滚动？首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置 overflow：auto 样式即可。想要完全隐藏滚动条只需设置 overflow：hidden 即可，但是这样一来将导致元素内容不可滚动。时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。Firefox浏览器对于 Firefox ，我们可以将滚动条宽度设置为none：scrollbar-width: none; /*

问题描述在做微信分享的时候有遇到过这样的问题，，第一次分享到微信，描述和图片都能正常显示，但是打开连接用微信自带的分享功能进行分享时，就会出现以下情况：描述变链接、图片不显示、标题变更。导致的原因实现微信分享需要调用JSSDK的两个分享接口，按照微信JSSDK最新JS 1.4.0文档上说： “原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage 接口，即将废弃”。所以我们使用了最新的 wx.updateAppMessageShareData 、upd

由于项目业务升级，网站升级 https 协议。在 HTTPS 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错：Mixed Content: The page at 'https://www.example.com' was loaded over HTTPS, but requested an insecure image ‘http://static.example.com/test.jpg’. This content should also be served over H.

前言前端有时会有这样的需求：点击复制就可以复制对应的文案，这也是方便用户操作实现复制的目的，这里就整理一下实现该功能的使用方法及注意事项~~~document.execCommand相比用过这个 API 的多半是写原生 Aditor 编辑器的吧，他算是最早提供该支持的API了，API 里面有很多方法，如很常见的 加粗/斜体/字号/字体颜色/插入图片/插入链接/复制、剪切、撤销等等… 具体可以看 MDN而我们这里就来用用这个「复制」功能，废话不多说先上代码：function copy(text

siblings函数/*siblings函数, 选取node的所有兄弟节点*/function siblings(node){ if(node.nodeType === 1){ node.flag = true; //给当前节点打上一个标志 var children = node.parentNode.childNodes, length = children.length, tempArray = [],

前言Html5 终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用 Flash 去实现这一功能，还有一些网站继续采用Html <form>with enctype=multipart/form-data，但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时，你发送给它一个字节流，所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器，在这个过程一直在不断的进行文件的上传。这种方式运行的非常好，不像 Flash

文章目录1.编写高质量可维护的代码之优化逻辑判断1.1JavaScript 语法篇1.1.1嵌套层级优化1.1.2多条件分支的优化处理1.1.3使用数组新特性简化逻辑判断多条件判断判断数组中是否所有项都满足某条件判断数组中是否有某一项满足条件1.2.1函数默认值使用默认参数使用解构与默认参数复杂数据解构1.3.1策略模式优化分支逻辑处理2.框架篇之 React JSX 逻辑判断优化2.1JSX-Control-StatementsIf 标签Choose 标签For 标签With 标签3.总结4.参考文献1

1.去掉html标签function removeHtmlTab(tab) { return tab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签}2.普通字符转换成转意符function html2Escape(sHtml) { return sHtml.replace(/[<>&"]/g,function(c){return {'<':'&lt;','>':'&gt;','&':'

原文链接：https://blog.youkuaiyun.com/qq_42181069/article/details/803337791、报错截图：2、代码部分：<script>$(function(){ $('input').change(function(){ //使用JQ的ajax //结合formData实现图片预览 var sendData=new FormData(); sendData.append('i.

一、通过 排序 后的数组拿取首尾最大最小值1.原始 for嵌套循环 进行排序var arr = [54,23,58,44,76,12,39]function sortArr1(arr){ for(var i=0; i<arr.length-1;i++){ for(var j=0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ var temp=arr[j]; arr[j]

默认滚动条是在下边的,不好看,这里改一下Element-UI中的样式需要样式穿透修改，使用/deep/即可/deep/{ .el-table { overflow-x: auto; } .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper { overflow: visible; } .el-table::after { position: relative; }

日期时间格式化/** * 时间格式化 * @param {String} time 时间 * @param {String} cFormat 时间格式 * @return {String} 格式化后的时间字符串, 如【2020年6月30日 18:56:37】 */export const parseTime = (time, cFormat) => { if (arguments.length === 0) { return null } c

规则：任意正整数，正小数（小数位不超过2位）var reg=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;一般是表单提交时校验，如果是按键松开后就验证，可以参考这篇文章：JS onkeyup事件控制只能输入数字并且最多允许小数点两位...

1. 将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);//true2. for…in 循环判断var obj = {};var b = function() { for(var key in obj) { return false } return true}alert(b());//true3. es6针对对象增加了3

功能需求描述在工作开发过程中，遇见一个功能需求，要求在页面A.html对Android手机的物理返回按键进行监听，当用户点击物理返回按键时，弹出confirm弹框：用户点击“确定”，跳转至页面B；用户点击取消，仍停留在当前页面，此时点击物理返回按键，依旧弹出confirm弹框，重复上述过程。实现逻辑当前，js并没有对应Android手机物理返回按键这一事件的API，无法直接对这一事件进行监听以及后续操作，因此，我们只能通过js的其他方法，来实现近似的效果。这里，我们考虑的是使用history有关的方法

正则替换replace(/<\/?[^>]*>|(\n|\t|\r)|(\s)/g,'') var testContentc = " 我是测试文字 <img src="pic.jpg" alt="pic1"/><img src="http://192.168.1.118/hexiaozikejiControl/kindeditor/plugins/e...

大小限制、类型判断、像素判断在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept 文件类型限制。但是通常我们会用 javascript 或 jQuery 编写方法进行验证图片的大小限制、类型判断、像素判断。<input type="file" id="file" ...

前置知识----事件源定义JS 触摸事件（event）event的类型touchstart: 当手指触摸屏幕时触发（相当于Android中的ACTION_DOWN事件）touchmove: 当手指在屏幕上滑动时连续触发（相当于Android中的ACTION_MOVE事件）— 期间调用touchend: 当手指从屏幕上移开时触发（相当与Android中的ACTION_UP）touchca...

一、async和defer的定义先看看async和defer各自的定义吧，翻开红宝书望远镜，是这么介绍的1.1 defer这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在 <script> 元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延...

原生JS写一个节流的懒加载图片，看代码（内注释）HTML与CSS：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>懒加载优化</title> <style> img { disp...

mouseout: 鼠标离开事件mouseleave: 鼠标离开事件区别:不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。mouseover : 鼠标移入事件mouseenter : 鼠标移入事件不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件~~对应 mouseout...

需要考虑的问题Vue中获取DOM节点元素涉及请求数据如何确认数据到达再去渲染DOM节点涉及图片加载渲染的，如何监听DOM渲染完毕再去计算元素高度（Bug：如果涉及图片加载的，在网络不快的情况下，Vue中拿到的当前含有图片的元素的高度是不正确的，会影响后续的瀑布流布局）如何实现根据设备屏幕大小来自动计算当前瀑布流卡片的宽度，并且可自定义距离屏幕边距以及卡片与卡片元素间的距离（自定义拓展）...

isPrototypeOf作用：检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中var p = {x:1};//定义一个原型对象var o = Object.create(p);//使用这个原型创建一个对象p.isPrototypeOf(o);//=>true：o继承pObject.prototype.isPrototypeOf(p);//=&gt...

文章目录1. 格式化服务器端返回的时间2. 封装自定义时间格式工具类==2.1 时间格式代码====2.2 参数说明====2.3 调用方式====2.4 测试结果====2.5 增加功能==3. 结语1. 格式化服务器端返回的时间一般如果后端不做处理的话，我们拿到的响应中的服务端时间一般都是这样的：然后直接拿去页面展示，当然是不好看的，所以我们封装一个格式化时间的通用型工具类，通用型指的...

作者：rainjay原文链接：https://github.com/rainjay/blog/issues/1script标签用来在网页中执行JavaScript，它可以直接包含JavaScript代码，也可以直接通过src指向一个同域或者不同域的外链1. script标签默认会阻塞页面解析，并按照它们出现的顺序执行<script src="a.js"></scrip...

文章目录一、位运算符二、区别（题外话）2.1 与运算分为普通与（&）和短路与（&&）两种2.2 或运算分为普通或（|）和短路（||）或两种三、AND运算符'&' -- 按位与3.1 '&' 计算原理过程3.2 '&' 应用场景四、OR运算符'|' -- 按位或4.1 '|' 计算原理过程4.2 '|' 应用场景4.3 位运算符 '|' 、'~~' 与...

2进制 - 4进制 - 8进制 - 10进制 - 16进制 - 32进制

前言在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 为了深入理解 request...

this 的指向在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，来，跟着我朗读三遍： this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象。 记住这句话，this 你已经了解一半了。下面我们来看一个最简单的例子：例 1：var name = "windowsName";...

111

数组去重的方法（十种方法）一、利用ES6 Set去重（ES6中最常用）代码：let arr = [1,1,'数组','数组',false,false,undefined,undefined,null,null,NaN,NaN,{},{},[],[]]function unique(arr){ return Array.from(new Set(arr))}console.log(un...

一、单等于号1.单等于号具有赋值作用我们在定义变量时，会对变量进行赋值，例如a=1，就是把1赋值给a。这就是在初始化对象的时候进行赋值。2.单等于号具有引用对象作用比如我们写了 var a = 1;var b = a ,表示变量a指向的内存地址与b相同（只是内存地址的复制），即a，b指向同一个栈中的值，这时候b就引用了a的地址，起到了传地址的作用。如果改变a，b也会相应改变（浅拷贝中引用...

js中的基本类型和引用类型1.JavaScript中的变量类型有哪些？（1）基本类型（基本类型）：字符串（string）、数值（number）、布尔值（boolean）、undefined、null （这5种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值）、symbol (ECMAScript 2016新增了一种基本数据类型 )（2）引用类型：对象（Object）、数组（Ar...

解决safari中IOS 8601标准问题描述：开发中需要写一个倒计时，但是时间周期是根据后端传过来的开始时间和结束时间进行计算的，后端传过来的字符串日期格式为:2017-11-12 22:11:22,在前端中我们使用 new Date()来将其转为date对象，一切进行顺利，在各个浏览器都没问题，但是safari中却出现了“Invalid Date”的异常信息解决：一开始以为是Date(...

new Date() 日期格式处理

JS实现点击按钮复制，剪切，撤销，恢复 input/textarea 标签中的值HTML代码：<body><div> <textarea id="code-text" cols="30" rows="10" maxlength="2000"> 成功源于不懈的努力。　　如果你想得到，你就会得到，你所需要付出的只是行动。　　天行健，君子以自...