weixin_46548238的博客

原创 使用过的moment对象的用法（至2022/11/03）

【代码】使用过的moment对象的用法（至2022/11/03）

原创 antd vue input输入框输入小写字母实时转大写

要求在输入框输入的时候输入小写字母，输入框中显示的是对应的大写字母。在之前写的时候用到了input输入框的change事件，每次输入时就调用toUpperCase()方法将字符串转大写，但是会出现问题是：在已经输入的字符串中间插入字母，每输入一个字母后，光标都会跑到最后面，因为在每次输入的时候整个字符串被替换了。在调用toUpperCase()方法之后手动设置光标的位置。

原创 ios系统设置z-index不生效问题

两个盒子一个是侧边栏，一个是底部按钮，二者都是fixed固定定位。需求是侧边栏的层级要高于底部按钮，侧边栏z-index: 999，底部按钮z-index: 2。此时ipad上底部按钮的层级仍会高于侧边栏。适配ipad端时发现z-index属性在电脑调试生效，而在ipad实机上不生效。解决方法：在侧边栏加上css代码如下。

原创 hover自跳动

在给一个盒子固定尺寸后，想要鼠标经过出现边框，这个时候盒子因为多出1px而跳动（尽管设置了box-sizing: border-box）。例：卡片背景为白色，所以设置为白色边框。

原创 毕业设计素材

原创 ES6——promise基础知识

一、Promise1. promise出现的原因为了解决回调地狱问题。2. promise的基本使用Promise是一个构造函数，通过new关键字实例化对象语法new Promise((resolve, reject) => {})Promise接受一个函数作为参数在参数函数中接受两个参数resolve：成功函数reject：失败函数promise实例promise实例有两个属性state：状态result：结果1）promise的状态pend

原创 前端常见面试题——cookie、localStorage、sessionStorage有什么区别

cookie、localStorage、sessionStorage有什么区别共同点：三者都是保存在浏览器端，并且同源。区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。存储大小限制也不同，cookie数据不能超过4K，只适合保存很小的数据。localStorage、sessionStorage的数据可达到5M或更大，必coo

原创 初学Vue2.0——前端路由

一、路由的概念与原理1. 什么是前端路由？前端路由就是：哈希地址（锚链接）与组件之间的对应关系。哈希地址：url里面＃及其以后的地址叫做哈希地址要想获取到哈希地址，使用location.hash方法。2. 前端路由的工作方式前端路由的工作方式：用户点击了页面上的路由链接；导致了URL地址栏中的Hash值发生了变化；前端路由监听到了Hash地址的变化；前端路由把当前Hash地址对应的组件渲染到浏览器中。3. 前端路由的底层原理前端路由的底层原理是：监听了浏览器的onhashch

原创 4种CSS实现div水平垂直居中的方法

