万能螺丝刀1-CSDN博客

原创 web前端 HTML CSS JavaScript Vue Http

HTML语义化、盒模型、浮动、样式优先级、CSS尺寸单位、BFC、Vue双向绑定原理、Vue-Router、Vuex...

2021-10-19 21:47:02 2764 2

原创 CSS 颜色代码大全 CSS颜色对照表

HTML及CSS常用颜色英文词汇黑色银色灰色白色茶色红色紫色紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0

2021-07-20 11:59:24 48953

原创 JS事件循环 - 宏任务微任务

微任务由js引擎发起, 比如promise，promise本身是同步的， .then .catch的回调函数是异步的。宏任务是由宿主（浏览器、node）发起, 比如setTimeout。执行流程是：同步任务 - 微任务 - 宏任务。js的任务分为同步任务和异步任务。异步任务又分为宏任务和微任务。

2023-04-17 23:56:13 139 1

原创 CSS如何匹配最后一个元素 :last-child

CSS如何匹配最后一个元素 :last-child

2022-08-08 16:08:17 3932

css和文档web的衰落一片混乱css作救星丰富的样式易于使用在多个页面上使用样式层叠缩减文件大小为将来做准备元素替换和非替换元素元素显示角色结合CSS和XHTMLlink标记候选样式表style元素@import指令具体的样式规则CSS注释内联样式小结利用CSS，可能会完全改变用户代理表现元素的方式。可以使用display属性采用基本方式来显示，也可以将样式表与文档关联，以另外一种不同的方式表现。用户不会知道这是通过外部样..

2022-04-27 18:20:06 368

原创 Access Token机制简单介绍

Access Token 机制简单介绍我们在访问很多大公司的开发 api 的时候，都会发现这些api要求传递一个 access token 参数。这个参数是什么呢？需要去哪里获取这个 access token 呢？access token 是在 Oauth2.0 协议中，客户端访问资源服务器时需要带上的令牌（其实就是一段全局唯一的随机字符串）。拥有这个令牌代表着得到用户的授权。令牌里面包含哪些信息呢？答案是：哪个用户在什么时候授权给哪个app 去做什么事情当然这些信息时不能直接从 access

2022-04-13 15:53:51 2046

原创 JavaScript includes()方法

JavaScript includes() 方法属于JavaScript String对象方法实例// 查找字符串是否包含"world"var str = "Hello world, welcome to the Runoob."var n = str.includes("world"); // => true定义和用法includes()方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回true，否则返回false。注意：includes()方法区分大小写。语

2022-04-13 15:44:41 1462 1

原创 overflow-wrap详解

