自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(17)
  • 收藏
  • 关注

原创 实现一个响应式的瀑布流组件

在图片网站中,通常是使用瀑布流的方式来显示图片,等宽度不等高,这样显得错落有致今天 使用Vue3实现一个瀑布流组件,并发布为一个npm包grid参考自。

2023-09-24 08:17:05 147

原创 作用域、作用域链、执行上下文 --- 有你不知道的吗

1、执行上下文执行上下文是js执行一段代码时的运行环境,是编译后生成的比如当调用一个函数时,就会创建一个该函数的执行上下文;当执行全局代码时,就会编译生成全局执行上下文执行上下文包括 变量环境 和 词法环境用var声明的变量会存储在变量环境用let、const声明的变量会存储在词法环境(全局上下文特殊)执行上下文可以分为 全局执行上下文 和 函数执行上下文(也称为局部执行上下文),还有一种eval我们暂不讨论全局执行上下文全局执行上下文是最外层的上下文,它的下一级可以是函数执行上下文全局

2021-04-09 23:13:43 130

原创 js说:这就是对象

在js中,对象究竟是个什么东西,这一章我们一起来学习1、什么是对象对象就是一个具体的事物明星不是对象,但是林俊杰是,周杰伦是,汪苏泷也是食物不是对象,但是北京烤鸭是,佛跳墙是,红烧狮子头也是在js中,对象是一组无序的相关属性和方法的集合,所有事物都是对象,如数值(Number)、字符串(String)、数组(Array)、函数(Function)等对象(Object)是复杂数据结构对象由属性和方法组成:属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中.

2021-04-06 11:03:44 147

原创 js说:这就是函数

7、函数函数实际上是对象,每一个函数都是Function类型的实例,而函数名就是指向函数对象的指针简单地说,函数就是对象,它封装了一段可被重复调用执行的代码块,我们通过调用函数就可以实现大量代码的重复使用7.1 定义函数定义函数总共有四种方式:函数声明函数表达式箭头函数(ES6)Function构造函数1、函数声明函数声明式我们最常用的定义函数的方法function foo() { console.log("Hello world!")}2、函数表达式函数表达式几乎和.

2021-04-06 11:01:52 151

原创 一脚踹开 this 的大门

1、this是什么在js中,有一套神奇的this机制我们先来看一个例子:var person = { namer: '张三', sayNmae: function() { console.log(namer); }}var namer = '李四'person.sayNmae(); // 李四我的天呐,怎么跟我们想的不一样?这是因为sayNmae方法中的变量是属于全局作用域下面的,但是我们想要访问的是对象里面的变量使用this便可以帮我们访问.

2021-04-06 10:58:22 150

原创 js之数组

6、数组前面我们讨论了简单数据类型,现在开始讨论复杂数据类型,就拿数组先来开刀吧数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素,包括数字、字符串、对象等等。数组是一种将一组数据存储在单个变量名下的优雅方式,本质上也是一种内置对象基于数组的特性,其在内存中的存储是连续存储的。就是说在内存中必须是由连续的空间来存储这些数组元素的6.1 创建数组js中数组有两种创建方式:利用new创建数组利用数组字面量创建数组**1、new**创建数组// 创建一个.

2021-03-24 19:19:36 202

原创 js之流程控制

5、流程控制流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构,分别是 顺序结构、分支结构 和 循环结构 ,这三种结构代表三种代码的执行顺序5.1 顺序结构顺序结构是程序中最简单、最基本的流程控制,他没有特定的语法结构,程序会按照代码的先后顺序,依次执行5.2 分支流程控制从上到下执行代码的过程中部,根据不同的条件,执行不同路径的代码,从而得到不同的结果1、if语句if、if else 、if else if 语句语法结构// 条件成立(true)执行代码,.

2021-03-24 19:18:07 101

原创 js之运算符

4、运算符运算符也被称为操作符,用于实现赋值、比较和执行算数运算等功能的符号js中常用的运算符有:算术运算符递增和递减运算符比较运算符逻辑运算符赋值运算符4.1 算术运算符算术运算符用于执行两个变量或值的算术运算常见的有我们熟悉的:+(加)、-(减)、*(乘)、/(除),还有个取余 %4.2 浮点数精度的问题浮点数的最高精度是17位小数,所以在进行算术计算时,其精度远远不如整数所以,有一个很经典的题目:0.1 + 0.2 为什么不等于 0.3因为js引擎执行代码的时候,需.

2021-03-24 19:15:23 208

原创 js之变量和数据类型

