javascript
陈景夏
csdn平常用来记录代码,如有错误,诚邀指正。如有帮助到你,请点个赞嚯。
展开
-
input.focus()失效?vantui autofocus属性失效?
首先声明,input自动聚焦功能ios、safari不支持;原因在于,ios、safari想要聚焦input,必须将input.focus()触发事件写在点击事件内部,onClick、addEventlistener。如果你的页面自动聚焦在安卓or普通浏览器无法自动聚焦,检查该页面的input是否存在多个autofocus属性。温馨提示:弹窗也属于同一个页面下噢。接下来解释,安卓or普通浏览器自动聚焦功能无效?原创 2022-10-27 15:42:21 · 1687 阅读 · 1 评论 -
vue2 + elementui el-upload文件上传后回显及重新提交思路
vue2 + elementui el-upload文件上传后回显及重新提交思路原创 2022-07-14 11:15:39 · 4630 阅读 · 1 评论 -
vue2 + elementui 表单自定义校验
vue2 + elementui 表单自定义校验 文件上传校验原创 2022-07-14 10:58:25 · 441 阅读 · 0 评论 -
js 二进制流转换为base64 格式
js 二进制流转换为base64 格式原创 2022-07-14 10:53:44 · 4243 阅读 · 1 评论 -
将本地图片转换为base64格式
js将图片转换为base64格式原创 2022-07-08 16:16:35 · 979 阅读 · 0 评论 -
记录一次cookies设置
用的是js-cookie.js基础用法的话可以参考这个博主:https://www.cnblogs.com/NanKe-Studying/p/13952558.html非常的简介明了。在设置domain域时:在清除cookies时:Cookies.remove(arr[0])无法直接删除直接的cookie。(本地环境是可以删除的,生产不行。)需要设置指定的path或者domain来清除指定的cookie,例如:Cookies.remove(arr[0], { path: ‘/’, domain: ‘原创 2022-07-06 16:32:21 · 219 阅读 · 0 评论 -
锚点定位及页面滑动到指定dom
先介绍下API及参数:document.querySelector('#需要定位的ID').scrollIntoView({ behavior: "smooth", // 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto" block: "center", // 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start" inline: "nearest" // 定义水平方向的对齐, "start"原创 2022-04-19 15:13:56 · 769 阅读 · 0 评论 -
记录一次vue-router在beforeEach中addRoutes无效
router.beforeEach((to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { if (!store.getters.name) { // 模拟一个请求 setTimeout(() => { // 请求原创 2022-04-08 09:31:27 · 2651 阅读 · 0 评论 -
认识回流重绘
为了让项目的运行效率更高,减少开销,需要对重排、回流、重绘有一定的了解。重排和回流其实是一回事。浏览器渲染浏览器在渲染页面的时候,大致是以下几个步骤:解析html生成DOM树,解析css,生成CSSOM树,将DOM树和CSSOM树结合,生成渲染树;根据渲染树,浏览器可以计算出网页中有哪些节点,各节点的CSS以及从属关系 - 回流根据渲染树以及回流得到的节点信息,计算出每个节点在屏幕中的位置 - 重绘最后将得到的节点位置信息交给浏览器的图形处理程序,让浏览器中显示页面回流回流:英文叫refl转载 2022-03-29 11:06:14 · 177 阅读 · 0 评论 -
Document.createDocumentFragment()
记录下一个方法,源自MDN该方法会创建一个新的空白的文档片段。DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。示例:var element = document.getElementByI原创 2022-03-29 10:43:31 · 284 阅读 · 0 评论 -
toLocaleString()千分位格式、日期格式转换
将数字变成千分位格式:let num=123456789;console.log(num.toLocaleString()); // 123,456,789将日期格式转换:new Date().toLocaleString('chinese',{hour12:false}) // "2022/3/25 16:55:08"new Date().toLocaleString('chinese',{hour12:true}) // "2022/3/25 下午4:55:13"更多待补充…...原创 2022-03-25 16:57:12 · 1088 阅读 · 0 评论 -
记录一次pc端文件下载与打开
openClick() { // window.open(this.url); window.open("http://localhost:8080/info.pdf"); // window.open("http://localhost:8080/test.jpg");},loadClick() { // 注意地址得同源,非同源会直接打开 let dom = document.createElement("a"); dom.target = "_blank"; //原创 2022-02-25 17:26:56 · 246 阅读 · 0 评论 -
记录一次9宫格转盘
<template> <div class="turntable clearfix"> <div class="music1"></div> <div class="prizeBox clearfix"> <div class="prizeTle"></div> <ul> <li v-for="(item, indx) in p原创 2022-02-11 14:52:59 · 389 阅读 · 0 评论 -
针对Object和Array深拷贝处理
深拷贝:版本一:var obj = {a:1,b:2,c:3}var newobj = JSON.parse(JSON.stringify(obj))obj === newobj // falseJSON.parse(JSON.stringify(obj))大多数情况下这么做深拷贝是没有问题的。但是:当对象中有字段值为undefined时,转化后该字段会直接消失;当对象中有字段为RegExp对象时,转化后该字段会变成{};当对象中有字段为NaN时,转化后该字段会变成null;当对象中存原创 2022-02-10 16:29:02 · 321 阅读 · 0 评论 -
获取dom元素信息
element.clientWidth;/* clientWidth = width+左右padding; 内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话)。*/element.offsetWidth;/* offsetWidth = width + 左右padding + 左右b原创 2022-02-10 16:20:09 · 451 阅读 · 0 评论 -
常用请求提交格式
application/json广泛应用Content-Type: application/json;charset=utf-8{"title":"test","sub":[1,2,3]}application/x-www-form-urlencoded广泛应用于post请求Content-Type: application/application/x-www-form-urlencoded;charset=utf-8title=test&sub%5B%5D=1&sub%5B%原创 2022-02-10 16:15:40 · 377 阅读 · 0 评论 -
Promise.all错误处理
function requestFirst() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('第一个请求返回'); }, 1000) })}function requestSecond() { return new Promise((resolve, reject) => { setTimeou原创 2022-01-17 14:28:06 · 1381 阅读 · 0 评论 -
服务器图片转化为base64进行海报合成
问题:html2canvas.js 在合成海报时,海报如果是服务器地址将会报跨域,这时需要将图片转化为base64格式再去进行合成。<!-- 海报弹窗 --><divPopup :parPopup.sync="bannerPopup" @momentCloseClick="momentCloseClick"> <div class="bannerPopup"> <div class="bannerImg" ref="saveImgRef"&原创 2022-01-17 11:22:26 · 682 阅读 · 0 评论 -
URLSearchParams获取url参数
URLSearchParams// 先模拟一个url对象let url = new URL('http://localhost:11123/index.html?actNumber=ACT0001&channelId=11&obj="{\"name\":\"晨淘淘\",\"age\":18}"#/')console.log(url);let params = new URLSearchParams(url.search.slice(1));console.log(params);原创 2022-01-13 11:21:39 · 925 阅读 · 0 评论 -
记录一个抛物线
https://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%e5%85%83%e7%b4%a0-%e6%8a%9b%e7%89%a9%e7%ba%bf-%e8%bf%90%e5%8a%a8-%e5%8a%a8%e7%94%bb/文件:parabola.js借鉴网上的抛物线写了个添加购物车的动画<style> * { margin: 0; padding: 0; } .i.原创 2022-01-12 16:43:34 · 165 阅读 · 0 评论 -
RSA非对称与AES加解密使用
详细介绍参考简书:https://www.jianshu.com/p/5008a407b558考虑到密钥不能暴露在前端,因此采用了RSA非对称加解密方式。window系统可以通过git bash通过公钥进行加密,私钥进行解密。附上压缩包链接:https://vncdn.mobi88.cn/ct1130/public/jsencrypt.min.js...原创 2021-11-30 15:47:03 · 110 阅读 · 0 评论 -
常用工具包
// 封装公用方法let common = { // 判断电话号码格式是否正确 /** * 【数据卡】:14号段以前为上网卡专属号段,如中国联通的是145,中国移动的是147,中国电信的是149等等。 【虚拟运营商】:170[1700/1701/1702]、162(电信),1703/1705/1706、165(移动),1704/1707/1708/1709(联通)、171、167(联通) 【卫星通信】: 1740[0-5] (电信),1349(移.原创 2021-11-12 09:39:13 · 77 阅读 · 0 评论 -
动态控制页面滑动,特别是万恶的微信浏览器
.modal-open { // 两个属性,禁止屏幕跟随滚动 overflow: hidden; touch-action: none;}// 动态添加类,可以让微信浏览器禁止拉动页面。示例:watch: { parPopup(newVal) { this.show = newVal; if (newVal === true) { document.body.classList.add("modal-open"); } els原创 2021-11-04 11:27:49 · 244 阅读 · 0 评论 -
js算法记录
找出出现次数最多的项。let str = “a,b,c,d,e,f,g,a,b,c,a,a,b,b,a,a,t”;// 只用了一次循环let arr = str.split(","); let flagArr = [], obj = {}; let maxKey = "", maxNum = 0; arr.forEach((item, index) => { if (flagArr.indexOf(item) === -1) { .原创 2021-11-02 17:05:51 · 231 阅读 · 0 评论 -
记录一次h5上传身份证照片、上传人面像
<template> <div class="pageOuter"> <div class="Submit"> <div class="formModel"> <div class="item"> <div class="label">真实姓名</div> <div class="inptItem"> <原创 2021-10-15 15:25:11 · 1794 阅读 · 0 评论 -
JS监听浏览器的返回、后退、上一页按钮的事件方法
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。首先我们要了解浏览器的history。大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安全原因javascript不允许修改history里已有的url链接,但可以使用pushState方法往his转载 2021-09-17 10:09:01 · 1565 阅读 · 0 评论 -
times = null与clearTimeout(times)区别
times = null 只是将定时器的指向改为null,并没有在内存中清除定时器,定时器还是会如期运行;如同在debounce函数中将times = null并不能达到防抖的目的,因为每个定时器都只是将内存地址指向了null,而每个定时器都将会执行一遍.而clearTimeout(times)会将定时器从内存中清除掉.另外关于定时器是否需要用完清除的问题.具体还得看需求,如果是很少个数的定时器,可以不清除;如果数量很多或者数量不可控,则必须要做到手动清除,否则定时器将会非常占用电脑cpu.非常影响性原创 2021-09-15 21:46:34 · 1552 阅读 · 1 评论 -
简略rem计算
(function(){ function resize(){ // 设计稿宽度 const designWidth = 750; // 屏幕宽度 const windowWidth = window.innerWidth; // html根元素 const html = document.documentElement; // 计算 html.style.fontSize原创 2021-09-11 18:07:01 · 125 阅读 · 0 评论 -
简单闭包理解
var a = 0; //全局function fn() { var a = 12; return a;}console.log(a); // 0var i = fn;console.log(i()); // 12console.log(a); // 0闭包将函数的值返回了出去,使得外部能获取,但是它却又是局部变量,私有的变量,不会影响全局。它的值是调用出去的。...原创 2021-09-09 14:13:55 · 54 阅读 · 0 评论 -
记录一次基于axios项目request请求封装
import axios from 'axios'import Vue from 'vue'import router from '../router'import { Dialog} from 'vant'Vue.use(Dialog)// 正在进行中的请求列表let reqList = []/** * 阻止重复请求 * @param {array} reqList - 请求缓存列表 * @param {string} url - 当前请求地址 * @param {f原创 2021-09-07 11:36:19 · 164 阅读 · 0 评论 -
变量声明,var,let,const。
var存在变量提升,即:在其作用域之前调用,会返回undefined。let, const 不存在变量提升,即::在作用域之前调用会报错并提示在作用域之前无法调用。函数function存在变量提升,即:在声明函数作用域内,之前调用与之后调用效果一样。注意:函数声明与调用其函数体内的变量作用域问题。foo() let b = 1 function foo(){ console.log(b); // Cannot access 'b' before initializati原创 2021-09-06 14:19:19 · 146 阅读 · 0 评论 -
Promise.all中的错误处理(转于慕课)
当我们想“并发执行”若干个任务的时候,我们很容易就想到了Promise.all。但是Promise.all有一个缺陷:当有一个任务失败的时候,就会直接进入catch的逻辑了。这个可能并不是我们想要的结果。想象一下我们同时发出了3个网络请求,其中2个正常返回了,有一个reject了,结果却都挂了,只能被迫进入错误处理的逻辑。我们的需求是:出错的那一个请求不会影响到正常的请求。这种情况应该怎么处理呢?使用await,增加try…catch…逻辑要解决上面的问题,思路很简单,只需要再外面再包一层Promise转载 2021-07-19 09:48:09 · 1862 阅读 · 0 评论 -
new Map()对象
JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。 var obj = new Map() //定义一个空的map obj.set('name','tom') obj.set('0','tony') obj.set(1,'jerry')console.log(o转载 2021-03-30 09:17:18 · 317 阅读 · 0 评论 -
InstantClick,让你的网站快到起飞,PJAX技术
instantclick 简介instantclick.js 是一种ajax无刷新和预加载页面的技术,对于普通博客程序,有着明显的加速作用。(instantclick.js ≈ pjax + 预加载页面)而且,使用方法也十分的简单。在github截止目前,已经由4447个star了,非常可观。但是官方文档纯英文,可能阅读上有点障碍,所以,在此,翻译一下大部分的官方文档内容,方便新手快速使用。大部分采用直译方式,需要注意的地方 用小括号注释起来。(尽管如此,instantclick.js 仍然有一些bug原创 2021-02-09 17:03:37 · 685 阅读 · 0 评论 -
HTML5<video>报错Uncaught (in promise) DOMException解决方法[转]
在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动播放音频和视频。(Google的某些做法还真是令开发者不爽)。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。<video src="YOUR_VIDEO_URL" autoplay></video>如果你用 javascript 代码显式调用play方法:<video></video><script type="text/原创 2021-02-05 18:32:13 · 5449 阅读 · 1 评论 -
js 网络图片转base64的方式(两种)
原作者链接:添加链接描述方法一,Blob和FileReader 对象实现原理:使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”]使用FileReader 对象接收blob。getBase64("https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg")//链接是你的网络图片function getBase6.原创 2021-01-26 10:51:56 · 2596 阅读 · 2 评论 -
javascript ‘==‘与‘===‘ 及隐式类型转换
字符串和数字比较字符串和数字进行比较时,字符串转换成数字,二者再比较。'1' == 1 // true字符串和布尔值比较字符串和布尔值进行比较时,二者全部转换成数值再比较。'1' == true; // true布尔值和数字比较布尔值和数字进行比较时,布尔转换为数字,二者比较。true == 1 // true规律图:如图,任意两种类型比较时,如果不是同一个类型比较的话,则按如图方式进行相应类型转换,如对象和布尔比较的话,对象 => 字符串 => 数值 布尔值 =&g原创 2020-08-28 14:33:08 · 230 阅读 · 1 评论 -
for...in遍历对象或数组触及原型导致返回的数据不符合预期
for…in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现意外的错误。为了避免这个问题,我们可以使用对象的hasOwnProperty()方法来避免这个问题,如果对象的属性或方法是非继承的,那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法,只会检查在特定对象自身中直接创建的属性。var array = ["admin","manager","db"];Array.prototype.name= "zha原创 2020-08-27 18:04:10 · 488 阅读 · 0 评论 -
javascript自测清单
来自思否的知识清单:https://segmentfault.com/a/1190000023494202来自掘金的深浅拷贝:《搞不懂JS中赋值·浅拷贝·深拷贝的请看这里》原创 2020-08-07 14:47:05 · 181 阅读 · 0 评论