前端技术
文章平均质量分 88
如何在5年薪百万
202110,如何5年内年薪百万
201901,如何3年内拿到50+,如果快速提升价值,拿到50k+的薪水
201801,如何在3年内拿到30+,我一工作6年,后面3年我要思考如何拿到30+
展开
-
前端图片处理的基本知识补充篇(url,blog,base64之间的关系)
背景上篇博客讲述了一些基础概念,世界工作中发现还是有很多困惑的地方。究其原因在于不理解图片到底是什么,有多少种变种。今天整理一下,通过了解这些只是可以帮助我们快速理解各种图片处理的代码和过程。https://blog.csdn.net/kouryoushine/article/details/97628481知识点1,blog,url,base64是什么?blog对象Blob 对象表示...原创 2019-11-05 15:33:27 · 1359 阅读 · 0 评论 -
HTML5中使用type=file的input上传文件权威指南
HTML5中使用type=file的input上传文件权威指南一 、入门下面是大家非常熟悉的html5的文件上传代码,可不保证每个人都真的理解背后的知识点。<input type="file" id="input">当我们点击file标签的时候一定会弹出文件选择的界面,当我们选择一个图片或者文件时,浏览器dom中会产生一个fileList对象。通过DOM API我们可以访问...原创 2019-11-05 15:06:07 · 2103 阅读 · 0 评论 -
uni-rate子组件星星不更新的解决
问题项目开发的时候评分用到了uni-rate组件,发现切换按钮时候星星会有残留。原因uni-rate写的太烂,父元素数据更新的时候子元素没能及时更新。建议使用watch监控value的值,及时更新子元素的值。解决,添加watch watch:{ value(val){ this.valueSync = val; } }, ...原创 2019-10-22 15:07:51 · 1203 阅读 · 3 评论 -
VUE父组件监听$emit事件,如何传递多个父组件自己的参数
背景子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数父组件监听事件传参有两种方式方式1:父组件自己无参数方法名可以不用带参数,函数中的e代表change事件的对象,直接获取参数即可<uni-rate value="5" @change="clickStar" :activeColor="star...原创 2019-10-17 14:23:33 · 4675 阅读 · 0 评论 -
利用AUI实现多种多样的timeline时间轴样式
背景参考上一篇样式,这边不讲解,只是介绍一种方法。我项目用了aui,就刚好利用这个框架实现了。如果不想引入框架,请参考我的上一篇博客。可以简单实现。效果图源码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" ...原创 2019-07-21 18:10:53 · 1355 阅读 · 0 评论 -
纯CSS简单实现漂亮的timeline时间轴效果(样式1)
背景最近需要用到timle效果,网上提供很多案例都加了很多特效,代码也比较复杂。最终找到了一个样式精美,代码简洁的timeline效果。我简单分享一下实现原理,并配上代码,供大家参考。效果图实现原理右侧列表是ul > li * n的列表布局,该布局的样式完全是自己定义,和timeline实现无关实现过程拆分起来很简单ul的样式利用 :before属性为期增加一条灰色的线,宽...原创 2019-07-21 17:56:40 · 35540 阅读 · 11 评论 -
前端图片压缩、预览、上传涉及到的一些基本概念总结,blog和base64区别
背景个人整理篇说明 <img src="imgs/txbk.png" id="img-txz" style="width: 3rem;height: 3rem" class="user-img"/> 图片标签,src制定了图片的地址或者base64格式的url,两种方式都符合HTML语法,可以让浏览器渲染成图片。 <input type="file" accept="i...原创 2019-07-29 16:42:15 · 501 阅读 · 0 评论 -
利用compressorjs压缩、纠正方向、上传图片的案例。
背景最近要用到头像压缩和调整方向,对比了很多插件,最终选择了这款。这里分享如何使用。https://mp.csdn.net/mdeditor/97372181#git hub地址https://github.com/fengyuanchen/compressorjs/blob/master/README.md#options效果演示学习建议理解图片压缩,预览,上传的基本过程,对使用插...原创 2019-07-29 10:56:23 · 4129 阅读 · 0 评论 -
前端JS图片压缩技术的几个插件收集(收藏)
背景最近用到前端压缩图片的技术,虽说可以参考原理自己写,但是前辈花了很大精力写出来的插件可以帮助我们避免很多坑,直接拿来用吧。插件1 compression.js优点:使用简单,参数只有输入图片,压缩比例,输出图片。很少的代码量即可实现压缩和预览的效果。<title>前端图片压缩</title><meta charset="utf-8"><sc...原创 2019-07-29 10:39:30 · 11396 阅读 · 3 评论 -
点击头像按钮实现图片上传并预览
背景手机添加通讯录时,希望实现点击图片上传头像,这里主要包含两个功能将上传图片的input按钮替换为指定图片,点击图片是触发input的上传事件。图片上传后预览。效果预览点击点击灰色头像,打开相机或者相册。上传完后效果如下实现step1 实现图片按钮 <div class="aui-info"> <img src="imgs/txbk.p...原创 2019-07-09 19:54:48 · 14337 阅读 · 3 评论 -
JavaScript 对于数组Array的排序,给数字排序、给数字排序,对象排序,控制内容输出循序
测试数据和代码(a,b)=>(a.score - b.score) 是lambda表达式,等同于funtionsort(function(a,b){return a-b;});排序原理:是根据return值的正负数,决定a和b谁排序靠前。<script> var data=[ {name:'A三',url:"http://www.baidu.com...原创 2019-06-25 13:49:12 · 879 阅读 · 0 评论 -
开源的插件实现五星评级的各种效果
背景近期项目需要实现根据数值显示某个客户的星级,实现的方法有很多。可以通过比较笨的方法,显示不同个数的html标签,也可以通过js脚本实现动态显示,也可以通过纯css的方式实现。综合比较和很多方法,发现了一个插件不但可以满足我本次的需求,以后有其他星级的需求也可以满足。插件 jQuery Raty下载地址https://github.com/wbotelhos/raty演示地址htt...原创 2019-06-25 11:58:31 · 662 阅读 · 0 评论 -
Flex布局详解-小程序
一、背景学习小程序的时候,开始正式接触flex布局。但这种布局方式是一种较为普遍适用的方案。尤其对于前端布局来说,是不能跳过的一课。今天就研究一下flex 布局的基础概念,场景和语法。要做到可以在代码之前就可以预想结果才能在实战中应用。二、 flex概念-可伸缩盒子Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。在HTML5中div标签...原创 2019-05-30 11:27:13 · 684 阅读 · 0 评论 -
checkbox的value和checked属性详解
一 、checked属性checked属性代表的是当前checkbox是否被选中,如果选中返回true,未选中返回false。和value值无关。<p><input type="checkbox" name="vehicle" checked/> I have a car</p>document.getElementById("checkbox1").c..原创 2019-02-27 18:52:25 · 73842 阅读 · 4 评论