- 博客(43)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 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
3757
原创 css实现宽高按比例拉伸
场景开发中等宽列表开发经常会使用flex进行宽度的自适应。但为了在大屏时不至于只变化宽度，UI提出需要列表每一项宽高自适应。解决思路这么简单的需求，肯定不考虑使用js来监听宽度拉伸设置高度，成本太高，所以优先考虑如何从css入手。1.是否有属性直接设置宽高比？2.是否有哪些属性是根据宽度而变化的？解答方案是否有属性直接设置宽高比？答案是有的，这个属性是：aspect-ratio，MDN对于这个属性的解释是：aspect-ratio CSS 属性为box容器规定了一个期待的纵横比，这
2021-09-25 16:37:55
1147
原创 flutter如何获取连接高德地图的SHA1和PackageName
问题当我们需要在flutter应用里使用获取定位位置或显示地图各种定位相关功能时，需要使用高德地图（或其他地图），这里就需要想去申请一个apikey。根据申请apikey的教程需要添加应用，这时需要你去填“发布版安全码SHA”、“调试版安全码”和“PackageName”，如何获取这些信息呢？发布版安全码SHA1.进入C:\Users\admin.android文件夹下看是否有keystore和debug.keystore文件2.如果没有则需要生成，打开命令行工具输入一下命令：//这里是生成发布版
2021-04-06 10:40:02
736
原创 flutter环境配置VScode和Android Studio
VScode安装vscode依据官网下载Windows版本的Flutter SDK在系统环境变量的path加入Flutter SDK解压后的地址：xxx/flutter/bin打开vscode在“扩展”中搜索安装Flutter和Dart打开命令行（git bash或其他）输入flutter devices，查看里面连接的设备是否有Chrome，里面可能有几种设备“Ctrl+Shift+P”，打开输入flutter选择new，如下图按指引选择文件项目存放地址，就新建
2021-04-02 17:49:11
1057
原创 Flutter环境搭建踩坑
Running “flutter pub get“ in flutter_tools...长久无反应flutter run -d chrome报错Finished with error: Failed to establish connection with the application instance in Chrome. This can happen if the websocket connection used by the web tooling is unabled to correct
2021-03-29 10:56:32
477
1
原创 前端面试题HTTP是什么？三次握手四次挥手流程_HTTP相关知识
什么是http呢？对于http的概念总是存在着模糊的概念，对它了解得并不透彻。现在我们来系统结合计算机的一些网络通信基础来彻底弄懂HTTP。定义HTTP：全称是超文本传输协议（Hypertext transfer protocol），是用于从WWW服务器传输超文本到本地浏览器的传送协议，它运行在TCP上，是一个应用层通信协议。WWW服务器的传送协议？那WWW是什么呢？下图是一张关系图：可以看出WWW只是Internet提供的一种服务，Internet还有很多包括FTP，E-mail等等服务。
2021-03-26 16:42:47
485
原创 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
384
1
原创 js实现leetcode接雨水算法解析记录
leetcode中的接雨水算法，第一次看到这题目有点懵，因一面对题目会用惯用的单向遍历。但这道题是需要考虑左右双向的问题。题目如图：分析首先，需要接到雨水必须是左右两边的最高点，取左右最高点中的最低点为盛水的标准，这个是看图就能得出的结论了，就像构成一个凹字型。依照这个分析知道我们需要获取左边最大leftMax，和一个右边最大rightMax，后取Math.min(leftMax,rightMax)则是取水的边界点了。那如何取得盛水数量呢？我们获取到的取水边界减去当前数，不就可以得到当前的盛水数
2021-03-22 12:00:21
287
原创 js如何拷贝copy数组或对象
场景在项目中经常有拷贝对象的情况，由于直接进行转移赋值只对基础类型的数据对象（eg:String，number）可以进行，对于引用类型的对象就不适用了，直接进行赋值只是对于指针的指向。对于数组，且是简单数组（不是多层嵌套）的拷贝对于简单的数组（不是多层嵌套）可以直接使用js的api就可以实现，相关api有：concat，slice，或者使用es6的…展开运算符。对于对象，且是简单对象（不是多层嵌套）的拷贝可以使用：Object.assign()方法或者使用es6的…展开运算符。多层嵌套的复杂对象
2021-02-20 11:10:18
1143
原创 小数点怎么进行进制转换？
上一篇博文什么是进制？各进制间如何转换？解答了进制概念以及整数位的各进制间的转换。而对于小数点的进制转换是如何的呢？这里来看如何进行小数点的进制转换。带小数点的二进制转十进制例如：00010100.1转换为十进制？带小数的转换则是整数部分很小数部分分开计算。对于00010100整数部分按照上一篇博文可以得到转换为十进制是20。接下来我们计算小数部分。小数部分二进制为1。小数点的取值范围是在0<=x<1，即0-1之间。我们还是按照整数部分的逻辑来给小数部分做排列编码，排列如下：0 0
2020-12-25 11:33:31
13274
原创 什么是进制？各进制间如何转换？
进制是什么？进制就是进位技术制，是人为定义的带进位的计数方法。通俗点理解像我们以写“正”字计数，只是这样没有进位。对于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
2058
1
原创 create react app兼容ie9
create react app默认情况下不兼容ie9，ie11。当我们需要兼容>=ie9时，则需要用到react-app-polyfill。开始我们按照其readme文件进行配置：npm install react-app-polyfill在入口文件（index.js）中加入以下代码：import 'react-app-polyfill/ie9';import 'react-app-polyfill/stable';同时，我们要配置package.json中的browserslis
2020-12-18 10:46:12
871
原创 create react app配置多页面应用
最近在配置react的多页面应用，在此记录下来。准备工作首先根据create react app官网新建应用：npm install -g create-react-appnpx create-react-app my-appcd my-appnpm start这时我们就初始新建了一个react基本应用了。将应用配置打开由于我们需要自定义一些webpack配置，先把原来脚手架的配置提取出来。npm run eject这时我们的package.json以及目录会有所改变 多出了scr
2020-12-16 13:57:28
1576
原创 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
646
原创 easyui中datebox、combobox、validatebox等动态设置reuqired属性值丢失
问题easyui的时间控件easyui-datebox有required属性可以设置必填或可空，当我们需要动态设置required时，我们会像这样设置：$('#id').datebox({required:true});这样设置可以达到必填的效果，但是当的datebox有值时，这个方法会初始化datebox，导致框内值丢失。查询了官网文档，datebox没有相应方法提供。解决办法由于没有直接的api进行设置，我们可以直接设置datebox的option，使用一下api于是我们这样写：$(
2020-09-18 16:41:28
1255
原创 css中的line-height设置数字，em和百分比的区别
疑惑关于line-height这个css属性在平常布局中真的很熟悉了，以前简单的用法都是直接设置具体像素值：line-height:28px;随着考虑到响应式等因素，慢慢开始了解无单位数字和使用em或百分比。一直以来都觉得为什么需要定义三种格式？明明他们几个形式都是属于字号的倍数而已。所以一直想探究一下究竟有什么不一样。实验首先我定义了四个p元素，每个line-height设置分别是px,em,无单位数值和百分比。效果如下：发现它们在这种状态下是一样的，都是属于当前字号的2倍。现在我们在它们的父
2020-08-04 14:55:02
3143
原创 easyui的submit事件在chrome83中不提交
问题一直稳定使用的easyui搭建的系统最近出现了表单提交不稳定的情况。在表单submit事件第一次进行调用会不提交接口进入到sucess事件中，第二次调用会正常运行，调用成功失败不定。分析经过对比测试，在新版chrome83的浏览器中会出现这种情况。开始是以为由于easyui版本太低，于是尝试升级至1.9.6，但测试发现并不能解决这个问题。于是猜测是新版本的chrome的问题，最后确定了是算chrome83版本的bug，不知道后面更新版本什么时候修复。根本原因是easyui中的submit提交表单使
2020-07-08 15:24:06
751
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
946
原创 js调起打开APP_浏览器点击打开微信
需求项目中需要在网页中打开app的需求，若手机没有安装app则需跳转到下载自定义的下载APP页面。这种需求在很多“别人家”的网站都能实现，我们的开发员当然有需求也要折腾一下了。分析首先得判断是否是在手机端打开，是手机端才调用打开app，pc则直接跳转下载页面。调用打开app其实相当于跳转某个app链接，但js不能判断是否能进行跳转打开。既然没有直接的方法可以判断，可以判断触发一段时间后监听浏览器是否隐藏，若隐藏了说明已打开调起APP，若设定时间过去仍没有进入隐藏事件，说明手机没有安装此APP，则跳转
2020-06-17 17:07:52
4130
原创 微信小程序textarea文本穿透弹窗解决
问题现象在小程序项目开发中，页面是个表单内容，其中包含有textarea组件。同时页面有弹出框出现textarea文本穿透到弹窗的问题。在ios中不会出现这种问题，而在安卓机会出现。按原本开发想法是textarea组件层级高于弹窗，于是使用z-index进行层级调节。但是发现并没有预料中的解决问题。分析看小程序官方文档发现textarea是原生组件，原生组件的覆盖就会想到cover-view，但是查看文档发现cover-view只支持嵌套一下几个，如图:猜测它也许是个微信小程序的bug，很快就在社
2020-06-12 16:37:32
2116
1
原创 jq、vue、react封装modal弹窗和loading加载模块
前言在项目中弹窗和加载模块必不可少，如果是大型项目首先会考虑使用哪些适用于自身的ui框架。但我们需要做一些自定义ui较多且项目小型时就需要自己封装modal弹窗和加载模块了，构建项目时，这也是开发最平常需要的共用模块封装。这里放上自己在项目开发中学习使用封装的jquery，vue项目弹窗和加载模块封装函数，让有需要的人可以快速直接使用学习。使用jquery的传统开发项目modaljs...
2020-05-08 12:55:25
1193
原创 前端性能分析工具Lighthouse使用
对于网页的性能分析，前端攻城狮们不停在寻找分析性能，望能进一步优化网站。Lighthouse是性能分析工具，让你可以清楚知道网页需要优化的地方。安装步骤可以通过chrome的应用商店进行搜索下载安装（需翻墙），安装好后会在浏览器右上角出现Lighthouse图标，访问需要分析的网站即可点击使用使用npm进行安装npm install -g lighthouse安装好后在命令行中输入...
2020-04-07 11:10:11
2248
原创 jq ajax传输数据类型错误
问题现象当使用ajax进行数据交互时，后台需要验证数据类型，如必须是number类型时，若我们用默认ajax传输数据时，会把number类型变为字符串类型，从而报错参数类型错误原因ajax的contentType默认值为"application/x-www-form-urlencoded"。contentType属性作用：规定在发送到服务器之前应该如何对表单数据进行编码。“applica...
2020-04-03 10:06:11
567
原创 vue/js动态更改video的source路径不起效
问题现象在vue项目中（或各网页），当我们需要用到video控件播放视频，当需要点击其他视频图片想要在主视频区域中播放时，在项目直接更改主视频的source文件路径（直接src不存在这个问题），发现视频并没有按我们想象中那样变成另一个视频路径播放。例如，在vue项目中我们这样写：<video> <source v-for="(type) in video" :key="ty...
2020-04-01 11:24:00
4922
原创 安卓微信浏览器使用input file图片上传无法触发change事件
问题现象项目中遇到一个上传图片的功能，使用了file作为选择上传，需要做图片预览等功能。在多方测试后没有问题，但在安卓微信浏览器中却发现change事件失效无法触发。解决办法由于在项目中我是用来上传图片，所以用了accept进行图片的类型限制，如下：<input required="required" type="file" accept="image/png,image/jpeg,...
2020-04-01 10:45:49
2331
原创 ie浏览器打开页面空白，打开调试刷新才正常显示页面解决方法
问题现象在一个vue项目中，由于项目需要兼容到IE9+，在IE测试时发现无论怎么刷新页面都不出来，按了F12打开控制台刷新后又加载正常。原因某些版本的IE(IE8~11)由于脚本保护机制不开控制台是没console对象的，当不支持这个对象时，就会抛出异常停住，这时我们会打开控制台看错误信息，但是打开刷新后页面就会正常更新了。解决办法在html中增加console的polyfill，暂用空...
2019-12-13 15:51:43
2431
1
原创 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
578
原创 pc端拖拽时mouseup事件丢失
作为一个不停撞墙成长的小小前端码农，“尝试”着去解决问题，当解决问题后那种释然让我可以有更多的兴趣，不断成长，更加的坚持不懈。在实现pc端拖拽左右移动元素时，使用mousedown+mousemove+mouseup实现左右拖拽移动，操作多次是总会出现不进入mouseup事件，导致无法清除mousemove事件。1.第一次尝试由于我要拖拽的元素中有图片，于是猜测是否浏览器默认行为变成拖拽...
2019-12-10 11:31:22
2039
4
原创 easyui dialog自适应高度默认居中
工作中使用easyui的时候发现，dialog必要设定宽，但不必设定具体高度，会按照内容扩展高度。但最好设定一个maxHeight，来保证超过屏幕高度的内容可见，设定maxHeight后超过这个高度就会自动添加滚动条，没有超过则正常显示。像这样：$('#xxx').dialog({ title: '标题', content: '我是内容', minWidth: 400, maxH...
2019-06-21 10:01:47
2448
原创 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
9750
原创 js 默认滚动到最底部
首先，想要默认滚动到最底部，思路是：判断页面/元素是否出现了滚动条 —— 判断方法是：页面/元素高度有没有超过滚动高度若有滚动条即把滚动条滚动到最底部现在我们来了解几个dom属性:scrollTop:获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0scrollHeight:这是一个只读属性，是元素内容高度的度量，...
2019-05-22 10:16:02
38383
5
原创 小程序修改data，对象或数组
小程序开发中经常要对data数据进行修改，当遇到数组与对象的data要如何修改呢？下面例子：data: { obj: [ { id: "0", name: "A" }, { id: "1", name: "B" }, ]},changeData() { //添加数组 let obj = this.data.obj; obj.push({id...
2019-05-21 16:31:39
2521
原创 js如何实现继承，详解原型链
使用js实现继承，主要是依靠原型链实现的原型链想要知道原型链是什么，先了解构造函数，原型，与实例之间的关系构造函数：可用来创建特定类型的对象。构造函数与其他函数的区别是在于调用方式的不同。使用new操作符来调用的函数都是构造函数，函数名默认以大写字母开头实例：以构造函数的初始化对象，通过用new操作符原型：每个函数一旦被创建就有一个prototype属性（原型），是实例的原型对象...
2019-05-21 16:17:08
231
原创 js实现类，详解函数模式
ECMAScript中是没有类的概念的，它对于对象的定义是“无序属性的集合，其属性可以包含基本值、对象或者函数”以下是几种js的函数模式来封装实现类以及他们的优缺点工厂模式工厂模式使用普通函数以根据参数创建一个包含需要的属性和方法的Person对象function createPerson(name, age, job) { var o = new Object(); o.n...
2019-05-16 16:42:02
271
原创 小程序 组件使用，父子组件通信
小程序开发中，封装共用组件特别常用，现在记录一下组件的使用以前父子组件是如何通信的。父组件.json{ "usingComponents": { "Cart": "../../components/Cart/Cart"（组件路径） }}父组件.wxml<Cart num="{{num}}" bindnumChange="numChange">&...
2019-05-14 14:42:10
675
原创 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
2929
原创 jq获取checkbox，radio选中
checkbox是否选中：$(xxx).is(':checked') 返回true或者false获取所有选中的checkbox：$('input[name=xxx]:checked') 返回选中元素集radio是否选中：$(xxx).is(':radio') 返回true或者false获取选中的radio：$("input[name=xxx]:checked"); 返...
2019-04-24 17:06:52
342
原创 easyui datagrid显示html元素字符串问题
在列columns里加：formatter:function(val,row,index){ return "<xmp style='margin:0'>" + val + "</xmp>";}
2019-04-24 17:03:52
772
原创 easyui validatebox,textbox,datebox,combobox的取值
easyui各种表单元素的取值：easyui-validatebox //可以使用id或表单选择器取值：$(xx).val();赋值：$(xx).val(value);easyui-textbox,combo //只能用id选择器获取取值：$('#xx').textbox('getValue');或者$('#xx').textbox('getText');赋值： $('#xx')...
2019-04-24 17:01:45
698
原创 angularjs cli执行ng build命令文件路径错误解决
angularjs cli执行ng build命令打包文件时，加载的所有js路径错误，执行使用命令ng build --base-href ./即可解决问题
2019-04-24 16:55:13
532
空空如也
webpack+ejs构建多页面开发模式时devServer不更新ejs
2019-08-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人