自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

FateInTheSky的博客

人菜瘾大的王者荣耀爱好者,专注于前端开发,技术虽菜但热情不减!

  • 博客(28)
  • 收藏
  • 关注

原创 圆角边框按钮渐变文字与渐变边框

<button class="btn-yellow"> <span class="btn-text"> 一键重启</span> </button>scss样式 //button按钮样式 .btn-yellow{ border: solid 2px transparent; border-radius: 10px; color:#F.

2021-03-19 20:14:05 179

原创 gojs青铜段位

1、效果图html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./go.js"&g

2020-11-30 18:02:54 183

原创 vue开发从青铜到黄金的路上

功能需求描述本人最近开发一个项目,需求是这样:1、首页需要一屏展示内容,即每次滚动鼠标的时候页面就划过整个页面(可视区内),其他子页面不需要,依旧是鼠标滚动多少就滚到哪里。2、首页需要进行页面缓存,意思就是从子页面回到首页的时候,首页保持当前的滚动位置不变。3、页面顶部的导航栏发生滚动后导航从透明变成半透明(我这里是变黑色,因为我们的网站主题色是黑色的)刚页面加载进入的时候导航栏是透明的,因为页面有背景图。难点1、首页需要一屏展示内容的功能就相当于要计算屏幕可视区的高度,还要考虑页面的适配问题,

2020-09-02 14:56:46 176

原创 web开发过程遇到的关于动态更新图片处理方案

标题动态展示图片需求需求是要求页面动态展示图片,但是后端(服务端)给的地址是相同的,后端人员是将图片放在同一个路径下,每次用新的图片覆盖前一张图片,但是问题来了,img的src是同一个,浏览器就会默认使用缓存,不会重亲发送请求了,导致页面的图片并不会更新。解决方案1、让后端人员将地址添加随机数后再给你(如果他配合的话哈哈)2、使用地址带参形式:?+随机数(他不配合那就我们前端攻城师自己来呗)具体是(本人习惯使用vue的模版写的)<img :scr="imgUrl"></img

2020-08-31 15:48:03 387

原创 electron更换图标的run build后左上角图标不显示问题

在使用electron+vue开发一个桌面应用,打包过程遇到坑,替换窗口的左上角图标让我搞了一天,网上说的什么格式或者路径问题都没对,最后在我将要放弃胡乱尝试之后居然成功了。1、造成的原因因为一开始打包过程参考了网上的一些打包文件配置,在package.json文件里面胡乱配置了一些参数,关于图标的配置也设置了(如下图1),一开始我以为在这里配置的图标是关于打包后生成exe文件的图标,所以就没管,但是仅在这里配置一下状态栏跟窗口的左上角图标还是electron默认图标,然后本人就以更改状态栏图标跟窗体左

2020-07-01 10:09:44 3502 3

原创 Vue4关闭eslint的一些错误警告

使用vue-cli创建项目的时候默认选择了使用eslint,但是项目开发的过程有时候很烦,比如已经定义的变量不使用就报错,我有时候这些变量就是不需要的,在package.json文件中找到关于eslint的配置,然后添加不需要的规则,比如我不需要已定义的变量不使用的时候报错添加"no-unused-vars": "off",在...

2020-04-29 19:10:01 954

原创 vue页面跳转实现页面缓存

业务需求打野在A页面野区进行一波骚操作打了一只蓝爸爸,然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸,然后他又回到A野区,希望A野区还是只有一只蓝爸爸被打的状态,其他野没被偷第一步在路由里面设置需要缓存的页面第二步使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的第三步在需要缓存的页面设置导航钩子,在A野区离开时将...

2020-04-23 16:09:06 1709

原创 svg动画

svg的动画有四种不同形式展示,在svg中可以将以下元素作为动画的原材料将元素的数值属性作为动画(比如一个圆的坐标x,y、半径r)将变形属性作为动画将颜色作为动画按照路径运动1、animation每个svg元素需要多中动画只需要添加多个animation标签attributName动画的属性名称(元素的坐标、半径、宽高、填充颜色等属性)from初始to动画的结束dur动画...

