- 博客(42)
- 收藏
- 关注
RSS订阅原创 H5CSS3第一课——CSS选择器
CSS中的选择器的种类非常多，并且在CSS3中也新增了一些选择器，使选择器的功能更强大，具体如下。结果图有点乱，但是一个一个截图实在是太麻烦了，将就看看吧。/* 鼠标悬停时背景颜色为#0099E5 *//* 设置偶数行背景颜色透明度为0.9 *//* 设置导航栏中的每一项的样式 */`这个比较简单就，不截图结果图了。/* 设置超链接的样式 *//* 设置导航栏样式 */
2023-03-21 16:53:51
473
原创 axios的封装
import axios from "axios"; //创建axios实例var instance = axios.create({ baseURL: baseURL, timeout: 5000,});instance.defaults.validateStatus = function(status) { return status >= 200 && status < 500; // 默认的};// 添加请求拦截器instance.int
2021-11-03 22:23:04
225
2
原创 面试复习必备知识点
作用域作用域就是代码块的执行环境全局作用域：直接赋值的变量，window上的值函数作用域。作用域链如果父级也没呢？再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是 作用域链 。内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数。原型每一个实例对象都有一个私有属性__proto__,指向它的构造函数的原型对象(prototype)。newArray.proto=Array.prototype原型链每一个实
2021-10-20 17:51:40
203
原创 分页组件封装
分页组件封装对于我们前端来说，分页功能是必不可少的。几乎每个页面都有它的存在，为了减少代码的冗余量，对于这些经常用到的功能呢，我们就会把它写成组件封装起来。今天我们就来实现分页功能的封装。<template> <div class="my-pagination" :style="{ textAlign: textAlign }"> <el-pagination :current-page="page.current" :page-si
2021-09-09 11:00:03
507
原创 uniapp实现购物车功能
uniapp实现购物车功能周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。首先第一步，我们把页面先搭建出来<template> <view> //购物车没商品出现的页面 <v
2021-09-07 11:35:28
13239
9
原创 如何处理后台返回的数据
如何处理后台返回的数据作为前端人员来说，学会调接口的同时，最主要的是需要学会处理后台返回来的数据。记得刚接触项目的时候，处理后台返回的数据可让我好一阵头疼。今天就来说点简单的。最常见的就是后台返回一个数字，或是字符串，我们需要在页面将它转换为对应的中文。比如常见的有政治面貌，审核状态，分类等。先以政治面貌为例子 { label: "中共党员", value: "1" }, { label: "中共预备党员", value: "2" }, { label: "共青团员", val
2021-08-25 10:25:38
3795
原创 dayjs
时间框架——Day.js今天给大家推荐一个好用的时间框架，dayjs，一个轻量的处理时间和日期的 JavaScript 库。在做这个项目以前我都没接触过这个框架，正在我用最元老的方法去完成对时间格式的转变和求时间间隔时，同事使用这个框架让我耳目一新。它和Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js简单地说，只要你会Moment.js，那么你就会Day.js!但是我们知道的，Moment.js 的大小是200多k,Da
2021-08-04 17:13:54
1077
原创 JS模块化规范四
一、ES6模块化规范在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。1.概述1.1 ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。1.2 对比CommonJS 和 AMD 模块，都只能在运行时确定这些东
2021-06-11 09:06:12
265
原创 JS模块化规范三
commonjs 规范CommonJS ：1 .了解node应用由模块组成，采用的commonjs模块规范。**每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。**CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。**加载某个模块，其实是加载该模块的module.exports属性。**require方法用于加载模块。CommonJS模块的特点1.所有
2021-06-11 09:04:06
133
原创 JS模块化规范一
AMD规范1.1什么是AMD规范Asynchronous Module Definition，用白话文讲就是 异步模块定义，对于 JSer 来说，异步是再也熟悉不过的词了，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。1.1.2AMD规范是怎么出来的是 RequireJS 在推广过程中对模块定义的规范化产出的1.2用法AMD规范定义了一个自由变量或者说是全局变量 define 的函数。define( id?, dependencies?, fac
2021-06-11 09:00:10
117
原创 canvas画时钟
canvas画时钟今天我们来学习学习如何使用canvas画时钟首先我们得了解一下canvas是什么，怎么使用它：Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
2021-06-04 14:50:55
2621
2
原创 webpack
简述webpack- 什么是webpack？以上这张图是webpack官网首页的一张图，从上面这个图中我们可以得出webpack可以将多种静态资源js,css,less,sass,乃至于图片转换成一个静态文件。所以我们的得出webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，并将这些模块按照指定的规则生成对应的静态资源。从而减少了页面的请求。- webpack的安装由于webpack在构建的过程中需要读取文件，因此它是运行在node环境中的webpack通过npm安
2021-04-17 10:39:50
131
原创 前端跨域问题
跨域及解决跨域的方法跨域（非同源策略请求）——跨域传输首先我们来看看什么是跨域：首先我们得知道一个域名是由哪几部分组成的：跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。当协议，子域名，主域名，端口号任意一个不相同时，都算作不同域。不同域之间请求资源，就算做“跨域”。比如：httP://www.baise.com/index.html请求http://www.bailiban,com/jy.js就算做跨域。
2021-04-10 11:46:57
230
原创 2021-04-04
JS基础——Date()和Math()date()Math()今天我们来说一下js基础中的两个简单对象date()和Math()以及它们一些简单的操作。首先我们来学习一下date()对象Date对象-在Js中使用Date对象表示一个时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="
2021-04-05 21:08:31
127
原创 css样式和js加载
浅谈css样式和js加载的几种方法最近在忙着复习前端一些简单的底层面试题，突然发现了这样一个问题，异步加载css，js的方法有哪些，今天我们就来大概的整理以下加载它们的方法。首先我们来谈谈css的四种引入方式。- CSS概述CSS,中文名为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容相分离。css引入的方式有四种，分别是行内式、嵌入式、链接式、导入式。- 行内式：<body> <div class="box" style="width: 100;he
2021-03-27 19:52:16
582
原创 jquery写竖切换
jquery写竖切换随着技术的发展，现在人们越来越重视样式的优美，在一个项目中，给人们呈现出来优美的页面是非常重要的，尤其是首页。因为不管是什么功能的实现都是需要根据首页的提示。而首页中导航也挺重要。今天我们就来写一个竖切换的导航条。jquare是对DOM一些操作方法的封装，用它来实现一些简单的操作无疑是最为恰当的。接下来我们就来实现下面这个导航图。在这里插入图片描述当进入的时候，二级菜单会被隐藏起来，当我点击下面的任意一个，其二级菜单就会出来，点击下一个时，上一个又藏起来。首先我们来搭建一下
2021-03-22 10:56:56
248
原创 树与二叉树
树与二叉树的定义1、树的定义：树是n（n大于等于0）个节点的有限组合，当n=0时被称为空树。在任一非空树（n>0）中，有且仅有一个被称为根的结点；除根节点以外的结点可分为m(m大于等于0)个互不相交的有限子集T1,T2,…,Tm,其中，每个T1又都是一棵树，并且称为根节点的子树。如下图：A就是其的根节点，BCD就是A的子树，而E,F又是B的子树…就像一棵倒立着的树，只有一个根，但是可以有许多的分叉点。树的定义是递归的，它表明了树的固有特性。也就是一棵树由若干子树构成，而子树又由更小的子树
2021-03-20 12:05:28
201
原创 异步加载，局部更新
异步加载，局部更新——Ajax1、本质及其作用学习一门方法以前，起码我们得知道其作用是什么，为什么我们需要它。AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。1. 基于web标签的xhtml+css2. 可以使用dom进行动态的显示和交互3. 使用XML和XSLT(是一种用于将XML[文档](https://baike.baidu.com/item/%E6%96%
2021-03-13 12:03:13
244
原创 认识promise对象
promise对象的认识Promise是es6引入的针对异步编程的解决方案，用于表示一个异步操作的最终完成或（失败）及其结果值。避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易有了 Promise 对象，我们就可以将异步操作以同步操作的流程表达出来，且promise是一个构造函数。一个 Promise 必然处于以下几种状态之一：待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。已兑现（fulfilled）: 意味着操作成功完成。已拒绝（
2021-03-13 12:02:44
274
原创 B/S架构和C/S架构的含义及区别
B/S架构和C/S架构的含义及区别C/S架构一、C/S架构及其背景C/S架构是一种比较早的软件架构，主要应用于局域网内。在这之前经历了集中计算模式，随着计算机网络的进步与发展，尤其是可视化工具的应用，出现过两层C/S和三层C/S架构，不过一直很流行也比较经典的是我们所要研究的两层C/S架构。C/S架构软件（即客户机/服务器模式）分为客户机和服务器两层：第一层是在客户机系统上结合了表示与业务逻辑，第二层是通过网络结合了数据库服务器。简单的说就是第一层是用户表示层，第二层是数据库层。客户端和服务器直
2021-02-24 18:57:38
6497
原创 前端面试一
20个js常见案例 // 1、判断一个数是偶数还是奇数。 function fn(num){ if(num%2===0) return '偶数'; return '奇数'; } var a=fn(21) console.log(a) //2、把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 -
2021-02-24 18:48:09
144
原创 浅聊前端程序员，后端程序员，全栈程序员的工作
浅聊前端程序员，后端程序员，全栈程序员的工作区别很多时候，编程小白都在思考这样一个问题，找工作到底是选前端，还是后端，今天我们就来看看什么是前端开发，后端开发。为什么美国大多数程序员是全栈程序员？前端开发：前端开发就是开发页面上的内容展示和与用户的交互。这里的内容展示是:指在网页上看到的图片、文字、视频、数字等信息。那与用户的交互指的是用户在页面上通过点击按钮、输入文字等动作对网站提供数据输入，然后前端对用户的输入进行响应,比如更新页面上的内容。（举个例子来说，比如你在我的文章下面点一个赞，
2021-01-25 13:43:21
939
原创 移动端常用布局之flex布局
flex布局flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem）
2021-01-05 20:33:18
479
原创 移动端常见布局——flex布局、百分比布局
移动端常用布局方式当移动端单独制作时，使用传统的布局虽然兼容性好，但是它的布局繁琐，且有局限性，不能在移动端很好的布局。所以很多时候我们可以借助下面的几个方式来帮助我们更好的布局。移动端常见布局：流式布局（百分比布局）flex 弹性布局less+rem+媒体查询布局混合布局响应式布局：媒体查询bootstarp今天我们先来认识一下百分比布局和flex布局1.流式布局：流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像
2021-01-05 19:37:43
1419
原创 根据数据创建表格
根据数据创建表格很多时候我们已经不在使用table创建表格了，而是需要根据统计的数据来创建表格，从而实现一些功能下面我们就一起来完成一个简单的动态创建表格。创建动态表格之前我们得大概知道表格的组成，所以首先我们来看看表格的组成部分 <table> <!-- 标题 --> <caption></caption> <!-- 表头 --> <thead></thead> <!
2020-12-28 19:22:39
1215
原创 渐变轮播图
渐变轮播图要求：1）完成轮播图结构及样式的搭建；2）根据图片的数量动态创建序号；3）点击next按钮实现图片的轮播并有过渡效果;4）点击prev按钮实现图片的轮播并有过渡效果；5）给序号注册点击事件让图片轮播；6）图片自动轮播，鼠标进入盒子让两个箭头显示并停止定时器；7）鼠标离开盒子箭头消失并重新开启定时器所以接下来我们就按照这个步骤一步一步来实现它吧首先我们先完成html的结构搭建<body> <!-- 创建一个大容器 --> <div
2020-12-28 16:55:06
264
原创 正则表达式中的常用字符
正则表达式中的常用字符正则表达式是很多语言都不可缺少的，今天我们一起来看看javaScripe中正则表达式常用的一些特殊字符。那到底，什么是正则表达式呢？我们为什么要用到它呢？定义：正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。创建正则对象的两种方法（1）通过构造函数创建（new）( 2 )通过字面量创建(/ /) //通过构造函数创
2020-12-17 20:54:01
1026
原创 原型
原型与原型链一、原型①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象③所有引用类型的__proto__属性指向它构造函数的prototype二、原型链当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向
2020-12-17 13:47:34
100
原创 js动态案例1
js动态案例1题目：分时问候案例（分时显示不同图片以及不同的问候语）<body> <img src="img/iu.jpg" alt=""> <div>上午好</div> <script> //根据系统时间来变化图片和文字 //第一步，获取元素 var img = document.querySelector('img') var div = documen
2020-12-14 18:39:58
212
原创 模态框的拖拽
拖动模态框在许多网页中，弹出框和拖曳的使用是非常多的，今天我们就通过一个案列来学习这两个功能。案例分析:第一步:1.点击弹出框,模态框和遮挡层显示出来display:block;2.点击关闭按钮后,又被隐藏起来:display:none;第二步:拖曳1.鼠标放到模态框最上面一行,可以按住鼠标拖曳模态框在页面中移动2.鼠标松开后,停止拖曳触发事件是鼠标按下:mousedown,鼠标移动:mousemove,鼠标松开:mouseup....
2020-12-13 22:54:41
1342
原创 Js常见的报错类型
Js常见的报错1.ReferenceError（引用错误）: “x” is not defined（"x"变量没有被声明）如下题var foo = "Hello"; (function() { var bar = "World"; console.log(foo + bar); //HelloWorld console.log(typeof(bar)); // string })()
2020-12-05 12:36:10
770
原创 数组的实例方法大全
数组的实例方法大全运用数组的地方很多，少不了要对其进行增删改查等操作。数组的实例方法很多，也比较容易记混。添加数组项(push,unshift,splice)：push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 var arr = [3, 4, 5, 9]; arr.push('3', 'hello', '梅花'); console.log(arr)//7 //[3, 4, 5, 9,'3', 'hello', '梅花']
2020-12-05 11:08:51
2208
原创 数组常见小案例
数组常见小案例：数组：//求数组中所有元素的和： var arr1=[10,20,30,40,50] var sum=0; for(var i=0;i<arr1.length;i++){ sum+=arr1[i]; } console.log(sum) //求数组中所有元素的平均值： var arr2 = [1,2,3,4,5] var sum2 = 0; for(var i = 0;i < arr
2020-11-30 13:25:19
1303
原创 常用的基于for双循环的小问题
思维与代码的转换就我个人经验来说，想要学好任何一门编程语言，你的思维逻辑是不能太差的。因为编程语言的诞生本身就是为了解决我们生活中遇到的繁琐的问题。所以我们要养成用数学逻辑思维去看待我们遇到的题目。但要注意，它不是一成不变的，是经过加工的。接下来，我们从几个常见案例去解读一下该如何转变我们的思维。1、用*号输出一个5行的直角三角形***************首先我们想要写出这个直角三角形，看到的第一瞬间会发现它有5行，并且每一行都是递增的状态吧。此时脑海中有没有浮现出for双循环结构呢，
2020-11-26 21:00:48
908
原创 对比了解前置运算与后置运算
对比了解前置运算与后置运算个人觉得，这是一个非常好玩的点。也是在写代码时很重要的点。我们都知道，JavaScript中的递增运算符是 ++，递减运算符是 --。简单来说，递增运算符就是将变量+1，递减运算符就是让变量-1，可是前置和后置结果是不一样的，也是很容易混淆的。首先，让我们先来看看下面这两段代码吧。var a = 10;a++;var b = a++ + 2;console.log(b)var a = 10;++a;var b = ++a + 2;console.log(b)
2020-11-19 20:38:31
1800
原创 详解css的四种定位方式
详解四种定位方式所谓定位，既是指手动控制元素在包含块中的精确位置。定位（position）=定位模式+边偏移。边偏移：定义元素相对于父级上线的位置。topbottonleftright定位模式：选择器{position：属性值；}1、 静态定位（static）static定位，也叫静态定位，是元素默认的定位方式，它遵循正常的文档流，占用文档空间，该定 位方式下，top、right、bottom、left、z-index等属性是无效的。 <style> .
2020-11-14 11:08:23
1116
原创 论清除浮动的几种方法
论清除浮动的几种方法对于许多编程小白来说，似乎很难理解为什么需要清除浮动呢，接下来我们通过代码一起来学习一下吧。 <div class="box"> <div class="box1">box1</div> <div class="box2">box2</div> </div> <div class="box3"></div>首先我们不给父盒子高度，给它一
2020-11-13 16:55:12
167
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人