在正式介绍js之前,我们先来了解一下编译型语言和解释型语言首先,计算机是不能直接读取我们的编程语言的,需要先通过翻译器将编程语言解析成二进制的机器语言翻译器翻译的形式有两种:一种是编译,一种是解析。两种方式之间的区别在于 翻译的时间不同编译器:在代码执行之前,先通过编译器的编译,生成计算能读懂的二进制文件,之后每次运行该程序时,直接运行该二进制文件,而不需要再次重新编译解析器:在代码执行时解析,并立即执行,属于边解析边执行像C/C++ 、Java 、Go 都属于编译型语言,python、.

2021-03-23 20:03:22 508

原创 杂说CSS

1、CSS初始化为什么初始化CSS呢?因为浏览器的兼容问题,不同浏览器对标签的默认值是不同的,如果没有初始化CSS,往往会导致页面在不同浏览器页面在不同浏览器之间出现差异并且,多数浏览器会默认给初始页面添加上外边距简单的初始化页面* { padding: 0; margin: 0; box-sizing: border-box;}2、display 都有哪些值?block、inline、inline-block、list-item、table 、 inherit 和 nonebl

2021-03-23 19:59:25 136

原创 CSS3(二)

6、2D转换转换也是CSS3的特性之一,可以实现元素的位移translate、旋转rotate、缩放scale等效果所谓2D转换是指二维平面内进行转换6.1 移动transform:translate(x, y); /* 或者分开写 */transform:translateX(n);transform:translateY(n);注意:translate 不会影响到其它元素的位置,不脱标,但是会覆盖其它元素,类似相对定位translate 百分比单位是相对自身的 transla

2021-03-23 19:58:35 157

原创 CSS3(一)

CSS3 就是最新的CSS标准,在原有的CSS基础上,新增了一些特性只要新增了三种选择器:属性选择器、结构伪类选择器、伪元素选择器,2D、3D转换、动画、盒子模型、过渡等1、属性选择器属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助类选择器 或 id选择器 了就是我们可以自己给标签定义的属性、属性值,不要依靠类选择器和id选择器了2、结构伪类选择器注意:nth-child 对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配nth-.

2021-03-23 19:55:15 73

原创 CSS基础(三)

11、界面样式常见的界面样式:更改用户的鼠标样式表单轮廓防止表单域的拖拽解决图片或表单问题溢出操作11.1 鼠标样式 cursorli { /* 小手样式 */ cursor: pointer;}设置在对象上移动时的鼠标样式:default:小白(默认)pointer:小手``move:`:移动text:文本not-allowed:禁止11.2 轮廓线 outline给表单添加 outline:0 或 outline:onne 样式后,就可以去掉默认的蓝

2021-03-22 19:42:49 380

原创 CSS基础(二)

8、背景和阴影8.1 背景1、背景颜色background-color:颜色值;默认值是 transparent2、背景图片background-image: url('...');3、背景平铺当图片面积小于盒子的时候,图片就会自我复制,然后平铺整个盒子,我们可以利用 background-repeat 来设置是否平铺background-repeat: repeat | no-repeat | repeat-x | repeat-yrepeat:平铺,默认值no-rep

2021-03-22 19:42:09 124

原创 复盘之html5

HTML5是最新的HTML标准,是万维网联盟(W3C)和网络超文文本应用工作组(WHATWG)合作输出的。目前高版本浏览器已经可用了,但是低版本浏览器未支持HTML5 的文档类型是 <! doctype html>1、新增的语义化标签<header>:页眉,即为头部标签<nac>:导航栏标签<article>:内容标签<section>:定义文档某个区域<aside>:侧边栏标签<footer>:页脚.

2021-03-22 18:42:35 78

原创 CSS基础(一)

1、CSS 是什么即层叠样式表,HTML负责结构,而CSS则美化HTML,添加各种样式如:宽高间隔、大小颜色、动画及其他装饰效果2、引入方式引入方式共有三种:行内样式:写在标签元素里面,以 style="" 形式,优先级最高(不推荐,显得太过于复杂)内联样式:写在 <style></style> 这对标签中,样式少的话直接写在这里外联样式:写在.css文件中,然后用 <link src=""> 引入样式(推荐,不过还有@import)link 与 @.

2021-03-22 18:38:58 163

原创 复盘之html

html 即 超文本标记语言,其中,超文本是指连接单个网站内或多个网站间的网页的链接切记:html 不是编程语言,它只是一种标记语言1、基本的结构标签html 中的基本结构标签是指 页面中的最基本的标签,也称为骨架标签,包括 <html>、<head>、<title>、<body>其关系为:<html> <head> <title> 骨架结构 </title> </head>.

2021-03-21 17:22:23 116

空空如也

空空如也

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

TA关注的人

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