2019-10-10 09:32:44 273

原创 事件

1、事件流,页面接收事件的顺序2、两类事件流:事件冒泡和事件捕获html事件处理程序,直接写在的html文件的标签上添加事件(缺点html和js耦合度高)DOM0级事件处理程序把一个函数赋值给一个事件(先获取dom结构,再给该元素添加事件处理程序(如div.onclick)DOM2级事件程序:定义了两个方法,用于处理指定和删除事件处理程序addEventListener()和remove...

2019-09-30 14:54:32 114

原创 vue的过滤器filter

<!-- 这里是html部分---><span > <!-- 这里{{}}开始是vue的过滤器,|符号代表过滤器的管道符号 ,formatDate为过滤函数,msg作为参数传入formatDate函数--> {{ msg| formatDate}}</span>过滤 器的定义语法是vue.filter(‘过滤器的名称’,function(...

2019-07-02 11:19:02 159

原创 props传递数据

1、父组件向子组件传递数据props父组件的template.

2019-03-21 19:05:50 734

原创 filter

filter(function,this):对数组的每一项运行给定的函数返回符合给定函数的数组项组成的数组,function和this可选这里的function有三个参数,可选,function(数组项item,项的位置index,数组本身arry)运用例子:比较两个数组不同,并返回你的目标是实现一个差分函数,该函数从一个列表中减去另一个列表并返回结果。它应该删除列表a中的所有值,这些值在...

2019-03-14 18:13:24 135

原创 sort进行二维数组的排序

2019-03-14 09:03:28 960

原创 flex弹性布局

1、display对于flex的取值有flex或者inline-flex; Webkit内核的浏览器,必须加上-webkit前缀,注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。flex默认有两条主轴,分别是水平和垂直方向2、flex-direction属性决定主轴的方向(即项目的排列方向:row(默认值):主轴为水平方向,起点在左端:...

2019-03-08 09:20:25 145

原创 原型prototype

定义:js里面的原型用来实现继承关系,原型是function对象的一个属性,他定义了构造函数制造出来的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。构造函数创建开始就有prototype.原型也是对象作用:1、提取公有属性2、查看原型:proto3、查看对象的构造函数constructor,儿子不知道父亲是谁就用该方法。可以手动更改Person.prototype=...

2018-10-15 23:45:04 218

原创 h5新增标签及废弃标签

h5新增25个标签,废弃16个元素,h5按照优先级将其分为结构属性,块级元素,行内语义、交互性元素四大类:1、结构性元素:section:用于区域章节描述header: 页面主体的头部ffoter:在页面的底部,通常会出现网站的相关信息nav:专门用于菜单导航article:用于表现一篇文章的主体内容。一般为文字集中显示的区域2、块级元素aside:用于表达注记、贴士、侧栏、摘要、...

2018-10-10 12:34:26 871

原创 正则表达式RegExp

1、两种创建对象:直接量 var reg=/abc/;var reg=new RegExp(reg,属性);2、三个属性(修饰符)i,m,gi忽略大小写g全局匹配m执行多行匹配4、方法:正则上有reg.test(),字符串的str.match()5、表达式[]代表一位,里面的值代表取值范围^非(|)括号加竖线代表或\w====[0-9A-z_]\W===[^\w]\...

2018-10-10 11:36:58 179

原创 float定位

当父级元素的子元素son1设置了float:left;子元素会变成行级标签,并且脱离父层,释放位置(不完全释放,会留下margin,son2的内容会围绕son1周围并且相距son1的margin)宽度变成padding+content当son1和son2都设置了float,并且给son2添加内容,son2不在围绕son1...

2018-09-29 14:49:56 450 2

原创 js零碎知识点:数据类型,typeof(),function,闭包,原型,

1、浏览器浏览器分为三大部分:shell,内核,其他模块内核分为:渲染引擎,js引擎渲染引擎负责:html,css,基础语法的识别,以及如何绘制js引擎负责z执行javascriptjs的特色:解释性语言,单线程2、数据类型数据类型分为:值类型,引用类型值类型:number,Boolean,String,undefine,null引用类型:Array,Object,functio...

2018-09-25 10:22:49 767

原创 DOM(document object model)

1.选择元素(标签)的方法1、document.getElementById(),通过id选择元素,又因为id仅可以标识唯一的元素所以选出来的元素是唯一的2、document.getElementsByTagName(),通过标签名选择元素,是一个伪数组3、document.getElementsByClassName(),通过类名选择。是一个伪数组4、document.getElemen...

2018-09-20 18:00:00 163

原创 实现点击按钮出现对应的内容(类似选项)

Document 1 2 3 111 222 333

2018-09-19 17:41:04 3494

原创 onkeydown函数应用

直接在js实现var div=document.createElement(‘div’);document.body.appendChild(div);div.style.width=“100px”;div.style.height=“100px”;div.style.backgroundColor=“red”;div.style.position=“absolute”;div.st...

2018-09-19 17:36:23 601

原创 定时器函数的应用setInterval()

setInterval(function(){},time)该函数表示每个time的时间就执行function(){}下列列子是在js里面实现一个div自动运动var div=document.createElement(‘div’); //创建一个divdocument.body.appendChild(div); //往body添加divdiv.style.width=“10...

2018-09-19 17:34:34 479

原创 js判断返回类型实现函数

原理:1、判断区分为值类型和引用类型 2、区分引用类型 function retype(date){ var obj = { &quot;[object Nunmber]&quot; : &quot;obj-number&quot;, &quot;[object String]&quot; : &quot;obj-string&quot;, &a

2018-09-17 18:05:13 1157

原创 学习数组的方法笔记

var a=[1,2,3,4,5];1.pushpush在数组的最后一位插入数据,并返回插入后的数组长度 var b=a.push(7);—&amp;amp;amp;amp;amp;amp;gt;62.poppop删除数组的最后一位并返回被删除的元素 var c=a.pop()—–&amp;amp;amp;amp;amp;amp;gt;73.shift删除数组的第一个元素,并返回被删除的元素 var d=a.shift()——&amp;amp

2018-09-17 17:20:24 300

原创 html学习笔记(浏览器+选择器+字体+标签分类)

**1.主流浏览器** 主流的浏览器主要根据是否有自主研发的内核定义的,主要的主流浏览器有Internet Explorer(IE),Google Chrome(谷歌),Mozilla Firefox(火狐)Safari,Opera。Trident是IE的内核,也就是国内双核浏览器的内核之一。Trident内核一直延续到IE11,IE11的后继者Edge采用了新内核EdgeHTM...

2018-09-17 17:20:14 329

原创 html学习笔记(img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点)

1、使用img产生间隔问题img属于行级块级元素(标签)其属性display的值为inline-block,因有inline元素,故有文字属性,如果换行使用多个img标签来显示图片的时候,因换行带来的空格(空格是文本的空格符)使得每个图片产生间隔,要消除间隔,则应该使得img标签之间没有换行或者空格2.body产生的marginbody标签本身具备有8px 的margin,故一般编写c...

2018-09-17 17:18:44 472

原创 新手学习HTML的position定位技术的学习笔记

position属性的取值有absolute,relative,fixed;static absolute:绝对定位,脱离原来的位置进行定位(可以说是重新建立在另外的一个层,与原来的层没关系,进行新的定位),当有父子关系的元素定位的时候absolute相对于最近的有父级元素进行定位,如果没有则相当于文档定位 relative:相对定位,在原来的位置进行定位(定位的时候也已经不在原来的层,已经重...

2018-09-07 10:01:09 318

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除