前端积累
关注
分享
扫一扫
文章平均质量分 71
ionluo
1. 青青园中葵，朝露待日晞。少壮不努力，老大徒伤悲。
2. 手把青秧插满田，低头便见水中天。心地清净方为道，退步原来是向前。
3. 腐草为萤，耀采于月。净从秽出,明由晦生。
4. 老当益壮，宁移白首之心？穷且益坚，不坠青云之志。
展开
-
【转载】EDM制作要点
EDM是Email Direct Marketing的缩写，虽然也是html，但是和我们在网页上使用的html不同，因为安全原因，各大邮箱服务商级邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本的html展示避免垃圾邮件即使邮件做的再精美，被邮箱自动识别为垃圾邮件也白费，每个邮箱都有自己的垃圾邮件识别规则，了解一下可以避免EDM被当作垃圾邮件，关于这点知乎上哟个经典的问题怎么样才能让自己服务器发出的邮件不被 Gmail、Hotmail、163、QQ 等邮箱放入垃圾箱？绝大多数是服务器设转载 2021-05-13 14:00:58 · 787 阅读 · 0 评论 -
checkbox自定义样式
<label> <input type="checkbox" ng-model="checkFormObject.obj.receive"> <span></span> I consent to receive marketing communications from xxx</label>/* less */[type='checkbox'] { opacity: 0; & + span原创 2020-12-07 11:05:56 · 569 阅读 · 0 评论 -
css修改图片尺寸后图片变模糊的问题
在富文本编辑器编辑文章发布到网站上时，因图片尺寸过大或导致页面混乱，并且需要兼容移动端。所以需要给图片限制max-width: 100%, 但是设置改属性后，若图片超过100%会导致图片模糊。关于这个问题我提出下我的解决方案：直接法：图片模糊可以认为是在图片缩小或者放大过程中难以避免的问题，可以通过设置图像缩放算法来尽量生成适合的图片下面方式是通过非平滑缩放算法对图片进行缩放，适用于像素艺术作品，例如一些网页游戏中的图像。图片中字体会更加清晰一些，但是线条可能会断裂。如下图：image-ren原创 2020-10-23 14:50:27 · 6393 阅读 · 0 评论 -
node和npm使用记录
鉴于使用npm的时候经常遇到各种报错，这里记录下遇到报错的解决方法NPM篇npm list -g --depth 0报错根据报错提示，是全局包@vue/cli出现了问题，首先尝试更新它：npm update -g @vue/cli，不行的话卸载重装：npm uninstall -g @vue/clinpm install -g @vue/cli卸载失败的话可以根据提示直接手动删除后话，即使解决了npm ls的大量报错，但是依旧存在少量的报错，如下图：第一种报错peer dep mi原创 2020-10-16 15:20:31 · 3035 阅读 · 0 评论 -
npm run build报错问题
错误提示 Call retries were exceeded这个问题我一开始认为是项目中存在about.js的依赖，但是不存在about.js的文件导致。call retries were exceeded 翻译过来是 重试超时， 感觉也没有参考价值。看了很多博客都是先删除包npm unintall然后在npm install， 但是毫无效果。最终测试发现是本人引入的mock文件太大导致，删除测试文件的引入或者设置成production环境不添加mock即可。后来发现一篇相关的issue： http原创 2020-09-30 14:49:20 · 4269 阅读 · 0 评论 -
js打开新窗口被拦截问题
打开新窗口的方式主要有用户直接点击的事件是不会被浏览器拦截的，如DOM里面的form标签和a标签，用户点击可以正常打开新窗口。原创 2020-09-23 17:06:24 · 4027 阅读 · 1 评论 -
我的表单验证器
(function () { angular.module('validator.rules', ['validator']).config([ '$validatorProvider', function ($validatorProvider) { $validatorProvider.register('required', { invoke: 'blur', validator: /.+/原创 2020-07-30 10:08:51 · 342 阅读 · 0 评论 -
gulp3学习
gulpfile.js// Gulp中提供的方法（这里是gulp3的方法，升级成4+后不能传递一个依赖任务列表。）// gulp.src() 获取任务要处理的文件// gulp.dest() 输出文件// gulp.task() 建立gulp任务// gulp.watch() 监控文件的变化// gulp-htmlmin: html文件压缩// gulp-csso: 压缩css// gulp-babel: JavaScript语法转化// gulp-uglify: 压缩混淆Jav原创 2020-07-09 22:48:05 · 303 阅读 · 0 评论 -
图片转base64
本地读取图片转base64<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-s...原创 2020-04-13 20:10:24 · 405 阅读 · 0 评论 -
对于可点击元素的拖拽实现
<style> #running-mouse { position: fixed; left: 30px; bottom: 15%; z-index: 1000; cursor: pointer; }</style><div id="running-mouse">...原创 2020-03-05 14:02:56 · 420 阅读 · 0 评论 -
Sublime Text3 实现实时刷新页面
https://blog.youkuaiyun.com/dearmorning/article/details/78925758转载 2020-02-25 12:55:27 · 2971 阅读 · 0 评论 -
gitlab使用记录
1. 复制原项目地址2. New project3. import project – 选择 Repo by URL4. 填入信息，点击“create project”5. 等待拉取完成原创 2019-12-31 13:27:50 · 1468 阅读 · 0 评论 -
JavaScript学习笔记
浏览器控制台使用详细见：https://blog.youkuaiyun.com/ion_L/article/details/85208646这里记录几点不容易知道的小知识：Waterfall中有一条蓝线和一条红线，蓝线表示DOM Content Loaded事件触发的时间，红线表示Window onload事件触发的时间。面板拆分Elements - 页面dom元素 Console- 控制台 S...原创 2019-11-03 19:57:30 · 884 阅读 · 0 评论 -
图片转base64后如何使用
首先我们要通过服务器获取一些支持图片转base64的软件制作好图片的base64编码，通常非常长，建议分开文件存储。// Base64 在CSS中的使用div{ background-image: url("data:image/【这里是图片格式，如jpg,png】;base64,【编码位置】");}// Base64 在HTML中的使用<img src="data:ima...原创 2018-09-03 22:02:10 · 5458 阅读 · 0 评论 -
JavaScript笔记本
【知识的学习需要点滴积累，我想把这篇文章作为自己的一个错题本类似的东西，持续更新。。。。】1、定义全局变量与在window对象上直接定义属性还是有一点不同：全局变量不能通过delete运算符删除，而直接在window对象上定义的属性可以被删除。因为使用var声明全局变量，window会为这个属性定义一个名为“configurable”的特性 ，这个特性的值被设置为false，这样该属性就...原创 2018-09-12 18:19:06 · 3851 阅读 · 0 评论 -
git 合作开发教程
1、首先，我们这里选用GitHub作为代码存储仓库，git bash是我们常用的git操作窗口（cmd也可以，建议用git bash）。GitHub：https://github.com/Git工具：https://git-scm.com/download/win注册GitHub账号并安装好git就可以在项目目录下右键打开git bash了。2、设置git用户名和邮...原创 2019-12-05 15:08:40 · 5152 阅读 · 1 评论 -
git创建分支错误提示 fatal: Not a valid object name: 'master'.
问题如下图，在本地初始化新建的空git项目后并不能创建分支问题（readme.txt是我加上去的，至于原因看后面）这里提示 fatal: Not a valid object name: 'master'，后来使用git status 发现了问题，根据提示顺利解决。值得注意的是，倘若git项目下没有任何文件可以commit，那么这样子执行也是没有用的，估计是初始的master对象为...原创 2018-09-13 13:01:47 · 21694 阅读 · 2 评论 -
【收藏】CSS 变量教程 - 阮一峰的网络日志
http://www.ruanyifeng.com/blog/2017/05/css-variables.html转载 2018-09-20 00:47:14 · 278 阅读 · 0 评论 -
calc()用法
1、calc()是css3的一个新增的功能，用来指定元素的长度，你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。2、calc()语法.element { width：calc(expression); }3、calc()的运算法则 1）、使用 "+"、"-"、"*" 和 "/" 运算 2）、...转载 2018-09-13 14:15:02 · 5258 阅读 · 0 评论 -
技术文章个人收藏
https://segmentfault.com/a/1190000016324962?utm_source=tag-neweststarof博客园animation入门详解::before和::after伪元素用法程序员必须知道的一些有用的外国网站Cookie、localStorage、sessionStorage本地化存储简单分析比较...原创 2018-09-04 08:59:42 · 403 阅读 · 0 评论 -
jquery trigger函数无法触发a标签问题
JQ 的 trigger() 方法和click()方法无法触发 a 标签的点击事件，如下是无效的。$("#icon").trigger("click");解决方法1//给id为icon的a标签里加其他块元素，如span,给span加trigger。这时候，由于事件的冒泡，并不需要指定span的click事件$("#icon").find("span").trigger("clic...原创 2018-08-28 18:15:23 · 5071 阅读 · 0 评论 -
JavaScript、Java和PHP获取前一个访问页面的URL地址
要获取前一个访问页面的URL地址前后端语言都可以实现。PHP 的是 $_SERVER['HTTP_REFERER'] JavaScript的是 document.referrer Java 则是 request.getHeader("Referer") 下列场景无法获得前一个访问页面的url，返回空字符串或者null直...原创 2018-08-25 15:55:38 · 5639 阅读 · 0 评论 -
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
JSON.parse(jsonString): 在一个字符串中解析出JSON对象JSON.stringify(obj) : 将一个JSON对象转换成字符串jQuery.parseJSON(jsonString) : 将格式完好的JSON字符串转为与之对应的JavaScript对象...原创 2018-09-04 18:02:23 · 4447 阅读 · 0 评论 -
delete与垃圾回收机制
老实说，delete并不等与释放空间，所以这标题有点误导。但是最近项目中用到了这个delete，就对delete的用法和垃圾回收机制进行一番总结。JS中的内存处理与其他高级语言一样都有一个垃圾回收器的功能，它能在内存不在需要的时候对该部分内存进行释放，而其执行时间是不可预知的，目前浏览器使用的垃圾回收算法主要为以下两种：1、标记清除（最常见的垃圾收集算法，下面的环境变量通常是代码中的全局...原创 2018-08-11 21:07:39 · 5553 阅读 · 1 评论 -
如何获取图片的信息（包括dpi） 【前端js 后台java window系统】
方法一：图片二进制（正在亲测，未得出结果）据说DPI信息在jpg文件中用5个字节表示，直接读取二进制流就可以了偏移 13 的1个字节：X和Y的密度单位units=0：无单位units=1：点数/英寸units=2：点数/厘米偏移15的2字节：水平方向像素密度偏移16的2字节：垂直方向像素密度然而用js读二进制太扯了。。。这得吃点内存的//PHP读取图片二进制...原创 2018-09-05 09:26:45 · 16253 阅读 · 5 评论 -
加遮罩后禁止滚动（我觉得最好的方法）
“如何加遮罩后禁止页面滚动？”关于这个问题，查找了很多网上的方案，感觉兼容性不好，下面写上我的方法，注意这里用了jquery框架var top = 0; $(document).scroll(function(){ if($(".mask").is(":visible")){ $(document).scrollTop(top); }});/* top用来记录当前滚动条...原创 2018-09-06 17:49:17 · 7968 阅读 · 1 评论 -
Meta中添加X-UA-Compatible和IE=Edge，chrome=1有什么作用
常常在很多网站下看到如下meta定义：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">这是一个文档兼容模式的定义。主要用于加强代码对IE的兼容性，强制IE使用当前本地最新版标准模式渲染或者用chrome内核渲染。1、Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所...原创 2018-09-25 18:42:44 · 545 阅读 · 0 评论 -
【转载】JavaScript常用数组操作方法，包含ES6方法
一、concat()concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。var arr1 = [1,2,3];var arr2 = [4,5];var arr3 = arr1.concat(arr2);console.log(arr1); //[1, 2, 3]console.log(arr3); //[1, 2, 3, ...转载 2018-09-26 18:10:30 · 808 阅读 · 0 评论 -
网页出现乱码问题
1、首先确认出现乱码的网页文件2、若是网页元素乱码可在head加上：<meta charset="UTF-8" />;3、若是引入js或者css文件的乱码，则可以用上面方法2或者在引入标签内加上“charset='UTF-8'”<script type="text/javascript" src="./js/one.js" charset="UTF-8">原创 2018-09-21 17:31:40 · 1484 阅读 · 0 评论 -
HTML特殊字符对应表
原创 2019-04-11 16:58:53 · 289 阅读 · 0 评论 -
URL编码解决中文字符乱码(encodeURIComponent和decodeURIComponent)
1、encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符(可看下表的非转义字符更清晰)。注意：为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。var x = encodeURIComponent("https://baidu.com/a(-_.!~*')1"...原创 2018-09-30 11:09:42 · 17231 阅读 · 0 评论 -
css制作各种图形【The Shapes of CSS】
转自：https://css-tricks.com/the-shapes-of-css/#转载 2018-10-25 08:13:17 · 1261 阅读 · 0 评论 -
chrome预览HTML页面顶部出现空白 ()字符
本人测试在window的记事本打开会出现字符，而其它软件不会．解决方法：１．把网页内容拷贝出来到新的文件中即可．（不要用记事本打开，浏览器或者代码编辑工具不会出现该问题） ２．修改文件编码下面是造成该现象的原因：（来源网络）页面的编码如果是UTF-8 + BOM，会在body开头处加入一个可见的控制符，导致页面头部会出现一个空白。这种编码方式一般会在windows操作系...原创 2018-11-23 19:06:17 · 866 阅读 · 0 评论 -
css补习班
1．悬挂缩进<!-- 这里的margin:0 是为了消除p标签的默认样式 --><p style="margin: 0; margin-left: 1em;text-indent: -1em;">1. 这是第一句</p><p style="margin: 0; margin-left: 1em;text-indent: -1em;">...原创 2019-02-25 19:41:11 · 231 阅读 · 0 评论 -
js获取当前用户IP
引用下面的js：<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>直接获取IP和城市名： alert(returnCitySN['cip'] + returnCitySN['cname']); 来源:https://www.cnblogs.com/billybobby/p/672979...转载 2019-01-10 18:19:15 · 506 阅读 · 0 评论 -
你可能不知道的一些 Chrome 浏览器使用技巧
1. 使用命令行实现网页截图第一步 打开控制台，右键“检查”或者快捷键F12第二步 选中需要截图的节点第三步 ctr+shift+p 打开命令行， 使用Capture node screenshot 就可以下载你需要的节点截图下来了。使用Capture full size screenshot 即是截取body节点。2. console 中的 $① $0...原创 2018-12-22 16:35:01 · 834 阅读 · 1 评论 -
将DOM节点转化成HTML字符串
DOM转字符串： 字符串转DOM：function parseDom(str) { var obj = document.createElement("div"); obj.innerHTML = str; return obj.childNodes;};const dom = parseDom('<div>这是一个dom字符串</div...原创 2019-01-03 19:15:55 · 8075 阅读 · 0 评论 -
抽奖
固定人数抽奖function random(m, n) { return m + Math.floor(Math.random() * n);}function randomItem(arr, from = 0, to = arr.length) { const index = random(from, to); return { index, value: a...转载 2019-01-29 00:23:07 · 276 阅读 · 0 评论 -
一串令人崩溃的代码
<html><body></body><script> var total=""; for (var i=0;i<1000000;i++) { total= total+i.toString(); history.pushState(0,0,total); }</script></html&原创 2019-03-09 21:52:48 · 10511 阅读 · 2 评论 -
DOM事件级别
一、HTML事件处理程序，在html中的写法： <input type="button" onclick="hello()" />。缺点是html和js代码紧密的耦合在一起，不利于修改维护，修改的时候可能需要更改多处。不能给元素添加多个事件处理程序，如果有多个，只会运行第一个。如果不想要事件处理程序了，必须从html代码中删除事件处理代码。———————————————————...转载 2019-03-09 21:55:44 · 1415 阅读 · 0 评论