- 博客(33)
- 收藏
- 关注
RSS订阅原创 全局路由守卫RouterBeforeEach
从登录到联机再到主页面在src下的permission.js里引入import router from "./router";然后就是全局路由守卫router.beforeEach 第十行是白名单对应35行 十四行是登录的第43行是联机守卫 在联机界面的按钮处获取token在下图第76行 上图第45行用token
2022-06-02 11:24:48
217
原创 微信小程序
1.在小程序中如何获取用户信息？（1）小程序为升级前：可使用wx.getUserInfo直接获取用户信息，目前逐渐不能使用该方法了（2.）升级后，可使用以下方法获取用户的账户信息： 使用button，设置其属性：open-type="getUserInfo"<buttonopen-type="getUserInfo">获取用户信息</button>2.小程序中如何实现分享的功能？微信有什么限制？发送给朋友：onShareAppMessage(Ob...
2022-02-16 20:16:14
169
原创 放大镜案例
<!DOCTYPE html><html lang="en"> <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" /> <tit.
2021-12-14 21:16:45
727
原创 小球触壁反弹
<!DOCTYPE html><html lang="en"> <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" /> <tit.
2021-12-14 21:15:52
127
原创 tab切换
<!DOCTYPE html><html lang="en"> <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" /> <tit.
2021-12-14 21:14:42
614
原创 返回顶部案例
<!DOCTYPE html><html lang="en"> <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" /> <tit.
2021-12-14 21:14:02
131
原创 计时器案例
<!DOCTYPE html><html lang="en"> <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" /> <tit.
2021-12-14 21:13:16
69
原创 乾坤大挪移
<!DOCTYPE html><html lang="en"><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"> <title>Do.
2021-12-14 21:12:18
87
原创 贪吃蛇游戏
<!DOCTYPE html><html lang="en"> <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" /> <tit.
2021-12-14 21:10:37
67
原创 随机小方块
<!DOCTYPE html><html lang="en"> <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" /> <tit.
2021-12-14 21:08:09
62
原创 正则表达式
正则表达式的定义正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式的作用给定的字符串是否符合正则表达式的过滤逻辑(匹配)可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)强大的字符串替换能力(替换)正则表达式的特点灵活性、逻辑性和功能性非常的强可以迅速地用极简单的方式达到字符串的复杂控制对于刚接触的人来说，比较晦涩难懂2.正则的组成
2021-12-13 21:54:02
365
原创 函数高级应用
1.函数的定义方式(1)、函数声明functionfn(){console.log('thisisafunction')}(2)、函数表达式varfn=function(){console.log('赋值表达式函数')}(3)、内置构造函数的形式varfn3=newFunction("num1","num2","returnnum1+num2");console.log(fn3(2,3)); //52.函数的调用方法(1...
2021-12-12 18:58:18
622
3
原创 面向对象继承
原型目的：1、节省内存空间，2、实现数据共享原型链：实例与原型的链条称作原型链原型的指向可以发生改变。任何一个对象都有__proto__属性，实例化对象的__proto__属性指向的的构造函数的原型，因为任何一个对象都有__proto__属性，原型也是对象，所以原型也有__proto__属性，原型也有__proto__属性指向null什么是继承继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。原型继承通过原型继承，子..
2021-12-10 21:05:47
424
原创 js面向对象
面向对象编程——ObjectOrientedProgramming，简称OOP面向对象的特征封装性继承性多态性创建对象的四种方式字面量newObject()工厂模式构造函数(1)、解析构造函数代码的执行创建一个实例对象，必须使用new操作符。以这种方式调用构造函数会经历以下4个步骤：1、创建一个新对象2、将构造函数的作用域赋给新对象（因此this就指向了这个新对象）3、执行构造函数中的代码4、返回新对象(2)、const...
2021-12-10 20:51:40
104
原创 动画以及封装
offset、client、scroll系列1、offset系列offsetLeft:获取元素距离最左边的距离：(1)、如果父元素没有定位，距离浏览器最左侧的距离(2)、如果父元素有定位，距离父元素最左侧的距离offsetTop:获取元素距离最上边的距离: (1)、如果父元素没有定位，距离浏览器最上侧的距离(2)、如果父元素有定位，距离父元素最上侧的距离offsetWidth:获取元素的宽度，包括border及以内，不包括marginoffs...
2021-12-01 21:49:33
58
原创 DOM节点操作、事件对象与BOM
节点操作什么是节点根据W3C的HTMLDOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点document每个HTML元素是元素节点HTML元素内的文本是文本节点每个HTML属性是属性节点注释是注释节点1、节点类型通过noteType属性可以获取节点的类型（1）、document的节点类型---9 console.log(document.nodeType);//9（2）、标签的节点类型---...
2021-11-30 21:12:36
172
原创 属性操作与事件
1.新事件(1)、鼠标事件onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。onmouseout鼠标移出事件：在鼠标指针移出元素后触发onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。onmouseleave鼠标离开事件：在鼠标指针离开元素后触发onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发onblur失去焦点事件：在鼠标光标失去焦点时触发。onclick单击事件：在鼠标指针单击时触发ondblclick双击事件：在鼠标光..
2021-11-26 18:10:20
290
原创 DOM操作
1.webapi介绍1、api的概念API（ApplicationProgrammingInterface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、prompt()、log()、reverse()、getMonths()任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())2、webapi...
2021-11-25 21:08:53
180
原创 JavaScript基础-内置对象使用
JavaScript中的对象分为4种：内置对象、浏览器对象、自定义对象、DOM对象1.内置对象内置对象：Math/Array/Number/String/Boolean......。Math对象Math对象不是构造函数，它具有数学常数和函数的属性和方法，都以静态成员的方式提供。跟数学相关的运算来找Math中的成员(求绝对值，取整)。(1)、常用属性Math.PI圆周率(2)、常用方法Math.生成随机数Math.floor()...
2021-11-24 18:40:11
482
原创 预解析、对象、错误
1、单线程1、区分线程和进程进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）JavaScript语言的一大特点就是单线程浏览器是多进程的2、定时器window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时...
2021-11-23 18:37:37
352
原创 数组与函数
1、数组1、数组的定义所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。2、通过数组字面量创建数组多个数组项以逗号隔开vararr2=[1,3,4];3、获取数组元素数组的取值[0]是数组中的第一个元素。[1]是第二个。数组索引从0开始。格式：数组名[下标]下标又称索引功能：获取数组对应下标的那个值，如果下标不...
2021-11-22 18:23:15
527
原创 变量、数据类型、运算
一、 JavaScript介绍1、、JavaScript是什么JavaScript(简称JS)是一种运行在客户端的脚本语言，JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能JavaScript和HTML、CSS的区别HTML-提供网页的结构，提供网页中的内容CSS-用来美化网页JavaScript-可以用来控制网页内容，给网页增...
2021-11-21 16:40:57
60
原创 流程控制■ JavaScript条件控制■ JavaScript循环控制
1.流程控制介绍程序的三种基本结构顺序结构：从上到下执行的代码就是顺序结构(程序默认就是由上到下顺序执行的)分支结构：根据不同的情况，执行对应代码循环结构：重复做一件事情2.分支结构（1）、if语句if语句-只有当指定条件为true时，使用该语句来执行代码if...else语句-当条件为true时执行代码，当条件为false时执行其他代码if...elseif....else语句-使用该语句来选择多个代码块之一来执行第一种if(/*...
2021-11-21 16:40:00
115
原创 CSS3弹性布局、响应式布局、PS
1.响应式Web设计-Viewport响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况(1)、什么是Viewportviewport是用户网页的可视区域。viewport翻译为中文可以叫做"视区"
2021-11-20 22:36:54
138
原创 CSS3渐变、过渡、转换、动画
1.CSS3渐变(1)、什么是渐变CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。(2)、CSS3渐变的分类线性渐变（LinearGradients）-向下/向上/向左/向右/对角方向径向渐变（radial-gradient）-由它们的中心定义(3)、CSS3线性渐变为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。1、从上到下下面的实例演示了从顶部开始的线性渐
2021-11-20 22:23:23
417
原创 CSS3选择器、边框、背景、按钮
1.CSS3概述CSS3现状1、浏览器支持程度差，需要添加私有前缀-webkit-谷歌safari-moz-火狐-ms-IE2、移动端支持优于PC端3、不断改进中4、应用相对广泛2.CSS3选择器(1)、CSS3属性选择器[attribute] [target] 选择所有带有target属性元素[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素[attribute~=value] ...
2021-11-20 21:55:20
95
原创 高级技巧、精灵技术
1.元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display、visibility和overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！(1)、displaydisplay设置对象是否显示、如何显示。display:none隐藏对象。与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。..
2021-11-20 21:42:28
62
原创 浮动与定位
CSS的定位机制有3种：普通流（标准流）、浮动和定位。1.浮动(1)、标准流html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局(2)、浮动(3)、浮动的分类元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置的过程。在CSS中，通过flo..
2021-11-20 17:16:50
162
原创 CSS三大特性与盒子模型
1.行高的测量总结：1.上距离和下距离总是相等的，因此文字看上去是垂直居中的。2.如果行高等于height高度，文字会垂直居中3.如果行高大于高度，文字会偏下4.如果行高小于高度，文字会偏上2.CSS三大特性层叠继承优先级是我们学习CSS必须掌握的三个特性。(1)、CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这时一个属性就会将另一个属性层叠掉。比如先给某个标签指定...
2021-11-20 16:59:58
73
原创 CSS选择器与标签的分类
1.复合选择器复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。(1)、交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格(2)、并集选择器并集选择器（CSS选择器分组）是各个选择器通过<strongstyle="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都.
2021-11-20 16:51:27
162
原创 表单类型、多媒体与CSS初始
一、表单的input输入类型HTML5新增了表单的输入类型1、email输入email格式，email类型用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值是否合法有效:<formaction="demo-form.php">E-mail:<inputtype="email"name="usremail"><inputtype="submit"></form><p...
2021-11-20 16:21:32
116
原创 表格、表单与h5
一、.表格标签 表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。 、创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：<table><tr><td>单元格内的文字</td>...</tr>...</table>在上面的语法中包含三对HTML标签，分别为table、tr、td，他们是创建表格的基本标签...
2021-11-20 16:02:56
168
原创 HTML基础01
了解常用浏览器 了解WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用文本、图像、链接标签 掌握三种列表标签 一.开发工具我们主要用的开发工具有编辑器、浏览器、photoshop。1、编辑器（1）、常用的前端编辑器有：dreamweaver、sublime、webstorm、Hbuilder、vscode（2）、浏览器 浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox...
2021-11-03 20:13:57
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人