javascript
要叫我大哥
我这个人很懒,啥也没有留下,留下来一坨坨
展开
-
解决移动端键盘遮挡输入框问题
this.$nextTick(()=>{ let documentInput = document.getElementsByTagName('input'); for(let i=0;i<documentInput.length;i++){ documentInput[i].onclick = function(){ this.scrollIntoView(); } }原创 2021-12-14 16:12:09 · 2885 阅读 · 0 评论 -
vue搭建简单的mock数据
1.安装服务npm install -g json-server2.新建mock文件项目目录public下创建 mock 文件夹mock 文件夹下添加 db.json 文件,内容如下3.添加启动命令package.json 添加命令“mock”: “json-server --watch public/mock/db.json”,“mockdev”: “npm run mock & npm run dev”4.启动 mock 服务器npm run mock 命令原创 2021-11-22 14:29:32 · 611 阅读 · 0 评论 -
ES6,很多人不会用的地方
const obj = { a:1, b:2, c:3, d:4, e:5,}const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;const f = obj.a + obj.d;const g = obj.c + obj.e;//改进const {a,b,c,d,e} = obj;const f = a + d;const g = c原创 2021-11-16 13:54:39 · 477 阅读 · 0 评论 -
移动端ios出现输入框无法输入的情况
加上这段css即可[contenteditable="true"], input, textarea { -webkit-user-select:auto!important; -khtml-user-select: auto!important; -moz-user-select: auto!important; -ms-user-select: auto!important; -o-user-select: auto!important; user-select: auto!i原创 2021-11-16 10:01:05 · 2055 阅读 · 0 评论 -
用new Promise去封装接口
方法封装export const promiseAjax= () => { return new Promise((resolve, reject) => { getFundOpenApplyByMobile().then(res => {//这里是接口方法 let result = res.data resolve(result)//接口返回成功,抛出成功结果 }, error=>{原创 2021-11-12 11:24:09 · 693 阅读 · 0 评论 -
数组和字符串有哪些方法
// 数组filter //有返回值(数组),return是布尔值,true的时候item返回到数组内map //有返回值(数组),return任意类型,return直接在数组内forEach //没有返回值。arr.forEach(function(self,index,arr){}) 三个参数,不支持break,只支持return相当于continuefor //break跳出循环,reurn必须在函数内,且终止当前函数every //有返回值(布尔值),循环中所有的return原创 2021-08-29 21:47:54 · 143 阅读 · 0 评论 -
Lodash中节流(throttle)和防抖(debounce)
1.节流throttle API走起_.throttle(func, [wait=0], [options={}])func (Function): 要节流的函数。[wait=0] (number): 需要节流的毫秒数。[options={}] (Object): 选项对象。[options.leading=true] (boolean): 指定调用在节流开始前,默认true。[options.trailing=true] (boolean): 指定调用在节流结束后,默认true。用法原创 2021-07-20 11:34:47 · 20483 阅读 · 0 评论 -
html的meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport高度,一般设置了宽度,会自动解析出高原创 2021-07-14 16:28:25 · 119 阅读 · 0 评论 -
让图文不可复制
-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;原创 2021-07-14 16:24:46 · 66 阅读 · 0 评论 -
audio元素和video元素在ios和andriod中无法自动播放问题解决
原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放;音频,写法一 <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> 音频,写法二 <audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"></sourc原创 2021-07-14 16:21:46 · 522 阅读 · 0 评论 -
消除transition闪屏
.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }过渡动画(在没有启动硬件加速的情况下)会出现抖动的现象, 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式;启动硬件加速的 另外一种方式: .css { -webkit-transform: tra原创 2021-07-14 16:17:04 · 1029 阅读 · 0 评论 -
nginx代理配置
1.静态资源和接口代理//静态资源location /eap/ { proxy_pass http://29.12.3.68/bd/eap/; proxy_pass_header Set-Cookie; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}//接口代理locatio原创 2021-07-09 14:08:15 · 1357 阅读 · 0 评论 -
html2canvas生成图片
1.安装npm install --save html2canvas2.引入import html2canvas from 'html2canvas'3.使用html2canvas是需要生成图片的dom元素,button是触发点击事件的img是最后生成的图片路径展示的地方<div id="html2canvas"> kdfnowiebnfobewofbioqbwefi时刻记得把女佛鳄把握v贝尔我v为儿女IE温暖日vnew人稗</div>原创 2021-07-08 10:04:06 · 384 阅读 · 0 评论 -
js跨域解决办法
1.通过jsonp跨域使用JS动态生成script标签,进行跨域操作(script.src =‘http://www.example.com/data/?callback=handleResponse’;)2.通过document.domain+iframe来跨子域(只有在主域相同的时候才能使用该方法)a项目:<iframe src = "http://script.a.com/dir/b.html" id="iframe"></iframe> <scr原创 2021-07-05 18:42:46 · 132 阅读 · 0 评论 -
mac和window电脑 解决github打不开问题
一.mac电脑(mac电脑亲测有效)1.新建一个访达窗口,同时按住shift command G三个键,进入前往文件夹页面2.在输入框内输入/etc/hosts3.找到hosts文件夹4.由于hosts文件夹不可编辑,所以复制一份hosts文件先保存到本地桌面5.在新的hosts文件夹里输入如下代码http://github.com 204.232.175.94 http://gist.github.com 107.21.116.220 http://help.github.com 207.9转载 2021-07-01 15:29:36 · 3233 阅读 · 1 评论 -
数组和字符串有哪些常用方法 javascript
** 数组**filter //有返回值(数组),return是布尔值,true的时候item返回到数组内map //有返回值(数组),return任意类型,return直接在数组内forEach //没有返回值。arr.forEach(function(self,index,arr){}) 三个参数,不支持break,只支持return相当于continuefor //break跳出循环,reurn必须在函数内,且终止当前函数every //有返回值(布尔值),循环中所有的ret原创 2021-07-01 09:45:54 · 171 阅读 · 0 评论 -
canvas绘画
<canvas canvas-id="iCanvas" class="canvas-class"></canvas>canvas绘制图片小程序的操作let _this=this;let ctx = uni.createCanvasContext('iCanvas', _this);//画图片 参数是(图片路径,定位x,定位y,宽,高)ctx.drawImage("../../static/index/shareBgNew.png", 0*rpx, 0*rpx,840*原创 2021-06-30 17:12:48 · 421 阅读 · 0 评论 -
iframe父子组件传值通讯二
1.子组件传给父组件子组件:window.parent.postMessage(mess, '*');//mess是传递的数据父组件接受:<iframe id="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe>window.addEventListener('message', function(e){ console.log(e) }, false)原创 2021-06-30 16:04:49 · 320 阅读 · 0 评论 -
Web前端iframe使用以及页面通信postmessage
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了<iframe src="demo_iframe_sandbox.htm"></iframe>iframe常用属性:1.frameborder:是否显示边框,1(yes),0(no)2.height:框架作为一个普通元素的高度,建议在使用css设置。3.width:框架作为一个普通元素的宽度,建议使用css设置。4.name:框架的名称,window.frames[nam转载 2021-06-29 14:55:27 · 5134 阅读 · 0 评论 -
2021年最新前端面试题(js,vue,webpack,css,react)总结
一.javascript1.javascript 有哪几种数据类型undefined,null,string,boolean,number,symbol(ES6),BigInt。。。object里面包含的function、Array、Date2.target和currentTarget区别event.target 返回触发事件的元素 event.currentTarget 返回绑定事件的元素$(document).ready()方法和window.onload有什么区别(1)、w原创 2021-06-24 22:34:48 · 3087 阅读 · 10 评论 -
js解析浏览器url,然后拆解后面拼接的参数成对象
/** * * @returns 获取url的参数,拼接成对象 */ const parseUrl = () => { var searchHref = window.location.href.split('?')[1]; var params = searchHref?searchHref.split('&'):[]; var returnParam = {}; params.forEach(function(param) { var原创 2021-06-22 09:37:17 · 566 阅读 · 4 评论 -
vue父子组件双向绑定值的语法糖 .sync
有两种情况,有的时候一种是可以的,有的时候用另一种也是可以的,但是我也没区分具体用哪一种,不止是子组件是输入框和其他dom操作的区别。this.emit(′input′,event.target.value);this.emit('input',event.target.value);this.emit(′input′,event.target.value);this.emit(‘update:value’,[1,2,3,4,5]);第一种:父组件:<count-control :value原创 2021-06-22 09:22:59 · 188 阅读 · 1 评论 -
h5调用安卓或者ios的方法------h5和webview交互
1.h5调用安卓或者ios方法,且不需要 得到返回结果:setJDNavigationMapApp:这是安卓和ios里面自己的方法iOS调用:window.webkit.messageHandlers.setJDNavigationMapApp.postMessage({参数key:参数value});android调用:window.webkit.setJDNavigationMapApp("latitude","longitude","locationName");2.h5调用安卓或者i原创 2021-06-21 10:28:14 · 4202 阅读 · 3 评论 -
javascript正则验证是否为数字,小数,整数
// .......export const valiNum = (value,num)=>{ let val = value+""; let valPoint = val.substr(val.length-1,1); if(valPoint == "."){ return false; } if(num==0){ return /^\d+$/.test(val); }else if(num==1){ ..原创 2021-06-21 10:13:08 · 1223 阅读 · 0 评论 -
判断ios,安卓,pad,还是pc
// iOS 代码 // window.webkit.messageHandlers.immediateUseCoupon.postMessage({}) // 安卓 代码 // window.webkit.immediateUseCoupon() // 原生智慧加油的使用 需要做用户车型限制的。 跳转之前要判断一下。 export const getOS = () => { var ua = navigator.userAgent; if (ua.match(..原创 2021-06-21 10:08:14 · 407 阅读 · 2 评论 -
js获取 双击或者鼠标拖动选中文字
// 监听双击事件 document.addEventListener("dblclick", doubleClick, true); // 监听释放鼠标按钮事件 document.addEventListener("doubleClick", mouseUp, true); // 双击处理函数 function doubleClick() { var text = ""; if (window.getSelection) {原创 2021-06-17 17:13:06 · 952 阅读 · 0 评论 -
javascript检查浏览器的版本和内核
// 浏览器检查结果function browser() { var ua = navigator.userAgent; var ret = {}, webkit = ua.match( /WebKit\/([\d.]+)/ ), chrome = ua.match( /Chrome\/([\d.]+)/ ) || ua.match( /CriOS\/([\d.]+)/ ), ie = ua.match( /MSIE\s([\d\.]+)原创 2021-06-07 10:07:13 · 301 阅读 · 0 评论 -
建立本地jsonserver 和 vue建立mock数据
一:建立本地jsonserver1.npm install -g json-server2.建立一个文件夹jsonserver3.cd jsonserver4.npm init (会有个提示,将文件名写成小写),结果:建成了一个package.json的文件5.npm install json-server –save (建立项目node_modules)6.打开package.json文件,将script里面的key:value换成"json:server": “json-server -原创 2021-06-04 11:13:42 · 119 阅读 · 0 评论 -
JavaScript js对象的深度克隆
function clone (Obj) { var buf; if (Obj instanceof Array) { buf = []; //创建一个空的数组 var i = Obj.length; while (i--) { buf[i] = clone(Obj[i]); } return buf; } else if (Obj instanceof Object) { buf = {}; //创建一个空对象 for原创 2021-06-02 23:06:15 · 98 阅读 · 5 评论 -
javascript判断数据类型
1.typeof2.instanceof{} instanceof Object; //true[] instanceof Array; //true[] instanceof Object; //true“123” instanceof String; //falsenew String(123) instanceof String; //true3.constructor‘’.constructor == Stringnew Function().constructor ==Func原创 2021-06-01 11:52:24 · 117 阅读 · 1 评论 -
并发的情况下,如何刷新token失效问题
什么事并发情况下token失效:进入同一个页面,会有同时多个接口都在调用,接口调用都是异步请求,而这时候token是失效的,导致这些接口调用都是因为token失效问题,又不能因为某个接口token失效而改变token之后才去调用其他接口,因为接口现在调用都是异步的,除非自己写成同步。方法:1.利用 Redis 缓存:后端在用户第一次登录时,需要将生成的 Token 数据,缓存一份到 Redis 中.当 Token 过期时,重新生成新的 Token 数据并更新 Redis 缓存,同时在 Redis 中设置原创 2021-06-01 11:35:40 · 2506 阅读 · 1 评论 -
防抖与节流
函数防抖:将多次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。函数节流:使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,原创 2021-05-19 11:11:25 · 78 阅读 · 0 评论