![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
文章平均质量分 66
show_code
爱前端,爱dota,爱生活,为技术而痴狂,偏爱新技术的学习!
展开
-
ES2022新语法
ECMAScript 2022新增特性原创 2022-07-01 11:19:38 · 578 阅读 · 0 评论 -
原生select触发展开的方法
在有些场景中,我们需要通过其他的方式触发原生的select展开,以便用户快速使用。然而试了很多方法,都没能达到达到效果。这里先说一种能能在pc端可行的方法,就是用zpeto/jquery的trigger方法,使用如下:$(element).trigger("mousedown"); 原生的写法如下:function showDropdown(element){ var event;原创 2016-05-05 11:51:59 · 24494 阅读 · 5 评论 -
npm下载报错情况的处理
npm是一个非常强大的包管理器,基本上前端需要的插件和框架在这上面都有,所以本人一直只用这个,其他的一律先忽视。然而使用npm时有时候会出现error以及无法下载的情况,下面有一个解决方案,亲测能解决:出现一下错误时:npm err! Error:connect ECONNREFUSED 127.0.0.1:8087解决办法为:$ npm config set proxy null原创 2016-05-05 11:39:19 · 6523 阅读 · 0 评论 -
html方式判断IE版本
在进行WEB标准网页的学习和应用过程中,网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山,此外还有Firefox、Opera等。需要对这些浏览器进行兼容。同时,单就IE而言,因IE版本的升级更替,目前浏览者使用的主要停留在 IE5(IE5.5)、IE6和IE7这三个版本中。而这3个版本对于我们制作的W原创 2016-05-11 11:19:38 · 1580 阅读 · 0 评论 -
SCRIPT65535: 意外地调用了方法或属性访问(ie不兼容解决办法)
在IE8下面,在使用jquery的时候可能会出现这种状况,解决办法有一下两种:1.凡是input,不管任何类型,不能用text()方法,只能用val()方法;2.如果看不出来,在js代码上加debugger,一步一步调试,看哪行出错自然就知道这个方法不能用了原创 2016-03-03 13:17:13 · 9380 阅读 · 0 评论 -
js中的基本正则以及过滤特殊字符
1.正则金钱,保留两位小数 var money = /^[0-9]\d*(\.\d{0,2})?$/2.过滤用户提交内容的特殊字符function formatscript(str) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]")原创 2016-01-29 14:30:37 · 4236 阅读 · 0 评论 -
css3中calc在less编译时被计算的解决办法
对于前端er来说,Less或Sass已经是一项必备的基本技能,有了这个利器,可以省下前端开发者的很多编码时间,让你写CSS如行云流水一般,然后最近我在Less里加入calc时确发现了有点问题,我在Less中这么写:div {width : calc(100% - 30px);} 结果Less把这个当成运算式去执行了,结果给我解析成这样:div {width: calc(70%)原创 2015-12-26 14:16:33 · 34167 阅读 · 1 评论 -
html网页表单中禁用复制、右键、粘贴、剪切等方法
禁用复制、粘贴原创 2015-01-17 14:40:00 · 11552 阅读 · 3 评论 -
AJAX中POST与GET之间的区别
本文是对ajax的POST与GET之间的区别,当然ajax不仅仅只是post和get,但是这两种一定是绝大多数开发者最常用的方法。下面就来探讨一下ajax中的post和get方式,能力有限,希望对大家有所帮助Get方式:用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照U原创 2015-10-13 18:39:13 · 3297 阅读 · 2 评论 -
图片垂直水平居中的N种方法
div内容水平垂直居中解决方案原创 2014-10-08 21:35:49 · 5704 阅读 · 0 评论 -
前端模版artTemplate的介绍及使用
artTemplate使用原创 2015-05-06 16:24:20 · 82707 阅读 · 6 评论 -
css 盒模型详解
盒子模型是CSS中一个重要的概念,也是做一个前端er必备的基础知识,理解了盒子模型才能更好的排版和布局。盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。原创 2015-09-16 23:14:31 · 1940 阅读 · 0 评论 -
html特殊字符大全
下面收集了一些常用的html字符大全,因为在前端开发的过程中有时会用到,有些字符可以简单的替代icon什么的,方便使用!特殊符号命名实体十进制编码特殊符号命名实体十进制编码 ! !"""#原创 2015-11-03 18:30:56 · 6799 阅读 · 0 评论 -
javascript内存泄漏总结
作为一个前端,其实很少会注意到有内存泄漏的情况,大多数前端er都会认为JS是不会存在内存泄漏的,然后事物都没有绝对的,按照JS的设计初衷javascript这门语言是不应该有内存泄漏这个问题的,但是JS并不是独立的,JS本身就是用来与DOM交互的,这两者之间摩擦摩擦,就会产生一些问题,下面来说说这些问题怎么产生的以及解决办法:1、给DOM对象添加的属性是一个对象的引用。范例: var My原创 2015-09-28 12:14:24 · 3166 阅读 · 0 评论 -
js中的一些数字处理方法
javascript中Math对象的使用原创 2015-09-10 14:36:52 · 2542 阅读 · 0 评论 -
实战响应式图片
原文:Responsive Images in Practice作者:Eric Portis译者注:感谢米粽、我佛山人和otakustay为译文提出的宝贵意见。魔鬼因一切我们享受的东西而惩罚我们。—阿尔伯特·爱因斯坦图片已经占了 Web 内容的 62%,而且我们每天都在制造更多。如果所有图片内容都能被好好加以利用那的确很赞。但是对小屏或低分辨率屏转载 2015-08-07 10:11:54 · 2292 阅读 · 0 评论 -
sublime text相关插件配置
做前端开发,如果你电脑配置足够好的话,建议首选还是webstorm,专门为前端打造的开发利器,但是如果电脑配置一般,有需要一款开发利器呢?那建议还是用sublime text,它的优点百度一搜一大篇,而我看重的就几点,吃内存小,启动速度快,而且插件多,高可配置,用得顺手了能大大提高你的开发效率,下面就是我记录的一些sublime text相关的一些插件配置以及其它:1.将sublime tex原创 2016-10-30 15:36:46 · 644 阅读 · 0 评论 -
gulp使用配置(无障碍)windows
最近考虑到项目中要用到gulp,所以自己就想先来试试水,虽然这个早就不是什么特别的东西了,但是真正想去学习使用直到用到自己的项目的中,这个过程还是有些困难的。而且网上的教程都基本千篇一律,都没有从根本说明一些问题,遇到坑还是会在那里。大部分教程都会出现这个情况,把一些细节给跳过去了,但是往往这些步骤是至关重要的,所以导致很多人无法快速上手,甚至想放弃研究的打算。下面就是个人整理学习gulp的一些过原创 2016-11-18 22:04:41 · 1608 阅读 · 0 评论 -
UEditor控件的图片无法正常缩放(“大坑”)
UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大。最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图片)都无法正常缩放,选中图片,用鼠标点击并拖动图片边沿的小标签,图片只能缩小不能放大,还有时只能放大不能缩小。尝试过很多方法都没办法解决,甚至检查了js源码,也没有发现有任何异常的地方。 功原创 2017-04-10 16:32:24 · 9767 阅读 · 7 评论 -
IOS上11.3以上的input输入问题
1.fastclick在ios 11.4以上的bug解决场景:在该版本的某一个输入框输入字符后,点击输入法上面的"完成"按钮,再点击该页面的其他输入框或者当前输入框都无效,需要长按才有效果;解决办法:修改fastclick源码,具体修改如下/** * @param {EventTarget|Element} targetElement */ FastClick....原创 2019-02-18 19:01:18 · 1043 阅读 · 0 评论 -
前端开发利器--Visual Studio Code配置git和中文版
之前开发都是用的sublime text,配色好看而且轻量,后来公司新来几个前端都给我推荐vscode,说这个更好用,而且基于vue的技术栈开发的话,vscode也是推荐得最多的编辑器,所以就入手了!工欲善其事,必先利其器。先来搞好一波配置再撸代码就能更得心应手,对吧!第一步:官方下载的都是英文版,下载地址,先来个中文支持,方便以后操作吧:1.先点击vscode左边菜单栏最后...原创 2018-09-11 00:14:55 · 7214 阅读 · 0 评论 -
Node之利器NVM
一直都是用node的npm作为开发工具,今天在配置webpack的一个插件的时候居然需要node的版本限制,而我本地的node一直都是没有更新的,所以就必须要升级node版本;但是站在一个开发者的角度,是不太想像小白一样又去重新下载安装包去升级一个软件的,所以就看看有没有更好的办法,果不其然,发现了node版本控制的一个“利器”--NVM。 NVM到底是啥?NVM...原创 2018-09-06 01:00:50 · 341 阅读 · 0 评论 -
FontCreator制作iconfont及font-face使用
在网页开发过程中,我们常常会用到各种小图标(icon),然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式,不同的大小和颜色的icon都要重新做一套,在实际开发过程中是相当不便的,那么有没有更好的解决方案呢?当然是有了~~通过css3的font-face属性来实现(其实css2就已经支持了,但是css3对它进行...原创 2018-03-04 20:15:44 · 9152 阅读 · 1 评论 -
cookie详解
cookie是一种最原始也最简单的客户端存储方式,几乎所有的网站的都有使用cookie,各有各的用途,看到这篇文章的不少人也是都是使用过cookie的人同学吧,但是我们反问下自己,我们真的懂cookie了吗?我自己创建了一个网站,网址为http://ppsc.sankuai.com。在这个网页中我设置了几个cookie:JSSESSIONID,PA_VTIME,skmtutc,test。在 chr...原创 2018-03-06 22:37:50 · 68252 阅读 · 5 评论 -
highcharts实现立体3D饼状图
最近做一个h5活动页,设计师给我设计出了一个3D饼状图,我当时觉得没啥,觉得强大的echarts应该能做出来的,因为公司的项目涉及到图表的都用的echarts,但是后来去echarts官网一查,没这个功能,或者说做不出这样的效果,所以就想想用别的框架,后来就发现了highcharts,其实两个做图表方面都差不多,一个是国产的一个是进口的,而且两个做图标的效果也是有一定区别的,echarts用can原创 2018-02-06 20:29:30 · 12289 阅读 · 6 评论 -
html2canvas用法的总结
最近做h5网页,有个功能是用户能长按页面保存为图片,在我们理解就是网页要生成图片然后再让用户长按保存,然后就发现了html2canvas这个框架了,效果挺不错了,但是有几个坑说一下(用的最新版):html2canvas($("#pop_predict_img_container")[0], {scale:2,logging:false,useCORS:true}).then(function(ca...原创 2018-02-09 18:16:38 · 40205 阅读 · 9 评论 -
css去除ios中input和textarea的阴影
搞了半天原来是默认样式的影响,就这样吧!input,textarea{-webkit-appearance: none;appearance: none;}android下面没这样的影响,苹果还真是奇葩!原创 2017-11-03 17:13:15 · 3581 阅读 · 0 评论 -
javascript中toFixed()方法详解
最近做的项目涉及到金额的计算,有一种方式就是进行四舍五入的规则进行小数点后面的尾数处理,以前一直以为toFixed方法就是四舍五入的,知道一个用户反馈了金额计算的bug我才如梦初醒(亏了一毛钱),才仔细深究了下toFixed这个方法,唉,还是我不够严谨啊,前车之鉴,大家勿走我的老路!toFixed还不同的浏览器实现,在IE10及以上里面是正常的四舍五入,但是别的浏览器里面就不一样了,它不是正常原创 2017-08-29 15:35:04 · 90947 阅读 · 15 评论 -
基于javascript的机器智能框架:deeplearn.js
deeplearn.js 最初由 Google Brain PAIR 开发,是一款基于硬件加速的开源 JavaScript 库,可被用在机器智能领域。该库将高性能的机器学习构建模块引入到 web 开发领域。其目标是“使 AI 更注重人性”。deeplearn.js 目前已开源,地址是:https://github.com/PAIR-code/deeplearnjs通过 de原创 2017-08-15 09:12:10 · 885 阅读 · 0 评论 -
html5的input类型和所有属性详解
一直以来只知道HTML5中的input标签type属性的属性值有很多,但具体并没有很清楚,这段时间做了个汇总,方便以后使用,也做个知识储备!在重点介绍type之前,先总结一下input标签的属性:type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text"。具体它有那些值,我们后面再讨论。required:标记一个字段是否为必须。如原创 2017-08-11 10:15:51 · 14959 阅读 · 1 评论 -
plupload上传图片在chorme上点击弹出慢的问题
自从用了七牛云,上传图片就成了so easy的事情了,建议还在自己写上传图片模块或者还在用不知名的第三方图片插件上传图片的话,建议使用plupload来上传图片吧,这货可以向下兼容到ie6,向上无上限,而且带自动压缩图片处理图片的功能,有非常丰富的api供你自定义,所以还是去试试吧!传送门在此 连强大的七牛云的他的js sdk上就自动集成了这个工具,你说厉害不厉害吧!好,进入正题了,这个插原创 2017-06-12 21:17:21 · 1708 阅读 · 3 评论 -
Webpack 3.0来了,就问你慌不慌
Webpack 团队近日宣布正式发布Webpack 3.0 版本。在 2.0 版本发布之后,Webpack 团队与社区联系更为紧密,在优先实现社区希冀的功能需求的同时,提供了更快且更稳定的发布流程。对于本次发布的 Webpack 3.0 版本,用户可以便捷地平滑升级,享受新版本中带来的性能提升与 Magic Comment 等新特征。 Webpack 团队称,他们更加重视来原创 2017-06-21 12:17:46 · 10499 阅读 · 0 评论 -
前端即时搜索的触发(input propertychange)
做前端的应该都有遇到过搜索吧,准确的说是即时搜索,就是用户输入一个字就去发请求匹配相应的结果并显示出来,这里来做个小结吧。具体有下面几种方案吧:1.change事件,这个事件不太友好,触发必须满足两个条件:a)当前对象的值发生改变,并且是由键盘或鼠标事件激发的(脚本触发无效)b)当前对象要失去焦点(onblur) 2.keypress事件,这个一般,对比上面的要好,原创 2017-06-29 15:06:52 · 5665 阅读 · 0 评论 -
解决手机上页面返回但是页面js没有刷新的痛点(BFcache)
一些浏览器中返回按钮是直接使用缓存的,不会执行任何js代码,例如, 在提交的时候将按钮设置为loading状态,如果在提交成功后没有对按钮进行处理,那么返回后按钮依然是loading状态,这就很尴尬了。原因:部分浏览器在后退时不会触发onload事件,這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)什么是bfcache《J原创 2017-04-21 11:44:47 · 20394 阅读 · 0 评论 -
gulp 给静态资源文件添加hash(md5)后缀 防止缓存
第一步,安装所需的包,用npm安装,如下:npm install gulp gulp-rev run-sequence gulp-rev-collector --save-dev第二步,在gulpfile.js文件中写上配置://引入gulp和gulp插件var gulp = require('gulp'), runSequence = require('run-sequen原创 2017-05-02 17:09:23 · 13595 阅读 · 0 评论 -
html5 history解析
在html5之前,浏览器的历史记录是不能被操作的,开发者只能调用history对象的几种方法来实现简单的跳转,比如back、go、forward等等。然而,历史总是会被新生事物代替的,html5来了,这一切都将会得到改变,下面将重点解析下html5中的history新增的东西。1. history.pushState(data,title,url),这个方法会在浏览器历史记录的堆栈顶部添加一条原创 2015-08-18 15:12:59 · 5473 阅读 · 0 评论 -
js 个人整理的兼容性代码
因为各个浏览器厂商都有自己的坚持,所以就出现的JS的兼容,下面是个人整理的一些JS浏览器兼容代码,放在这里备忘吧: 1. document.addEventListener("mousewheel", function(event) {//FF if (event.wheelDelta > 0) { prev(); } else { next(); }原创 2015-08-18 16:19:11 · 1473 阅读 · 0 评论 -
IE系列兼容性hack大全
ie hack css 兼容原创 2015-08-27 21:45:03 · 2876 阅读 · 0 评论 -
去除inline-block元素间间距的N种方法
去除inline-block元素间间距的N种方法by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2357一、现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:转载 2014-09-28 11:00:16 · 1156 阅读 · 0 评论 -
CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463一、简短的前言之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种性质的,可谓是“无宽度准则”一文的延续转载 2014-09-28 17:31:41 · 1343 阅读 · 0 评论