自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

用CSS3动画实现loading效果

适合刚入门的同学

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

原创 gitub分支管理:从master上新建开发分支

在日常工作中,需要在gitub上新建自己的开发分支进行代码编写,不能直接在master/直接对接发布版本的分支上进行开发。在自己的分支上开发完毕,经由他人审核后再合并到目标分支。新建分支git branch 新分支名切换到新分支git checkout 新分支名拉取远程目标分支的代码(此处假设从master上拉取代码)git pull origin master将本地新建分支推送至远程分支git push origin 新分支名本地分支与远程分支相关联git branch --s

2021-10-26 10:50:02 1283 1

原创 JavaScript实现优先队列的两种方法

优先队列中元素的添加和移除是基于优先级的,从优先队列中删除元素时,需要考虑优先权的限制。优先队列具有最高级先出(First In Largest Out)的行为特征。实现方法:1、按照优先级入队:// 封装需要入队的元素function queueElement(value,priority){ this.value = value; this.priority = priority;}// 封装优先队列function priorityQueue(){ // 声明队列.

2020-12-30 15:07:11 315

原创 面试:每发送一个http请求就要建立一个tcp连接吗(非持久连接/持久连接)

非持久连接:HTTP/1.0 中 的首部字段Connection 默认值为 close,即每次请求都会重新建立和断开 TCP 连接.持久连接:HTTP/1.1 中 的首部字段Connection 默认值为 keep-alive ,连接可以复用,只要发送端、接收端都没有提出断开连接,则保持tcp连接状态。http1.1中,所有的连接默认为持久连接,但在http1.0中并未标准化,即使有部分的服务器通过非标准化的手段实现了持久连接,但是服务器端不一定支持持久连接持久连接的优点:减少了tcp连接的重复建.

2020-12-26 17:03:29 2330 1

原创 前端面试----箭头函数的特点

箭头函数没有prototype(原型),所以箭头函数本身没有this箭头函数的this在定义的时候继承自外层第一个普通函数的this。如果箭头函数外层没有普通函数,严格模式和非严格模式下它的this都会指向window(全局对象)箭头函数本身的this指向不能改变(call,apply无效),但可以修改它要继承的对象的this使用new调用箭头函数会报错,因为箭头函数没有constructor箭头函数不支持new.target箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名不可以当作.

2020-10-22 13:31:45 1079

原创 前端面试---闭包的概念,优缺点,为什么要用闭包

定义闭包:当一个函数的返回值是另外一个函数,而内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。且内部函数在外部被执行,就产生了闭包。说白了就是一个环境,能够读取其他函数内部的变量。优点让外部访问函数内部变量成为可能;局部变量会常驻在内存中;可以避免使用全局变量,防止全局变量污染;缺点常驻内存,会增大内存的使用量,使用不当会造成内存泄露==闭包内存泄漏为: key = value,key 被删除了 value 常驻内存中; ==解决方法

2020-10-22 13:16:47 451

原创 vueX的属性和实现非父子组件的传值

