今天就遇到了这个需求，当我上传文件超时或者失败后，再选择同一个文件上传，是不会触发change事件的，所以失败或者成功后我们需要重置下元素。<form action="" id="uploads"> <input type="file" id="fileUp"/> </form>1# 将整个form表单重置 $("#uploads")[0].reset(); //重置 2# 将当前input标签的value值设为空 document.getElem...
typeof无法准确的判断object类型，instanceof判断起来还需要new出对象，想来想去最稳的就是Object.prototype.toString.call，于是乎组合一下：//判断数据类型 function getType(value) { let type = typeof value; if (type !== "object") { return type; } return Object.prototype.toString.call(value).slice(8, -1).toLowerCase...
应狗群友的要求，写一个网站已经运行了多少时间的代码，本来php就完事了，非要js的。无奈总结了下百度上的一些方法，写了一个稍微花了点心思的方法，使用很简单，new出这个函数，在使用init初始化方法，传入参数即可，完全不需要jq。事先声明：本方法没有考虑到闰年平年月份统一30天计算所以时间上可能不是很准确，但是相对准确，233有能力完全可以自定义，我都有注释，中文友好满分。不多说，上代码function WebsiteElapsedTime() { //初始化 this.init = function({ id = "", ...
快速了解axios常用功能，适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数，第一个是url，第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数：请求地址，上传的数据{}，{}键值对配置对象。当然还有一些其他请求类型，可以查看官方文档，这两种常用。除了.xxx方法使用协议，还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适...
群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。首先当我通过api请求后端时，后端返回的其实是一个键值对对象，里面并没有实际的文件，只有一个url下载地址。https://xxxxxxasdasdas.mp3大概是这么一个地址段，可能会更长一些，总体是差不多。当时我想得挺简单，我直接就将这个url地址赋值给a元素href，然后a.click触发下载，但是实际上并不会下载，谷歌浏览直接就给你打开这个文件了。如果需要a链接下载这个文件，我们需要先将文件下载下来，然后本地转成url地址，再赋值给a元素，再click即可。于是代码如下：//我的下载方法 function myD...
之前写过一片使用fetch下载文件的方法，但是如果后端返回一个错误对象，使用response.blob()会将这个错误对象直接转为blob对象，然后被转为文件下载下来。但实际上我们是要区分处理的，比如是文件流我们就下载文件，是错误对象，我们就进行错误提示和抛出错误。所以这里，我主要分享下我对错误处理的思路。基础知识首先，在fetch第一个then回调中，我们可以对response对象进行三种方法操作：response.text 返回的是一个纯文本 是一个promise对象response.json 返回的是一个对象（json/array） 是一个promise对象response.b...
之前研究了下axios的取消请求操作，也配合vue写了篇文章笔记，现在考虑下资源请求了。当vue页面在切换的时候，一般不同的页面有不同的api请求，也有一些资源的请求下载，比如图片，视频...；当资源文件很大，而服务器带宽不足，并且多个页面同时打开，很容易造成服务器的堵塞。而正因为堵塞，页面的资源一直卡在下载中，加上单页app的效果，我们可能会切换其他页面浏览，但是由于上一个路由页的资源已经在加载中了，即便我们切换了页面，资源还是处于下载中的。所以我们要解决这个问题。怎么办？window.stop();这个方法会直接结束当前页面的所有请求，类似于我们点击了浏览器的x按钮，不进行加载了。目...
className方式我自己之前学es5的时候，老师教我们是用的是className属性，他是dom的一个属性，返回元素的class值，兼容性可以说是通杀吧，所有浏览器都是支持的，但是，他是一个string操作。document.getElementById('myid').className; 他会返回一个string的值(空的话返回empty string，empty string===“”,length为0)，而class的设置，他是需要空格的：class="class1 class2"，当我们添加一个新的class时就不得不考虑空格的问题：...
最近有这么一个需求，就是后端api地址返回一个文件，这个文件是已经格式化好的，比如表格.xlsx，或者是其他文件zip这些。但是后端他加了鉴权，所以如果直接a链接访问这个接口，我们无法在头信息上添加token字段，于是这个请求被作为无效。然后我使用了axios的请求，结果返回的内容，转换为blob对象后，下载完文件就被破坏了，无法打开。这里我贴一下之前的代码。api().then(res=>{ let blob = new Blob([err]); let a = document.createElement("a"); a.href = URL.c...
js里面的防抖动，就是当一个函数不断被触发，但是实际有效值是最后一次的时候，为了节省资源，提高性能，让这个函数只触发最后一次。比如常见的resize事件，scroll事件，非常典型的一个重复触发，有效的是最后一次。那么怎么做呢？function debounce(fn, delay) { // 维护一个 timer let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments;...
最近有一个地方需要计算过期时间，然后返回天数，但是我用diff计算，得到的结果就是和后端算的相差一天。//后端返回的时间 const endTime = "2021-12-04"; //前端获取当前时间 const startTime = Date.now(); //或者new Date().getTime() //计算结果 const day = moment(endTime).diff(startTime,"days");得到的结果，永远是差一天的结果。比如今天是时间是：2020-12-08 10:46:00，转为时间戳为：160739556...
直接把饿了么的返回顶部动画提取出来了，直接上代码//返回顶部函数 const cubic = (value) => Math.pow(value, 3); const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2; const el = document.documentElement; export const goScroll = function() { const beginTime = Date.n...
包含数字、字符、特殊字符，6-16位/(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9])[\S]{6,16}$/提示信息：密码为6-16位，必须包含数字和字母和至少一个特殊字符!@-_=<>#*%+&^$
阻止双击选中文本个人有两种实现方式，可以根据实际环境进行操作。使用非文本元素如果我们对一个div元素双击，你会发现，他的文本会被选中，如果不想被选中，只能通过css的方式来进行操作，但是，css一旦设置，就永远不能选中了，也许，我们只是希望在双击时不选择，用户滑动选择时已经可以选中文字。css阻止选中.no-select { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-sel...
函数注释的一个常用的格式：/** * @description: 函数描述 * @param {类型} 参数 描述 * @return {类型} 描述 */description 就是函数的说明，干什么用的param 是函数的参数； {}里面表示这个参数是什么类型，后面接参数名称，描述，参数有多少个，@param就有多少个return 表示要输出的内容，一般可以省略不写，也可以写，和param 差不多示例/** * @description: 测试函数 * @param {*} a 任何类型参数 * @param {*} b 用来xxx * @return {*} 返回空...
今天遇到一个问题，就是在使用mock模拟本地api请求的时候，因为做了一个全局配置文件，配置文件里面有一个devUrl属性，这个属性是本地的url地址，所以我就想着，让mock那边自动将devUrl和api地址进行拼接。但是api地址段不一定只是字符，有可能是正则。所以，我们需要进行拼接正则。知识点1.如何获取正则的匹配的那段文本?也就是/[a-z]/ig中我们怎么拿到[a-z]，因为这个内容是自定义的，你不知道他会是什么内容。这里我们就需要了解到reg对象的source属性：RegExpObject.sourcesource就可以直接返回给我们模式匹配所用的文本/[a-z]/ig.so...
simplebar的使用，千万不要使用GitHub上的bate版本，会有问题。目前还是6.0的bate测试版，正式版为5.2.1官网githubnpmnpm那支持vue和其他框架，用法要在那看。普通html使用无需jq，只需要new出这个构造函数，并将需要设置滚动条的dom传入即可。引用<link rel="stylesheet" href="https://cdn.staticfile.org/simplebar/5.2.1/simplebar.min.css" /> <script src="https://cdn....
最近想给博客主题增加一个一键复制代码的功能，结果发现highlight.js并不支持一键复制，这就非常的可惜啊。于是百度了下，找到一个不错的例子，根据其例子我自己写了一个通用的方式。效果图安装[hide]需要使用clipboard.js，所以需要js引入这个复制用的库<script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js"></script>引入完毕后我们需要给每个代码块增加一个复制按...
今天写vue组件的时候碰到一个问题，我创建了一个子组件，这个子组件会通过父组件传过来的数组对象进行遍历，然后生成多个筛选菜单，这不是一个菜单，而是有多个，比如地区菜单，分类菜单，标签菜单，反正很多。每个菜单都要有对应的active状态，我才能知道他选中了没有，所以又传给子组件一个对象，对象里面包含了所有的菜单id的键值对，但是值是空的，等待子组件状态发生变化，再修改对象中的值。本来我是想省点事，不用vuex，然后利用对象的特性，引用类型，子组件可以直接修改对象里的属性，我父组件也能监控得到，但是问了下群友，说这种方式到时候很乱，所以我又改用了官方建议的方式，用emit。为此就用了sync...
最近评论