利用绝对定位：先离开左、上50%，然后再向左、上移动半个盒子的宽和长。.father1 { position: relative;}.son1 { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: aqua;}margin:auto .father2 { position: relative;.

原创 跟着pink老师学前端之JavaScript特效

1. 元素偏移量 offset系列offset翻译过来就是偏移量，我们可以使用offset系列相关的属性可以动态的得到该元素的位置（偏移）、大小等。1.1 offset系列常用属性返回的数值都不带单位属性描述element.offsetParent返回带有定位的父亲，否则返回的是bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移，若没有父亲或父亲不带单位，则以body为准element.offsetLeft返回元素相对带有定位父元素左

原创 跟着pink老师学前端之jQuery

1. jQurey概述jQuery是一个快速简洁的JavaScript库，它封装了JavaScript常用的功能代码。学习jQuery本质就是学习调用这些方法。2. jQuery的基本使用1. jQuery入口函数jquery的入口函数，相当于原生js中的DOMContentLoaded。等着页面DOM加载完毕再去执行js代码。第一种：$(document).ready(function(){ $('div').hide();})第二种：$(function () { $

原创 跟着pink老师学前端之JavaScript-BOM

文章目录@[toc]1. BOM概述1.1 什么是BOM1.2 BOM的构成2. window对象的常见事件2.1 窗口加载事件2.2 调整窗口页面大小事件3. 定时器（回调函数）3.1 setTimeout3.2 setInterval3.3 倒计时案例3.4 发送验证码案例4. this5. JS执行机制5.1 JS是单线程5.2 同步和异步同步同步任务异步异步任务本质区别5.3 JS执行机制6. location对象6.1 什么是location对象6.2 URL6.3 location对象的属性5.

原创 跟着pink老师学前端之JavaScript-DOM

文章目录1. WebAPIs1.1 什么是DOM1.2 DOM树2. 获取元素2.1 根据id获取2.2 根据标签名获取3. 事件基础3.1 事件三要素3.2 执行事件的步骤4. 操作元素4.1 改变元素内容4.2 修改元素属性1. 点击不同按钮切换图片案例2. 分时问候案例3. 密码隐藏显示案例4. 样式属性操作(1) 行内样式操作关闭二维码案例循环精灵图背景案例显示隐藏文本框案例(2) 类名样式操作密码框判断格式案例5. 排他思想仿百度换肤案例表格变色案例全选反选案例6. 自定义属性操作5. 结点操作1

原创 跟着pink老师学前端之JavaScript-基础部分

1. 初始JavaScript1.1 JavaScript是什么JavaScript是一种运行在客户端的脚本语言。脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行。现在也可以基于Node.js技术进行服务端编程。1.2 JavaScript的作用表单动态校验（密码强度检测）（js最初产生的目的）网页特效服务端开发（Node.js）桌面程序（Electron）App（Cordova）控制硬件-物联网（Ruff）游戏开发（cocos2d-js）1.3 浏览器执行

原创 跟着pink老师学前端之HTML5和CSS3的新特性

文章目录@[toc]1. HTML5新特性1.1 HTML5新增的语义化标签1.2 HTML5新增的多媒体标签1. 视频< video>2. 音频< audio>1.3 HTML5新增的input类型1.4 HTML5新增的表单属性2. CSS3新特性2.1 CSS3新增属性选择器2.2 CSS3新增结构伪类选择器1. nth-child2. nth-of-type和nth-child的区别2.3 CSS3新增伪元素选择器1. 伪元素字体图标2. 伪元素仿土豆案例3. 伪元素清除浮动

原创 跟着pink老师学前端CSS-D7

1. 精灵图1.1 为什么需要精灵技术为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。1.2 精灵图（sprites）的使用精灵技术主要针对于背景图片的使用，就是将网页中的一些小背景图像整合到一张大图中。这个大图片也称为sprites精灵图或雪碧图。移动背景图片的位置，此时可以用background-position。移动的距离就是这个目标图片的x和y坐标。因为一般情

原创 跟着pink老师学前端CSS-D6

1. 定位1.1 为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。1.2 定位组成定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。定位模式：static/ relative/ absolute/边偏移：top/ right/ bottom/ left1.3 静态定位（static）静态定位时元素的默认定位方式，无定位的意

原创 跟着pink老师学前端CSS-D5（学成在线案例）

1.CSS属性书写顺序布局定位属性：display/ position/ float/ clear/ visibility/ overflow自身属性：width/ height/ margin/ padding/ border/ background文本属性：color/ font/ text-decoration/ text-align/ vertical-align/ white-space/ break-word其他属性：content/ cursor/ border-radius/ bo

原创 跟着pink老师学前端CSS-D4（浮动）

1. 浮动（float）1.1 传统网页布局的三种方式普通流（标准流/文档流）浮动定位1.2 标准流标准流就是按照规定好默认方式排列。块级元素会独占一行，从上向下排列。行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。1.3 为什么需要浮动？浮动的最典型应用：可以让多个块级元素排列在同一行显示。网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。1.4 什么是浮动？float属性用于创建浮动框，将其移动到一边，知道左边缘或有边缘触及包含

原创 跟着pink老师学前端CSS-D3

1. CSS三大特性CSS三大特性：层叠性、继承性和优先级。1.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖掉另一个样式。样式冲突：遵循就近原则样式不冲突：不会层叠<style> div { /* color会被覆盖掉 */ color: lawngreen; /* background-color不会被覆盖 */ background-color: lawngreen; }

原创 跟着pink老师学前端CSS-D2

1. Emmet语法Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法。1.1 快速生成HTML结构语法<body> <!-- 生成多个标签 div*3 --> <div></div> <div></div> <div></div> <!-- 父子级 ul>li --> &l

原创 跟着pink老师学前端CSS-D1

1. CSS简介​ CSS是层叠样式表（Cascading Style Sheets）的简称。HTML只关注内容的语义，CSS负责美化页面。CSS最大的价值即为：由HTML专注去做结构呈现，样式交给CSS，实现结构和样式相分离。1.1 CSS语法规范<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat

原创 跟着pink老师学前端HTML-D2

1. 表格标签不用来布局，主要用于展示、显示数据。1.1 基本格式<table> <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr> <tr><td>riki</td> <td>男</td> <td>27</td></tr> <tr&

原创 跟着pink老师学前端HTML-D1

0. web标准的构成结构：用于对网页元素进行整理和分类（HTML）表现：用于设置网页元素的版式、颜色、大小等外观样式（CSS）行为：网页模型的定义及交互的编写（JavaScript）1. HTML语法规范1. 基本语法标签在尖括号里面标签总是成对出现，叫双标签极少数为单标签<br \ >2. 标签关系<html> <head></head> <body></body></html&