vuex的属性state:管理项目中的数据,所有共享的数据都要统一放在state中进行存储const store = new Vuex.store({ state: { count: 0; }})访问state中数据的方式:1、 this.$store.state.count2、首先从vuex中导入mapState函数,通过mapState函数将当前组件所需的全局数据映射到computed计算属性import {mapState} from 'vuex';computed: { .

2020-10-19 18:30:34 108

原创 八、Vue基础笔记

目录一、数据绑定1、语法1.1插值1.2表达式2、分隔符指令内部指令一、数据绑定1、语法1.1插值数据绑定最常见的形式就是使用 {{…}}(双大括号)的文本插值<p>{{ message }}</p>有时候只需渲染一次数据, 后续数据变化不再关心,可以通过== * ==实现,代码示例如下:<span>Text: {{*text}} </span>双大括号标签会把里面的值全部当作字符串来处理,如果值是HTML片段,则可以使用三个大括号来绑定

2020-10-18 17:57:32 118

原创 前端面试-----遍历数组的方法

let arr = [1,2,3,4,5];for循环for(int i = 0; i < arr.length; i++) { //对数组执行相关操作 console.log(arr[i]);} for……infor(let k in arr){ console.log(arr[k]);}for……infor……offor(let item of arr){ console.log(item);}foreach方法arr.forEach(f

2020-10-18 16:07:16 362

原创 在flex布局中,子元素超过容器宽高时,子元素被压缩的解决办法

问题描述:当弹性盒子的宽度为500px,子元素的宽度之和超出了弹性盒子的宽度时,会发生什么?<style> .parent{ width: 500px; height: 200px; background: red; display: flex; padding:100px 100px; } .sub{ background: green; width: 400px;

2020-10-14 16:23:05 2725

原创 typeof null为什么返回Object?

在第一版的JavaScript中,数值是以二进制的形式存储的,且数值是有标识为和数值组成的,共有五种标志位:000: 对象; 1:整型; 010:双精度; 100:字符串; 110布尔;而null的二进制表示全部为0,因此当typeof检查标志位时,会将null判断为Object...

2020-10-10 15:36:04 70

原创 前端面试知识点(五)--- BFC的创建和作用

如何创建BFC1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex4、overflow的值不是visibleBFC的作用1.利用BFC避免margin重叠。一起来看一个例子:<style> *{ margin: 0; padding: 0; } p {

2020-10-09 16:31:16 153

原创 前端面试知识点(四)--- 清除浮动的常用方法

为什么要清除浮动?清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0(高度塌陷)的问题如下所示:<div class="father"> <div class="son" style=" width: 300px; background: pink;">111</div> <div class="son" style="width: 200px; background: wheat;">222</div>&lt

2020-10-08 20:36:57 166

原创 面试知识点(三)--- const关键字能否修改对象属性

能const obj = { name: 'bx', age: 12}obj.age = 22;console.log(obj);obj的age属性被改变了const obj = { name: 'bx', age: 12}obj = { name: 'jyw', age: 22}console.log(obj);产生报错原因:对象是引用类型,obj中保存的仅是对象的指针,这就意味着,const仅保证指针不发生改变,修改对象的属性不会改变对象的指针,

2020-09-28 15:21:03 475

原创 面试知识点(二)--- canvas标签的基本使用

使用步骤在html中使用canvas标签<canvas id="myCanvas"></canvas>在js中获取canvas标签var myCanvas = document.getElementById('myCanvas');在js中创建context对象var ctx = myCanvas.getContext('2d');canvas常用的属性和方法绘制一条线ctx.beginPath();//开始一条路径ctx.strokeStyle =

2020-09-28 11:42:47 189

原创 前端面试知识点(一)------行内元素、行内块元素以及块级元素的区别

行内元素:常见的行内元素有:span、a、i、br特点:(1)设置width、height、margin-top、margin-bottom无效(2)不会独占一行,相邻的行内元素默认在一行显示,直到一行放不下才会换行(3)行内元素中只能包裹行内元素块级元素常见的块级元素有:div、p、ul、li、form、table、h1~h6特点:(1)设置width、height,且margin和padding水平垂直方向均有效,默认宽度与父元素一致(2)独占一行,相邻的块级元素默认在垂直方向

2020-09-28 10:48:09 187

原创 JavaScript函数中arguments、callee、caller的使用

函数的参数函数显式参数在函数定义时列出。函数隐式参数在函数调用时传递给函数真正的值。举个例子:<script type="text/javascript"> function test(name,age){ console.log(name+'今年'+age+'岁了!'); } test('小明',18);</script>其中name、age是函数的显示参数。什么是arguments?当我们使用console.log(arguments);在控制台中

2020-07-31 17:17:54 274

原创 JavaScript函数中event参数的使用-----function(event){}

定义:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用,函数不会在事件发生前被执行!看例子:现有ul以及多个li元素,通过事件委托,给ul绑定点击事件,当我们点击某个li元素时,输出所点击li元素的相关信息。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title..

2020-07-30 23:23:22 7461 2

原创 HTTP与HTTPS面试题

HTTP概念:HTTP是从服务器端向客户端传输超文本的传输协议,它使浏览器更加高效。HTTP是一个无状态协议,同一个客户端发送的这一次的请求和上一次的请求毫无关联,HTTP服务器不会保存客户的任何信息。请求报文的格式:请求行,首部行,空行,实体体响应报文的格式:状态行,首部行,空行,实体体常见的请求头: Accept:浏览器可接受的响应内容类型。 Accept - Charset:浏览器可接受的字符集。 Accept - Encoding:浏览器可接受的响应内容的编码方式,比如gzip.

2020-07-15 22:27:00 931

原创 数据结构与算法(经典排序)----计数排序

基本思想:1、首先遍历待排序数组a,找出待排序数组的最大最小值2、遍历a数组,将其值放在book数组的下标中,并使用book数组计数3、累加book数组,计算出前缀和4、反向遍历数组a,以保证稳定性,并将排好序的值放在b数组中代码:# include <iostream># include <algorithm># include <ctime># include <cstdlib># include <numeric>.

2020-07-01 09:40:43 2291

原创 数据结构与算法(经典排序)----希尔排序、桶排序

基本思想:1、选择一个增量序列 t1,t2,……,tk,其中 ti > tj, tk = 1;2、按增量序列个数 k,对序列进行 k 趟排序;3、每趟排序,根据对应的增量 ti,将待排序列分割成若干长度为 m 的子序列,分别对各子表进行直接插入排序。仅增量因子为 1 时,整个序列作为一个表来处理,表长度即为整个序列的长度。代码:#include <stdio.h>#include <time.h>#include <stdlib.h>#includ.

2020-06-27 11:53:14 111

原创 数据结构与算法(经典排序)----堆排序

基本思想:1、创建一个堆 H[0……n-1];2、把堆首(最大值)和堆尾互换;3、把堆的尺寸缩小 1,并调用 shift_down(0),目的是把新的数组顶端数据调整到相应位置;4、重复步骤 2,直到堆的尺寸为 1。代码:#include <stdio.h>#include <stdlib.h>#include <time.h>#include <iostream>using namespace std;int a[100],n;.

2020-06-17 11:47:09 115

原创 数据结构与算法(经典排序)----归并排序(递归与非递归版本)

基本思想:1、将待排序序列通过递归方法分为两半,直至每个区域只有一个元素2、申请空间,使其大小等于待排序序列的大小,该空间用来存放合并且排序后的序列;3、设定两个哨兵位置,分别为两个已经排序序列的起始位置;4、比较两个哨兵所指向的元素,选择相对小的元素放入到合并空间,并移动哨兵到下一位置;5、重复步骤 3 直到某一哨兵达到序列尾;6、将另一序列剩下的所有元素直接复制到合并序列尾。代码:#include <stdio.h>#include <stdlib.h>.

2020-06-15 22:22:58 89

原创 数据结构与算法(经典排序)----插入、选择、冒泡排序

插入排序基本思想:1、将第一待排序序列第一个元素看做一个有序序列,把第二个元素到最后一个元素当成是未排序序列。2、从头到尾依次扫描未排序序列,将扫描到的每个元素插入有序序列的适当位置。(如果待插入的元素与有序序列中的某个元素相等,则将待插入元素插入到相等元素的后面。)代码:#include <stdio.h>#include <time.h>#include <stdlib.h> int a[101],n;void insert_sort(int

2020-06-15 22:12:23 93

原创 六、JSON和JSONP基础笔记

目录什么是 JSON ?为什么使用 JSON?JSON 语法JSON与 XMLJSON 对象JSON数组什么是 JSON ?JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)JSON 是轻量级的文本数据交换格式JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JS

2020-06-13 19:57:16 176

原创 五、jquery基础笔记

目录什么是 jQuery ?jQuery 安装jQuery 使用版本jQuery 语法文档就绪事件jQuery 选择器常用的 jQuery 事件方法jQuery 效果1.显示隐藏效果2.淡入淡出效果3.滑动效果4.动画效果5.停止动画链(Chaining)获取内容和属性操作元素1.添加元素2.删除元素获取/设置CSScss() 方法尺寸遍历1.遍历祖先元素2.遍历子孙元素3.遍历兄弟元素4.遍历中的过滤方法jQuery AJAX什么是 jQuery ?jQuery是一个JavaScript函数库。j

2020-06-10 22:08:14 119

原创 数据结构与算法(经典排序)-----快速排序及其优化

基本思想:确定基准数从最右边的数开始遍历,找到第一个比基准数小的值再从最左边开始遍历,找到第一个比基准数大的值将找到的这两个数的位置进行交换继续遍历左右两边的数,直至左右两边遍历到同一个位置将基准数与这个位置上的数进行交换再重复以上步骤,处理左右两边的数字最后得到一串由小到大排列的数字代码:#include <stdio.h>#include <time.h>#include <stdlib.h> int a[101],n;void qui

2020-06-09 22:56:12 142

原创 四、CSS3的新增属性

CSS3 边框border-radius 属性被用于创建圆角:语法border-radius: 1-4 length|% / 1-4 length|%;使用规则:1、四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。2、三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角3、两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角4、一个值: 四个圆角值相同创建椭圆边角:#rcorners7 { border-radi

2020-06-06 23:29:52 223

原创 三、CSS基础部分

CSS背景background-color背景颜色CSS中,颜色值通常以下列方式定义:十六进制 - 如:"#ff0000"RGB - 如:“rgb(255,0,0)”颜色名称 - 如:“red”background-image背景图像默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.body { background-image:url('paper.gif');}background-repeat设置背景图的平铺方式一些图像如果在水平方向与垂直方向平铺,这样看起来很

2020-06-04 22:00:51 312

原创 二、HTML5新增标签和被移除标签

新增标签canvas标签canvas元素本身并没有绘制能力,它只是一个图形容器,必须通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像),canvas元素中的任何文本将会被显示在不支持canvas的浏览器中。例子:通过 元素来显示一个红色的矩形:<canvas id="myCanvas"></canvas><script type="text/javascript"> var canvas=document.getElementByI

2020-06-02 12:24:18 518

转载 frame、iframe、frameset的区别

iframe 是在html页面内嵌入框架 框架内可以连接另一个页面,如<html> <head></head> <body> <iframe src=“xxx.html”></iframe> </body></html>frameset 在一个页面中设置一个或多个框架 不能嵌...

2020-06-01 19:43:13 363

转载 1、HTML部分

 目录web前端简介什么是HTML?HTML标签HTML基本结构HTML 段落标签HTML 换行标签HTML标题HTML 水平线HTML注释HTML 标签HTML 列表标签HTML表格HTML超链接HTML 图片HTML表单表单元素-文本、密码框表单元素-多...

2020-06-01 19:04:44 161

原创 第六次:前端第六次面试

1. 请你谈一下transition和animation的区别Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧,从from … to,而animation可以一帧一帧的。2. 请你简要介绍...

2020-04-10 09:08:52 191

原创 前端:第五次牛客AI面试

1. 请用一句话概括RESTFUL就是用URL定位资源,用HTTP描述操作2. 讲一下你对get和post请求在缓存方面的区别的理解get一般做的是类似查找的工作,可以使用缓存。 post做的一般是修改和删除数据的工作,所以必须与数据库交互,所以不能使用缓存。 相比较而言get请求适合于请求缓存。3. LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本...

2020-04-08 09:31:40 253

原创 3.JS中的变量

JavaScript中的变量包含两种不同数据类型的值:基本类型值、引用类型值,下面来讲解他们的不同:基本类型值只是简单地数据段,无法添加属性、方法;引用类型值是由多个值构成的对象,我们可以为其添加属性和方法,也可对其进行改变或删除操作;复制基本类型值时,系统会自动为新值分配新的内存空间,旧变量与新变量互不印象,拥有各自独立的内存空间;复制引用类型值时,系统会使用指针将新变量指向旧...

2020-04-05 10:51:12 94

原创 笔记:JavaScript的数据类型

5种简单数据类型(基本数据类型):Undefined、Null、 Boolean、 Numeber、String一种复杂数据类型:Object详细介绍:Undefined只存在一个值,即特殊的undefined,在使用var声明变量但并未初始化时,此时的变量值就是undefined。var name;alert(typeof name);//undefinedtypeof操...

2019-10-22 20:42:52 90

原创 JS-animation 动画原理:匀速and碰撞检测

// An highlighted blockvar foo = 'bar';<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin...

2019-08-14 16:56:52 490

原创 JavaScript基础:秒表

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .A { width: 150px; height: 200px; border: solid...

2019-08-08 10:50:21 193

原创 简单的网页制作

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .A { height:...

2019-07-21 12:22:56 316

原创 CSS3实现垂直手风琴

源代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .A { w...

2019-07-18 21:51:56 281

原创 用css3动画实现loading效果

源代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { ...

2019-07-18 11:11:30 81

空空如也

空空如也

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

TA关注的人

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