- 博客(19)
- 收藏
- 关注
原创 重排与重绘
重排与重绘什么是重排其他触发重排的操作什么是重绘什么是重排当我们的操作引发了DOM的几何变化,比如修改某个元素的宽高,显示隐藏属性等,在浏览器中,因为这个DOM元素发生变化而影响到其他元素,浏览器需要重新计算元素的几何属性,然后将计算的结果绘制出来,这个过程就是重排(也叫回流)。重排,多数情况下是由于元素几何属性变化引起的。当发生重排时,浏览器的工作过程如下其他触发重排的操作1.改变DOM结构,比如说节点的移动、增删等。2.获取特定的属性值,如offsetTop、offsetLeft、
2021-10-11 15:15:34 193
原创 canvas与svg的区别
canvas与svg的区别CanvasSVGcanvas和svg都允许在浏览器中创建图形,但他们在根本上是不同的Canvas1. canvas通过javascript来绘制2D图形。2. canvas是逐个像素进行渲染。3. 在canvas中,图形绘制完成后,它就不会继续得到浏览器的关注。如果位置、大小等发生变化,那么整个canvas场景也需要重新绘制,根据变化不同,会产生一定程度的重排或重绘。4. canvas绘制的图片依赖分辨率,能够以.png .jpg格式保存存储图像5. canvas不
2021-10-11 14:43:39 545
原创 node.js获取计算机本地ip
关于获取本地ip前段时间因为一个功能,要获取电脑的本地ip做为唯一标识,在论坛上搜了很多关于JS如何获取本地电脑ip的文章,但是所有例子试完,都不能成功获取。最后跟同事商定,通过后台接口的方式把当前电脑ip返给我。在这个过程中,通过使用node.js在本地开发时成功获取到了电脑本地IP,记录如下,仅供参考:前端项目在启动时,会启一个本地node服务,在这个过程中可以通过node.js获取到本地IP,来供开发使用。os.networkInterfaces() 方法是os模块的内置应用程序编程接口,用
2021-09-29 14:06:55 2751
原创 webpack打包改变index.html路径
改变打包后输出路径情景说明node.js简介功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入情景说明同一个webpack或是v-cli搭建的脚手架可以通过pages,支持多个项目代码。并通过在config.js中配置pages输
2021-09-13 16:13:46 843
原创 js光线汇聚 css漂流球 信息流汇聚
接锅的一个优化项目,有一张背景图产品经理觉得太丑太呆想要让他动起来。原图如下观之,确实有点呆板。那怎么动起来呢?除了做gif图就只能是靠强大的css和js了。下面是成品(自制的gif有点渣,关键看效果哈)css漂流球transform是css3最具颠覆性的特征之一,可以实现元素的位移translate、旋转rotate、变形skew、缩放scale。知道了这个那么漂流球就好做多了,只需要定义一下球的运动轨迹@keyframes ball-move { 0% {transform:trans
2021-04-27 11:08:45 525
原创 canvas流星雨 数据流
canvas数据直线流动最近做平台优化的时候,有两个涉及到了canvas的需求,初有成效,在此分享下。先看需求效果(如下图 ps:用手机视频做的动图请忽略粗糙的观感)大概的意思是背景图中的城市空中有很多的数据衔接,之前就是单纯的一张效果背景图,现在产品让优化下,添加些动态效果,于是乎就想到了用canvas首先声明以下所需要的变量const numberLine = 56;//光线数量const tail = 400; //光线长度const canvas = document.querySele
2021-03-24 15:24:26 455
原创 自定义穿梭框 vue穿梭框
基于vue和elementUI的穿梭框elementUI中提供了很强大的穿梭框组件,但是在具体的项目或是业务中,还会有一些特殊的需求没有办法满足。所以抽空做了这个穿梭框组件,供我们当前所迭代的产品使用,目前时初步试用,会再根据试用过程中做的优化再度更新。现在发出来是希望如果有遇到同样开发需求的童鞋,可以一起来完善这个组件。安装 npm install transfer-table代码仓链接 link.简介:标签使用 <transfer :titles="['热门排行
2021-03-21 18:38:46 1912 2
原创 vue中watch的使用探索
vue中watch的使用探索在项目中,经常有需要根据一个值的变化,来相应的更新另一个值的状态。vue给我们提供了一个很好用的watch方法,可以方便监控,watch并不完美,需要具体了解一下。new Vue({ el:"#root", data:{ name:"Jedi", message:{ age:25, job:"doctor", }, phoneList:['xiaomi','huawei','oppo'], }, watch:{ name(newValu
2021-03-04 14:40:31 182
原创 svg css实现霓虹灯
svg css文字霓虹灯事情是酱紫的,因为两会马上来了,公司产品要搞免费试用活动。首页要求醒目抓眼,UI小姐姐废了九牛九虎之力让产品同意了一版霓虹灯效果图,要在首页中的部分文字大量使用霓虹效果。UI小姐姐给了gif图,但是测试中有拉伸和各种分别率问题,效果并不好,于是就有了这篇文章,用我们的大CSS来完成这个任务。首先,要知道svg中有个重要的属性–stroke,翻译过来意为“描边”,这就是能完成霓虹效果的最重要角色。stroke有以下几种属性设置:stroke-width //描边粗细stroke
2021-03-03 16:32:08 402 1
原创 生成字母+数字的验证码
项目里的一个登录页,要求注册的时候要有验证程序,公司不愿花钱做手机短信验证,后台兄弟忙的不可开交,于是只能前端来实现一个简单的验证逻辑。<span id="code" title="看不清,换一张"></span>let code;document.getElementById("code").onclick = changeNumber(5);//传入一个参数 作为生成几位验证码的设置function changeNumber(num){ var arrays=[
2020-09-21 15:37:00 429
原创 vue-router手写、 vue-router原理
vue路由有三种模式:hash history和abstract:hash:使用URL hash值作路由,支持所有浏览器history:需要HTML5 History API和服务器配置结合。对浏览器版本有要求,不支持低版本abstract:支持所有js运行环境。如果当前环境没有浏览器API,路由会自动进入这个模式我们在vue项目中,是怎么使用vue-router的呢?首先,要从npm install vue-router -g 在系统中安装router插件,然后新建router文件在文件中通过
2020-09-21 15:16:02 112
原创 vue数据绑定修改
承接上一篇文章,用一个简单的方式实现了使用proxy修改和读取数据,那么数据相应应该怎么做呢?下面来简单实现一下(简版)<div id="app"> {{name}} <div>{{message}}</div> <input v-model="message"></div><script> new vue({ el:"#app", data:{ name:"七七", message:"爱吃小鱼干、鸡
2020-09-20 19:13:42 901
原创 简版proxy数据监测,双向绑定
本文通过简单代码,实验一下通过proxy实现的双向数据绑定。var data={ name:"七七", age:2};//proxy要传入两个参数,第一个是需要检测的数据对象,第二个是一个函数集合的对象let pro =new Proxy(data,{ //targrt 需要修改的目标 prop是需要修改的属性 newValue为新修改的值; Reflect是js的一个内置对象,Reflext.set是将值分配给属性的函数。 set(target,prop,newValue){ re
2020-09-20 17:40:50 332
原创 js如何最有效的判断图片类型
在做图片上传功能的时候,虽然大多数业务情况下都是支持所有图片格式。但是也会遇到一些规定图片格式的情况,尤其是在为了防止又恶意文件的情况下,因为每个图片都是二进制流,所以判断图片应该按头信息判断。相同格式的图片,有着相同的制式。png是前八个jgp是前两个和后两个gif是前六个判断是否为png图片async is_png(file){ const ret = await(this.blobToStrng(file.slice(0,8))) const png= ret = '89 50 4E 0
2020-09-14 11:15:37 3301 2
原创 IE11中img标签不显示图片
IE11中img标签不显示图片在做一个页面的时候img标签中直接采用路径方式引用本地图片,在chrome中显示完好,然而在ie浏览器中出现显示不全的问题如下图:在做一个页面的时候img标签中直接采用路径方式引用本地图片,在chrome中显示完好,然而在ie浏览器中出现显示不全的问题如下图:多番调试之后发现是因为使用flex布局的原因,当注释掉flex,马上正常显示究其原因是因为flex布局下 img标签中的图片出现了变形。可以通过给img设置flex-shrink: 0解决此外,还可以用div
2020-09-14 10:18:30 1605
原创 vue 点击滚动到页面顶部
<div class="footer"> <div class="container" v-show="gotop" @click="goUp">Up</div></div>````css.footer .container{ text-align: center; position: fixed; right: 50p...
2019-10-23 15:33:18 2013
原创 grid常用设置
父元素1.dispaly: grid | inline-grid | subgrid;grid: 生成块级网格inline-grid: 生成行内网格subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小2.grid-template-columns 行大小grid-template-rows 列大小3.单元格间距grid-column-...
2019-09-18 16:47:05 2431
原创 JS常用数据处理方法总结
JS常用数据处理方法总结1、树形数据转换后台返回到前台所有的数据时,根据需求,通过parentId,数据ID将数据转换为树形数据进行渲染。/* * 树形数据转换 * @param {*} data * @param {*} id * @param {*} pid */export function treeDataTranslate(data, id = 'id', pid = ...
2019-09-18 16:44:35 614
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人