![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 59
明明很开心_l
路漫漫其修远兮,吾将上下而求索。共勉。
展开
-
css实现单边斜切效果
需求UI图中有需要斜切图样的需求,一个进度条,并且进度项不定,是一个list类型。效果如图,以下就是一个三个元素的数组遍历生成的进度条:第一次尝试首先写进度条并不难,只需要以下结构:// html<div class="progress-outer"> <div v-for="(item,key) in items" :key="index" class="progress-inner" :style={'width': item.percent + '%','left':原创 2021-09-29 18:51:54 · 3691 阅读 · 0 评论 -
js A*寻路算法解析记录
著名的A寻路算法,寻找点到点间有障碍物时到达的最短路径。使用A算法的条件是:1.搜索树上存在着从起始点到终点的最优路径;2.问题域是有限的;3.所有结点的子结点的搜索代价值>0;4.问题最终解优于实际问题的代价值。其策略启发式是F(n)=G(n)+H(n)F(n)是每个试探单位的预估代价值G(n)表示起始点到当前试探单位的代价值H(n)是当前试探单位到终点的预估代价值寻路逻辑分析题目:一个二维数组,相当于一个九宫格,其中为1的是障碍物,为0是可以通行的点。传入四个参数,分别为原创 2021-03-22 17:11:17 · 368 阅读 · 1 评论 -
js实现leetcode接雨水算法解析记录
leetcode中的接雨水算法,第一次看到这题目有点懵,因一面对题目会用惯用的单向遍历。但这道题是需要考虑左右双向的问题。题目如图:分析首先,需要接到雨水必须是左右两边的最高点,取左右最高点中的最低点为盛水的标准,这个是看图就能得出的结论了,就像构成一个凹字型。依照这个分析知道我们需要获取左边最大leftMax,和一个右边最大rightMax,后取Math.min(leftMax,rightMax)则是取水的边界点了。那如何取得盛水数量呢?我们获取到的取水边界减去当前数,不就可以得到当前的盛水数原创 2021-03-22 12:00:21 · 276 阅读 · 0 评论 -
js如何拷贝copy数组或对象
场景在项目中经常有拷贝对象的情况,由于直接进行转移赋值只对基础类型的数据对象(eg:String,number)可以进行,对于引用类型的对象就不适用了,直接进行赋值只是对于指针的指向。对于数组,且是简单数组(不是多层嵌套)的拷贝对于简单的数组(不是多层嵌套)可以直接使用js的api就可以实现,相关api有:concat,slice,或者使用es6的…展开运算符。对于对象,且是简单对象(不是多层嵌套)的拷贝可以使用:Object.assign()方法或者使用es6的…展开运算符。多层嵌套的复杂对象原创 2021-02-20 11:10:18 · 1130 阅读 · 0 评论 -
小数点怎么进行进制转换?
上一篇博文什么是进制?各进制间如何转换?解答了进制概念以及整数位的各进制间的转换。而对于小数点的进制转换是如何的呢?这里来看如何进行小数点的进制转换。带小数点的二进制转十进制例如:00010100.1转换为十进制?带小数的转换则是整数部分很小数部分分开计算。对于00010100整数部分按照上一篇博文可以得到转换为十进制是20。接下来我们计算小数部分。小数部分二进制为1。小数点的取值范围是在0<=x<1,即0-1之间。我们还是按照整数部分的逻辑来给小数部分做排列编码,排列如下:0 0原创 2020-12-25 11:33:31 · 13186 阅读 · 0 评论 -
什么是进制?各进制间如何转换?
进制是什么?进制就是进位技术制,是人为定义的带进位的计数方法。通俗点理解像我们以写“正”字计数,只是这样没有进位。对于X进制——就是逢X进一位,例如:十进制就是逢十进一,二进制是逢二进一,十六进制是逢十六进一,以此类推。二进制B:计算机中,1个字节由8个二进制数组成,即1Byte=8bit,储存数值范围就为0-255(2^8-1)。1代表“是”,0代表“否”。如下面所示,从右往左,八个二进制数分别代表了1,2,4,8,16,32,64,128。二进制可以表示256个字符,就是所谓的ASCII码。原创 2020-12-24 17:32:24 · 2039 阅读 · 1 评论 -
easyui表单验证时input设置readonly后不显示错误提示
问题在开发中,使用easyui的表单验证,当input设置readonly属性后,里面内容错误时提交表单不会触发显示错误提示。解决办法初始化时不设置readonly,当输入内容时设置readonly为true,失去焦点时再把readonly设为false,模拟不可输入效果,这样在提交表单时可以解决不显示错误提示。代码如下:$('#id').textbox('textbox').bind('keydown',function(e){ e.preventDefault(); $('#id').原创 2020-09-18 17:29:48 · 637 阅读 · 0 评论 -
easyui的submit事件在chrome83中不提交
问题一直稳定使用的easyui搭建的系统最近出现了表单提交不稳定的情况。在表单submit事件第一次进行调用会不提交接口进入到sucess事件中,第二次调用会正常运行,调用成功失败不定。分析经过对比测试,在新版chrome83的浏览器中会出现这种情况。开始是以为由于easyui版本太低,于是尝试升级至1.9.6,但测试发现并不能解决这个问题。于是猜测是新版本的chrome的问题,最后确定了是算chrome83版本的bug,不知道后面更新版本什么时候修复。根本原因是easyui中的submit提交表单使原创 2020-07-08 15:24:06 · 742 阅读 · 2 评论 -
webpack打包后ie访问出现“btoa“未定义
问题描述最近在用最新webpack5重新写配置文件时发现,在js在js中引入scss文件,打包后在chrome浏览器是并没有问题,但由于项目兼容到ie9,在ie9做测试时发现报错"btoa"未定义。mdn上查询到btoa是在ie10以上才有效。思考解决过程在webpack配置里已经使用对ES6的语法进行babel兼容到ie9,一开始认为是babel对typescript的语法兼容配置问题,但经过对ts文件的排查发现问题并不在babel上,看了打包的源码也发现是对css的sourcemap指向,那么就是原创 2020-07-03 14:43:03 · 938 阅读 · 0 评论 -
IE9以及IE9+兼容 更改select框默认下拉图标
IE9以及IE9+兼容 更改select框下拉图标在一般浏览器中使用下列属性在IE中使用注意IE9最后设计图中因为跟select的下拉图标不一样,使用了css把原本的样式去掉,再使用background图片定位在右边在一般浏览器中使用下列属性select { appearance:none; -moz-appearance:none; -webkit-appearance:none;...原创 2019-12-12 11:24:34 · 528 阅读 · 0 评论 -
js调起打开APP_浏览器点击打开微信
需求项目中需要在网页中打开app的需求,若手机没有安装app则需跳转到下载自定义的下载APP页面。这种需求在很多“别人家”的网站都能实现,我们的开发员当然有需求也要折腾一下了。分析首先得判断是否是在手机端打开,是手机端才调用打开app,pc则直接跳转下载页面。调用打开app其实相当于跳转某个app链接,但js不能判断是否能进行跳转打开。既然没有直接的方法可以判断,可以判断触发一段时间后监听浏览器是否隐藏,若隐藏了说明已打开调起APP,若设定时间过去仍没有进入隐藏事件,说明手机没有安装此APP,则跳转原创 2020-06-17 17:07:52 · 4112 阅读 · 0 评论 -
微信小程序textarea文本穿透弹窗解决
问题现象在小程序项目开发中,页面是个表单内容,其中包含有textarea组件。同时页面有弹出框出现textarea文本穿透到弹窗的问题。在ios中不会出现这种问题,而在安卓机会出现。按原本开发想法是textarea组件层级高于弹窗,于是使用z-index进行层级调节。但是发现并没有预料中的解决问题。分析看小程序官方文档发现textarea是原生组件,原生组件的覆盖就会想到cover-view,但是查看文档发现cover-view只支持嵌套一下几个,如图:猜测它也许是个微信小程序的bug,很快就在社原创 2020-06-12 16:37:32 · 2109 阅读 · 1 评论 -
jq、vue、react封装modal弹窗和loading加载模块
前言在项目中弹窗和加载模块必不可少,如果是大型项目首先会考虑使用哪些适用于自身的ui框架。但我们需要做一些自定义ui较多且项目小型时就需要自己封装modal弹窗和加载模块了,构建项目时,这也是开发最平常需要的共用模块封装。这里放上自己在项目开发中学习使用封装的jquery,vue项目弹窗和加载模块封装函数,让有需要的人可以快速直接使用学习。使用jquery的传统开发项目modaljs...原创 2020-05-08 12:55:25 · 1184 阅读 · 0 评论 -
前端性能分析工具Lighthouse使用
对于网页的性能分析,前端攻城狮们不停在寻找分析性能,望能进一步优化网站。Lighthouse是性能分析工具,让你可以清楚知道网页需要优化的地方。安装步骤可以通过chrome的应用商店进行搜索下载安装(需翻墙),安装好后会在浏览器右上角出现Lighthouse图标,访问需要分析的网站即可点击使用使用npm进行安装npm install -g lighthouse安装好后在命令行中输入...原创 2020-04-07 11:10:11 · 2233 阅读 · 0 评论 -
jq ajax传输数据类型错误
问题现象当使用ajax进行数据交互时,后台需要验证数据类型,如必须是number类型时,若我们用默认ajax传输数据时,会把number类型变为字符串类型,从而报错参数类型错误原因ajax的contentType默认值为"application/x-www-form-urlencoded"。contentType属性作用:规定在发送到服务器之前应该如何对表单数据进行编码。“applica...原创 2020-04-03 10:06:11 · 554 阅读 · 0 评论 -
vue/js动态更改video的source路径不起效
问题现象在vue项目中(或各网页),当我们需要用到video控件播放视频,当需要点击其他视频图片想要在主视频区域中播放时,在项目直接更改主视频的source文件路径(直接src不存在这个问题),发现视频并没有按我们想象中那样变成另一个视频路径播放。例如,在vue项目中我们这样写:<video> <source v-for="(type) in video" :key="ty...原创 2020-04-01 11:24:00 · 4870 阅读 · 0 评论 -
安卓微信浏览器使用input file图片上传无法触发change事件
问题现象项目中遇到一个上传图片的功能,使用了file作为选择上传,需要做图片预览等功能。在多方测试后没有问题,但在安卓微信浏览器中却发现change事件失效无法触发。解决办法由于在项目中我是用来上传图片,所以用了accept进行图片的类型限制,如下:<input required="required" type="file" accept="image/png,image/jpeg,...原创 2020-04-01 10:45:49 · 2315 阅读 · 0 评论 -
ie浏览器打开页面空白,打开调试刷新才正常显示页面解决方法
问题现象在一个vue项目中,由于项目需要兼容到IE9+,在IE测试时发现无论怎么刷新页面都不出来,按了F12打开控制台刷新后又加载正常。原因某些版本的IE(IE8~11)由于脚本保护机制不开控制台是没console对象的,当不支持这个对象时,就会抛出异常停住,这时我们会打开控制台看错误信息,但是打开刷新后页面就会正常更新了。解决办法在html中增加console的polyfill,暂用空...原创 2019-12-13 15:51:43 · 2399 阅读 · 1 评论 -
pc端拖拽时mouseup事件丢失
作为一个不停撞墙成长的小小前端码农,“尝试”着去解决问题,当解决问题后那种释然让我可以有更多的兴趣,不断成长,更加的坚持不懈。在实现pc端拖拽左右移动元素时,使用mousedown+mousemove+mouseup实现左右拖拽移动,操作多次是总会出现不进入mouseup事件,导致无法清除mousemove事件。1.第一次尝试由于我要拖拽的元素中有图片,于是猜测是否浏览器默认行为变成拖拽...原创 2019-12-10 11:31:22 · 2003 阅读 · 4 评论 -
了解Websocket
了解Websocket前几天在工作中后台同事让我研究一下一个付费网站返回前端的数据结构。我照常规F12看获取数据的后台接口请求,结果发现调试工具里的Network没有任何请求。有数据的交互竟然没有请求??于是我不甘心 用了Fiddler工具进行抓包,发现跟network一样除了一些图片cssjs加载没有其他请求。我又回去重新看了一遍,发现了原来是用websocket进行通讯的对于webso...原创 2019-04-18 10:39:06 · 438 阅读 · 0 评论 -
排序算法:冒泡排序,快速排序,堆排序,归并排序
前端排序算法在笔试面试中遇到的越来越多,下面三种是我觉得相对比较容易理解也常见的排序算法原创 2019-04-18 11:12:42 · 508 阅读 · 0 评论 -
浏览器调用摄像头getUserMedia
浏览器调用摄像头getUserMedia2018年启动QQ浏览器会启动摄像头的新闻闹得沸沸扬扬。前段时间公司让研究一下这个浏览器启用摄像头的功能,希望能够实现浏览器网页扫描二维码的功能。现在写下来记录一下。浏览器启用摄像头是使用getUserMedia这个api实现的,调用后会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。。此流可以...原创 2019-04-18 12:35:04 · 6730 阅读 · 0 评论 -
js如何实现继承,详解原型链
使用js实现继承,主要是依靠原型链实现的原型链想要知道原型链是什么,先了解构造函数,原型,与实例之间的关系构造函数:可用来创建特定类型的对象。构造函数与其他函数的区别是在于调用方式的不同。使用new操作符来调用的函数都是构造函数,函数名默认以大写字母开头实例:以构造函数的初始化对象,通过用new操作符原型:每个函数一旦被创建就有一个prototype属性(原型),是实例的原型对象...原创 2019-05-21 16:17:08 · 225 阅读 · 0 评论 -
js实现类,详解函数模式
ECMAScript中是没有类的概念的,它对于对象的定义是“无序属性的集合,其属性可以包含基本值、对象或者函数”以下是几种js的函数模式来封装实现类以及他们的优缺点工厂模式工厂模式使用普通函数以根据参数创建一个包含需要的属性和方法的Person对象function createPerson(name, age, job) { var o = new Object(); o.n...原创 2019-05-16 16:42:02 · 266 阅读 · 0 评论 -
js 默认滚动到最底部
首先,想要默认滚动到最底部,思路是:判断页面/元素是否出现了滚动条 —— 判断方法是:页面/元素高度有没有超过滚动高度若有滚动条即把滚动条滚动到最底部现在我们来了解几个dom属性:scrollTop:获取或设置一个元素的内容垂直滚动的像素数,当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0scrollHeight:这是一个只读属性,是元素内容高度的度量,...原创 2019-05-22 10:16:02 · 38316 阅读 · 5 评论 -
js 查找数组里是否有某个值
开发过程中需要检测数组数组里是否存在某个值。惯性思维是通过数组循环,一个个对比判断是否相等从而得出是否存在,一般需要一个flag变量来进行判断是否存在像这样:var flag = false; var arr = ["a","b","c"];for(var i = 0; i < arr.length; i++) { if(arr[i] === "c") { flag = t...原创 2019-06-14 15:54:38 · 9732 阅读 · 0 评论 -
easyui dialog自适应高度默认居中
工作中使用easyui的时候发现,dialog必要设定宽,但不必设定具体高度,会按照内容扩展高度。但最好设定一个maxHeight,来保证超过屏幕高度的内容可见,设定maxHeight后超过这个高度就会自动添加滚动条,没有超过则正常显示。像这样:$('#xxx').dialog({ title: '标题', content: '我是内容', minWidth: 400, maxH...原创 2019-06-21 10:01:47 · 2423 阅读 · 0 评论 -
js获取距当前时间前一天,一个月或一年的时间,获取当前月份的第一天和最后一天
开发中经常遇到要获取距当前时间的业务日期,特此记录获取距当前日期前一天的日期:new Date(new Date() - 1*24*3600*1000);或者new Date(new Date().setDate(new Date().getDate()-1));获取距当前日期前一个月的日期:new Date(new Date().setMonth(new Date().g...原创 2019-04-26 16:21:04 · 2924 阅读 · 0 评论