overflow-wrapoverflow-wrap属性在CSS文本中是比较常用的，本部将带你深入理解overflow-wrap属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上overflow-wrap的实例，希望能够对你有所帮助。overflow-wrap定义和用法overflow-wrap: normal | break-word默认值：normal适用于：所有元素继承性：有动画性：否计算值：指定值相关属性：[ word-wrap ] || [ word-break

2022-04-09 14:19:05 8625

原创 JavaScript闭包（Closure）作用域作用域链

学习Javascript闭包（Closure）闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。var n = 999;function f1 () { alert(n)}f

2021-11-09 15:40:50 277

原创 JavaScript原型和原型链详解

一、原型①所有引用类型都有一个 __proto__（隐式原型）属性，属性值是一个普通的对象②所有函数都有一个 prototype（原型）属性，属性值是一个普通的对象③所有引用类型的 __proto__ 属性指向它的构造函数的prototypevar a = [1,2,3]a.__proto__ === Array.prototype; // => true二、原型链当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的 __pro

2021-11-02 16:42:07 2215 2

原创 JavaScript ceil()方法

定义和用法语法Match.ceil(x)参数描述x必须。必须是一个数值返回值大于等于 x，并且与它最接近的整数。说明ceil()方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。实例Math.ceil(0.60) // => 1Math.ceil(0.40) // => 1Math.ceil(5) // => 5Math.ceil(5.1) // => 6Math.ceil(5.9) // =>

2021-07-27 10:05:31 764

原创 CSS颜色和背景详解- 背景颜色 - 背景图片 - (color background-color background-image...)

颜色颜色表达式1.RGB：rgb(red,green,blue)：每个参数定义了0-255之间的颜色强度。举例： rgb(255,0,0) // 红色 rgb(0,0,0) // 黑色 rgb(255,255,255) // 白色2.RGBA：rgba(red,green,blue,alpha)：alpha是0-1透明度设置。0完全透明，1不透明。举例： rgba(255,0,0,0) // 完全

2021-07-22 17:21:51 5616 3

原创 uniapp尺寸单位 px转rpx

uniapp尺寸单位uni-app 支持的通用 css 单位包括 px、rpxpx即屏幕像素rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到960px时，默认按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置。rpx计算配置uni-app屏幕基准宽度uni-app规定屏幕基准宽度为750rpx开发者可以通过设计稿基准宽度计算页面元素 rpx

2021-07-16 10:48:52 12599 2

原创 uniapp h5 微信打开双标题处理

uniapp h5 在微信内打开双标题的问题解决办法在page.json文件下将 globalStyle 下的 navigationStyle 设置为 “custom” 即可解决微信H5双标题的问题{ "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }, "pages": [ { "path": "pages/index/index", "style": { "nav

2021-07-16 09:40:04 7015 6

原创 CSS（CSS3）实现整个页面的遮罩层示例

CSS实现遮罩层遮盖整个窗口当页面内存在position为absolute/relative/fixed属性的元素时，想要实现遮盖整个页面，需要三步：第一步：应当将遮罩层元素的position设置为fixed position: fixed;第二步：上侧和左侧距离都设置为0：top: 0; left: 0;第三步：把z-index设置成页面内最大，比如 z-index: 200;完整示例代码如下<!DOCTYPE html><html lang="en">&lt

2021-07-16 08:38:12 5046

原创 JavaScript String.lastIndexOf() 方法

String.indexOf()从后面开始搜索一个字符串概要string.lastIndexOf(substring)string.lastIndexOf(substring, start)参数substring要在字符串string中搜索的子串。start一个可选的整数参数，指定string中搜索开始位置。合法的值为0（字符串中的第一个字符的位置）到string.length-1（字符串中最后一个字符的位置）。如果省略了这个参数，它将从字符串string的最后一个字符开始搜索

2021-07-15 09:55:31 4260

原创 JavaScript String.indexOf() 方法

String.indexOf()搜索一个字符串概要string.indexOf(substring)string.indexOf(substring, start)参数substring要在string中搜索的子串。start一个可选的整数参数，指定该次搜索在字符串string中的开始位置。合法的值为0（字符串中的第一个字符的位置）到string.length-1（字符串中最后一个字符的位置）。如果省略了这个参数，则搜索将从字符串的第一个字符开始。返回在字符串string

2021-07-14 16:22:20 4097

原创 JavaScript String.slice() 方法

String.slice()提取一个子串概要string.slice(start, end)参数start切片开始的字符串索引。如果为负，则将从该字符串的尾部开始计算。也就是说，-1表示最后一个字符，-2表示倒数第二个字符，以此类推。end紧跟着切片结尾的字符串索引。如果不指定，则切片将包括从start到当前字符串结尾的所有字符。如果这个参数是负的，则从字符串的尾部开始计算。返回一个新的字符串，内容为string中自start位置开始并且包含start位置，直到但不包含en

2021-07-13 09:37:56 1160

原创 JavaScript String.substring() 方法

String.substring()返回字符串的一个子串概要 string.substring(from, to)参数from 一个非负整数，指定要提取的子串的第一个字符在string中的位置。to

2021-07-12 09:23:04 940

原创 JavaScript 字符串的使用 String对象常用属性和方法

JavaScript的内置功能之一就是字符串连接。如果将加号（+）运算符用于数字，表示两数相加。当将它作用于字符串，则表示字符串连接，将第二个字符串拼接在第一个之后，例如：msg = "Hello, " + "world"; // 生成字符串 "Hello, world"greeting = "Welcome to my blog," + " " + name;要确定一个字符串的长度——其所包含的16位值的个数——可以使用字符串的length属性。比如，要得到字符串s的长度：s.length除

2021-07-08 18:14:59 816

原创 JavaScript String.charAt() 方法

String.charAt()取得一个字符串中第 “n” 个字符概要 String.charAt(n)参数ｎ希望返回的字符在字符串string中的索引返回字符串string的第n个字符描述String.charAt()返回字符串string中的第n个字

2021-07-08 17:59:50 2273

原创 Hbuilder常用快捷键

点击 “工具 - 自定义快捷键 ” 可以设置自定义快捷键[ //删除行 {"key":"ctrl+d","command":"editor.action.deleteLines"}, //选择当前词或下一个相同词 {"key":"ctrl+e","command":"editor.action.addSelectionToNextFindMatch"}]...

2021-07-08 11:26:26 508

原创 HbuilderX指定部分区域查找和替换

Ctrl + F（查找）或者 Ctrl + H（替换）显示左上角查找和替换工具栏鼠标选中要查找和替换的区域点击左上角 “在选中区域中查找” 按钮在 “搜索区” 输入要查找的字符在 “替换区” 输入要替换的字符点击 “全部替换” 按钮可以批量对选中区域进行替换...

2021-07-08 11:07:32 4974

原创 JavaScript-JS数组方法之Array.filter()

filter()方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的：该函数返回true或false。调用判定函数就像调用forEach()和map()一样。如果返回值为true或能转化为true的值，那么传递给判定函数的元素就是就是这个子集的成员，它将被添加到一个作为返回值的数组中。例如：a = [5, 4, 3, 2, 1];smallvalues = a.flter(function(x) { return x < 3 }); // [2, 1]everyother = a

2021-07-08 09:37:04 593

原创 ES6 - 对象扩展 - Object.assign

基本用法Object.assign()方法用于将源对象（source）的所有可枚举属性复制到目标对象（target）。var target = { a: 1 };var source1 = { b: 2 };var source2 = { c: 3 };Object.assign(target, source1, source2)target // { a:1, b:2, c:3 }Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。...

2021-07-07 16:43:25 101

原创类型、值和变量 - 类型转换 - 显式类型转换

尽管JavaScript可以自动做许多类型转换，但有时仍需要做显式转换，或者为了使代码变得清晰易读而做显式转换。做显式类型转换最简单的方法就是使用Boolean()、Number()、String()或Object()函数。当不通过new运算符调用这些函数时，他们会作为类型转换函数并按照下表所描述的规则做类型转换：值转换为字符串转换为数字转换为布尔值转换为对象undefined“undefined”NaNfalsethrows TypeErrornull“nul

2021-07-06 16:35:52 174

原创 Flex弹性布局详解

一、Flex 布局定义Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box { display: flex;}二、Flex布局的基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cr

2021-07-05 17:33:32 557

原创 JavaScript-JS数组方法之Array.slice()

Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段的开始和结束的位置。返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定的位置之间的所有数组元素。如果只指定一个参数，返回的数组将包含从开始位置到数组结尾的所有元素。例如，参数-1指定了最后一个元素，而-3指定了倒数第三个元素。注意，slice()不会修改调用的数组。下面有一些示例：var a = [1,2,3,4,5];a.slice(0,3); // 返回[1,2,3]a.slice(3); // 返

2021-06-29 18:35:20 623

原创 VSCODE常用快捷键

快捷键用途Ctrl+P通过文件名查找文件Shif+Alt+Up向上复制一行Shif+Alt+Down向下复制一行Alt+Up向上移动一行Alt+Down向下移动一行Shif+Alt+F格式化代码Ctrl+D下一个匹配也被选中Alt+Shift+鼠标左键多行编辑Ctrl+Alt+Down/Up多行编辑Alt+鼠标左键多点编辑/取消多点编辑中的一个点...

2021-06-29 11:59:33 91

原创 Moment.js的基本使用

Moment.js中文官网<!DOCTYPE html><html lang="zh"></html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-06-25 14:40:31 244

原创【Antd+vue】Antd pro项目设置默认语言为中文

【Antd+vue】Antd pro项目设置默认语言为中文最近使用ANT DESIGN PRO OF VUE进行内部系统的开发，发现从官网拉下来的脚手架默认语言为英文，那么就需要我们额外设置一波了！通过简单3步，日期、分页控件等默认也均为中文哒Step1. 在src\locales\index.js文件修改默认语言// default lang// import enUS from './lang/en-US'import zhCN from './lang/zh-CN' // 默认语言由英文改为

2021-06-24 17:43:26 2187

原创 Visual Studio Code - vscode快速删除空行

Ctrl+h快捷键调出替换界面选择使用正则表达式模式在“查找”区输入以下正则表达式^\s*(?=\r?$)\n在“替换”区不要填写任何内容，点击“全部替换”按钮

2021-06-18 16:57:49 1726

原创 HTML（H5）之链接标签 - 锚点标签 - a标签 - ＜a＞标签

链接分类描述外部链接例如：<a\ href=“http://www.baidu.com”>百度</a>内部链接网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a\ href=“inex.html”>百度</a>空链接如果当时没有确定链接目标时，可以暂时使用空链接，例如<a\ href="#">首页</a>下载链接如果href里面的地址是一个文件或压缩包，当点击的时候浏览器会下载这...

2021-06-18 15:18:55 1124

原创 HTML（H5）之文件路径 - 相对路径 - 绝对路径 -路径里的正斜杠（/）和反斜杠（\）

路径描述类型<img src=“picture.jpg”>picture.jpg 位于当前网页相同的文件夹相对路径<img src="./picture.jpg">picture.jpg 位于当前网页相同的文件夹相对路径<img src="/picture.jpg">picture.jpg 位于当前站点根目录的 images 文件夹中绝对路径<img src="…/picture.jpg">picture....

2021-06-15 18:28:55 1427 1

原创 JavaScript-JS数组方法之Array.concat()

Array.concat()方法创建并返回一个新数组，它的元素包括调用concat()的原始数组的元素和concat()的每个参数。如果这些数组中的任何一个自身是数组，则连接的是数组的元素，而非数组本身。但要注意，concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。下面有一些示例：var a = [1,2,3];a.concat(4, 5); // 返回[1,2,3,4,5]a.concat([4,5]); // 返回[1,2,3,4,5]

2021-06-11 11:18:59 1252 13

原创 JavaScript-JS数组方法之Array.sort()

Array.sort()方法将数组中的元素排序并返回排序后的数组。当不带参数调用sort()时，数组元素以字母表顺序排序（如有必要将临时转化为字符串进行比较）：var a = new Array("banana", "cherry", "apple");a.sort()var s = a.join(","); // s == "apple,banana,cherry"如果数组包含undefined元素，它们会被排到数组的尾部。为了按照其他方式而非字母表顺序进行数组排序，必须给sort()方法传递

2021-06-10 17:55:23 5702 5

原创 vue双向绑定原理

Vue双向绑定是通过数据劫持结合发布者-订阅者的方式实现的，数据和视图一起更新，数据发生变化，视图也发送变化，相应的视图发送变化，数据也发送变化。双向绑定的核心是object.defineProperty()方法，通过这个方法来劫持各个属性的setter，getter，在数据变动的时候发布消息给订阅者，触发相应的监听回调。object.defineProperty()方法有三个参数，分别是obj（要定义其上属性的对象）、prop（要定义或修改的属性）、descriptor（具体的改变方法）简单的说就.

2021-06-10 15:47:59 146 3

原创 JavaScript-JS判断一个整数是偶数还是奇数

let num = prompt("请输入一个整数");if (num % 2 === 0){ console.log("这个数是偶数");} else if (num % 2 === 1){ console.log("这个数是奇数");}

2021-06-08 16:55:37 3420 1

原创 HTML（H5）定义及常用标签-超文本标记语言

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用HTML来建立自己的WEB站点，HTML运行在浏览器上，由浏览器来解析。标签描述<!–…-->定义注释<DOCTYPE>定义文档类型<html>定义HTML文档<head>定义关于文档的信息<meta>描述HTML文档的元数据<title>

2021-06-08 11:42:09 467 4

前端面试汇总-vue双向绑定原理精美桌面.png

空空如也