前端笔记
文章平均质量分 51
曲小强
前行之路,负重而行。
展开
-
微信H5支付
// 首先 引入sdkimport wx from 'jweixin-module'// 然后定义一个方法function getUrlKey(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null}toPay()原创 2022-05-30 11:13:03 · 135 阅读 · 0 评论 -
gitlab设置汉语显示
原创 2020-06-18 15:35:37 · 996 阅读 · 0 评论 -
处理文本框输入换行,前端展示换行消息
<pre>{{ item.text }}</pre>原创 2020-06-09 11:44:39 · 1321 阅读 · 0 评论 -
vs code配置
{ "git.ignoreMissingGitWarning": true, // "files.associations": {"*.vue":"html"}, "files.associations": { "*.vue": "html", "*.js": "html" }, "css.validate": false, ...原创 2020-04-02 11:06:37 · 183 阅读 · 0 评论 -
HTTP状态码详解(下)
接上文 HTTP状态码详解(上)(建议收藏)。首先感谢你继续观赏本文,百忙之中,你抽空所学到的知识,定会收益良多。我也为自己帮助到你而感到高兴~让我们接着往下看。4、详细的描述状态码之(3**)300:被请求的资源有一系列可供选择的回馈信息,每个都有自己特定的地址和浏览器驱动的商议信息。用户或浏览器能够自行选择一个首选的地址进行重定向。301:被请求的资源已永久移动到新位置,并且将来...原创 2019-10-30 16:04:32 · 768 阅读 · 0 评论 -
HTTP状态码详解(上)
导读:当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。HTTP状态码的英文为 HTTP Status Code。下面是常见的HTTP状态码:200 - 请求成功301 - 资源(网页等)被永久转移到其它URL404 - 请求的资源(网页等)...原创 2019-10-29 17:46:57 · 187 阅读 · 0 评论 -
正则
(?=^.{12,25}$)(?=(?:.*?\d){2})(?=.*[a-z])(?=(?:.*?[A-Z]){2})(?=(?:.*?[!@#$%*()_+^&}{:;?.]){1})(?!.*\s)[0-9a-zA-Z!@#$%*()_+^&]*$ 分解: (?=^.{12,25}$) -- 密码长度12-25,自己改变数字可以调节 (?=(?:.*?[!@...原创 2018-10-22 20:19:51 · 140 阅读 · 0 评论 -
card.js省份证验证
var idCardNoUtil = { provinceAndCitys: {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江", 31:"上海",32:"江苏",33:"浙江",34:"安徽原创 2018-10-23 11:39:29 · 604 阅读 · 0 评论 -
js-base64转换为file对象,ajax提交表单
var img = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA...原创 2018-11-01 16:35:25 · 2137 阅读 · 0 评论 -
无线分类递归树
let arrList = [ ["a","b","c"], ["a","b","d"], ["a","c","d"], ["x","y","z"], ]; 转变成:let arrList = [ ["a"原创 2019-01-25 11:50:01 · 321 阅读 · 0 评论 -
Ajax,jQuery ajax,axios和fetch介绍、区别以及优缺点
引言前端的发展可以说是一个快速崛起的历程了,不断的进化,不断的出现新的Api,新的功能,前端这个领域真的是一个发展飞快的领域,你前一天刚学会XXX的的运用,后一天某某某就革新了一项新的技术,你在感叹学不动的同时,不得不继续学习。扯远了,回到我们今天的主题。。。三年前入职的时候还是一个只会使用Ajax和Jquery Ajax的菜鸟,由于早期Jquery不支持大文件请求的问题,可以原生的XHR...原创 2019-08-22 18:01:58 · 459 阅读 · 0 评论 -
ES6的Promise对象的使用
Promise对象,ES6新增的一个全新特性,虽然它出现很久了,but我相信,有很多的小伙伴还是没有怎么用过,今天让我们来好好的学习一下它。 1、Promise 的含义所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。在日常开发中,经常需要用到ajax请求数据,拿到数...原创 2019-09-03 17:16:46 · 367 阅读 · 0 评论 -
你知道却不常用的HTML标签(一)
作为了一个前端 帅小伙/靓姑娘,开发的时候总是会和 HTML 标签打交道。一来二往的就熟悉的开始使用 div + css 的布局了,今天介绍一篇很早以前就出现,但是没有太多人(我认识的人使用的不是很多)使用的HTML的其它标签,赶快来认识它们吧。1、pre 标签HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空...原创 2019-09-18 16:15:24 · 373 阅读 · 0 评论 -
为什么let this=that
不知道大家有没有接触过jquery jquery里边有一个特别典型的例子能说明用_this的作用$("#btn").click(function(){ var that = this;//这里this和that都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象...原创 2018-10-09 11:46:59 · 7946 阅读 · 0 评论 -
前端优化
(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。 (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascrip...原创 2018-10-08 10:42:22 · 173 阅读 · 0 评论 -
ES6不得不知的十大特性
以下是ES6排名前十的最佳特性列表(排名不分先后):Default Parameters(默认参数) in ES6Template Literals (模板文本)in ES6Multi-line Strings (多行字符串)in ES6Destructuring Assignment (解构赋值)in ES6Enhanced Object Literals (增强的对象文本)in ES6Arro...转载 2018-05-02 16:18:01 · 230 阅读 · 0 评论 -
HTML5 API 之video/audio 视频/音频
video的使用方法:你的浏览器不支持video标签视频常用标签属性:autoplay:自动播放controls:视频操作控件muted:静音loop:循环播放poster:加载完成前显示的图片音频的使用方法音频常用标签属性:autopla原创 2018-01-15 18:30:12 · 1818 阅读 · 0 评论 -
常见Http状态码大全
一些常见的状态码为:200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解:1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 (继续) 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。 101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。2xx (成功)表示成功处理了请求的...转载 2018-03-16 11:36:31 · 13226 阅读 · 2 评论 -
非常实用的JavaScript小技巧
1、在循环中缓存array.length这个技巧很简单,这个在处理一个很大的数组循环时,对性能影响将是非常大的。基本上,大家都会写一个这样的同步迭代的数组:for(var i = 0; i < array.length; i++) { console.log(array[i]);}如果是一个小型数组,这样做很好,如果你要处理的是一个大的数组,这段代码在每次迭代都将会重新计算数组的大...原创 2018-03-16 13:44:25 · 184 阅读 · 0 评论 -
H5页面适配所有iPhone和安卓机型的六个技巧
1、viewport 简单粗暴的方式:<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">直接设置viewport为320px的1.3倍,将页面放大1.3倍。为什么是1.3?目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,ip...原创 2018-03-16 13:49:01 · 4033 阅读 · 0 评论 -
移动端遇到的bug个解决方法
内容并不是很全,以后每遇到一个问题都会总结在这里,分享给大家!一、meta标签的相关知识1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=...原创 2018-03-16 15:01:26 · 532 阅读 · 0 评论 -
关于meta标签的概述
meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码<meta charset='utf-8'>2、声明文档的兼容模式<meta http-equiv="X-UA-Compatible" con...原创 2018-03-16 15:39:04 · 219 阅读 · 0 评论 -
移动端下拉菜单
js部分var cityData=[{value:"110000",text:"北京市",children:[{value:"110101",text:"东城区"},{value:"110102",text:"西城区"},{value:"110103",text:"崇文区"},{value:"110104",text:"原创 2018-03-20 11:23:43 · 5046 阅读 · 0 评论 -
移动端的垂直布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">原创 2018-03-20 13:36:30 · 545 阅读 · 0 评论 -
自己本地起个服务
会生成一个dist文件夹,里边就是生产的静态html文件,直接放到服务器端进行运行了。如果你不会Node或者其他服务器知识,你可以简单安装一个最简单的服务器-live-server。npm install -g live-server然后在dist文件夹下输入live-server就可以了。...原创 2018-04-26 14:26:55 · 1770 阅读 · 0 评论 -
Chrome调试技巧
1.快速搜索文件当DevTools打开的时候,你可以按下Ctrl + P( 在Mac上使用Cmd + P)来快速的寻找和打开你工程中的任意文件。2.在源代码中搜索但是如果你希望在源代码中搜索该怎么办?按下Ctrl + Shift + F(在Mac上使用Cmd + Opt + F),即可在所有已加载的文件中查找一个特定的字符串。这个搜索的方法也支持正则表达式。3.跳到特定行当你打开一个在源标签里的文...原创 2018-03-27 13:51:56 · 384 阅读 · 1 评论 -
前端面试题——综合问题(整理)
1.页面从输入URL到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)1.输入域名地址2.发送至DNS服务器并获得域名对应的WEB服务器IP地址;3.与WEB服务器建立TCP连接;4.服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)5.浏览器跟踪重定向地址6.服务器处理请求7.服务器返回一个HTTP响应8.浏览器显...原创 2018-03-27 17:44:09 · 750 阅读 · 0 评论 -
移动端页面使用rem来做适配
rem来做适配以前我们往往这样做页面:viewport width 设置为 device-width,然后选我们需要兼容设备的最小宽度(一般是320px)。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上,页面的字体大小,内容尺寸都是一样的,不同的是,大屏的内容间的空隙比小屏的大。所以这样做的缺点就是,页面在某些尺寸的设备上显示的效果不好。如果用rem来页面,我们会根据不同的设备宽...原创 2018-04-17 15:24:45 · 935 阅读 · 0 评论 -
移动端前端笔记 — 常见JS与CSS问题及解决方法
一. css部分body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidden(html,body加height:100%) ,这样元素超出body的高度也不能滑动了meta标签<meta name="viewport" content="width=device-...原创 2018-01-15 17:17:26 · 503 阅读 · 0 评论