- 博客(42)
- 收藏
- 关注
RSS订阅原创 处理跨域后端不配合怎么办？React中用代理处理。
题记： 处理跨域的方式有很多种，这次主要是介绍我们在react中开发不借助后端实现的跨域处理。先看一下我的整个demo目录结构图：问题出现：下面是我的客户端代码，索要服务器数据：import React, { Component } from 'react'import axios from 'axios';export default class App extends Component { render() { return ( <d
2021-01-02 14:50:56
433
原创 关于ajax缓存数据分页实现
做项目时，难免会遇到数据量非常大的时候，这时我们向服务器发送请求获取全部数据时，难免引起性能问题，解决办法之一就是分页查询了，以小块化请求服务器会大大减轻双方的压力。那么涉及到分页时，用户点击某一个分页按钮时，会发送一次网络请求，但是当他们点击之前点击过的分页按钮，若是再次发送网络请求，这样就会造成资源浪费了，所以我们就得把这些数据缓存起来。。。我们得首先知道当前的页码和要查询数据的条数，这里涉及到后端的数据库操作，就不再详谈了。一、 获取分页点击元素：var lis = document.getE
2020-10-24 11:43:02
288
1
原创 关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值
这是做项目的时候遇到需要用echarts展示数据：官方柱状图：option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: {
2020-10-11 16:54:12
17133
3
原创 DOM操作js和jQuery操作元素对比
今天主要写写关于js的dom操作和jquery操作元素的对比，主要从获增删几个方面分析。先看看js的节点信息：节点名称nodeNamenodeTypenodeValue元素节点标签名(大写)1null属性节点属性名称2属性值文本节点#text3文本内容注释节点#comment8注释内容文档节点#document9null我们要操作的更多是元素节点：1.获取节点对象方法特点返回值兼容性getEl
2020-08-15 10:02:32
527
原创 探究BFC&IFC(写着写着不自觉的触发了)
先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染 区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC 都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。BFCBFC（Block Formatting Context）叫做“块级格式化上下文”BFC的布局规则如下：1.内部的盒子会在垂直方向，一个个地放置；2.
2020-08-14 16:38:53
307
原创 前端学习你必须要掌握的几种重要布局详解(双飞翼、圣杯布局、二栏布局、三栏布局)
了解margin负值之美：在我们去写这些布局之前，需要了解一个特性，即margin为负值时产生的效果：.test { width: 200px; height: 200px; display: inline-block; background-color: #0f0;}<div class='test'>我是盒子的内容</div>这只是个正常的标准盒子，但我们在样式里追加：margin-left: -200px发生了什么呢？这个盒子会移动到浏览器最左边去，即
2020-08-14 11:14:56
301
原创 异步编程(Promise实现同步处理任务原理)
今天的这篇文章主要是总结promise对象如何实现同步处理异步任务：我从头开始慢慢介绍这个过程吧！这个过程我会用代码一一实现，毕竟文字不如 代码来得合适。promise的三种状态//pending 准备阶段//fulfilled 成功//rejected 失败function promise() { return new Promise((resolve, reject) => { resolve("成功"); // reject("失败");
2020-08-02 19:35:55
2850
原创 ES6异步编程(promise到async的诞生)
我们知道js是有同步和异步任务的，这里简单的介绍以下它们的概念：同步：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。可以这么说，在目前最简单的异步任务就是定时器了。好了，切入主题，今天主要讲到关于异步回调函数的成为同步处理及优化的过程；在最初我们处理回调函数时，就是下面的处理：var sayhello = function (
2020-07-31 19:18:37
128
原创 js之遍历数组八种方法汇总(总有一款你需要的)
直进主题，实现数组遍历：forEach()：函数参数有三个：第一个参数表示当前遍历元素；第二个参数表示当前遍历元素的索引；第三个参数表示这个数组对象本身(很少用)特点：无返回值，不会改变原数组；会遍历到每个元素。let arry = [1,2,3,4,5,6,7,8,9];arry.forEach(function(item, index){ console.log(item, index); //依次打印数组元素和索引})filter()：函数参数有三个：第一个参数表示当前
2020-07-30 21:56:09
784
原创 ES6新定义(类的产生)
类的概念：可以通过类实例化一个具体的对象。在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。它不可重复声明类定义不会被提升，这意味着必须在访问前对类进行定义，否则就会报错类的定义：ES6的类中不能直接定义变量，变量被定义在constructor中。constructor** 方法是类的默认方法，创建类的对象时被调用。也被称为类的构造方法（构造函数、构造器）。一个类中有且仅有一个构造方法。class Exam { constructor(name) {
2020-07-30 19:02:22
421
原创 ES6初入门(Map与Set)
初次接触ES6，今天主要讲讲Map与Set的用法：Map：Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。它是一个伪数组。Map与对象的区别主要在于：Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。我们写一个例子：let map = new Map();let obj = {};let arry = [];map.set(name, "小王"); //设置键值对map.set(true, "布尔值"); map.set
2020-07-29 20:19:20
214
原创 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE），使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。创建方式：通过RegExp对象创建正则：var reg = new RegExp(/123/);通过字面量创建正则：var reg = /123/; //这里没有引号测试正则(.test())：用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。var reg
2020-07-28 19:39:46
284
原创 JavaScript之闭包
官方对闭包的解释：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。我们也可以这样解释闭包：闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。function a() { var num=100; function b() { num++; console.log(num); } return b;}var demo=a(); //demo = function b() {}demo(); // num = 101
2020-07-27 19:22:10
90
原创 js十种this指向例题汇总(搞定它们js中this指向应该问题不大)
var obj = { a: 10, b: this.a + 10, fn: function() { return this.a; }}console.log(obj.b);console.log(obj.fn());运行结果：obj.b => NaNobj.fn() => 10在对象里，属性里的this指向window，在全局作用域没有定义a，但由于是对象.a相当于创建了a，只是没赋值，this.a为undefined，加上一个数值，故NaN；方法里的thi...
2020-07-25 09:53:46
1219
2
原创 js函数声明及调用
函数定义总共有三种函数定义的方式：函数声明语句、函数表达式、构造函数。函数声明语句：简单来说就是通过function关键字声明的函数体。function f() {};函数表达式：通过一个变量来存取函数的返回值，它实际上是一个匿名函数(函数没有名称)；var fn = function () {};构造函数：通过new关键字来定义函数，函数的形参和函数体都放在实例对象里。var test = new Function("a", "b", "return a * b");var x = te
2020-07-24 18:24:08
760
原创 数组Array属性和方法(如何将伪数组转换为数组)
数组的属性：length：获取数组的长度；constructor：返回创建数组对象的原型函数；prototype：向数组对象添加属性或方法。数组的方法：concat()：连接两个或更多的数组，并返回结果；join()：把数组的所有元素放入一个字符串。pop()：删除数组的最后一个元素并返回删除的元素。push()：向数组的末尾添加一个或更多元素，并返回新的长度。slice()：选取数组的的一部分，并返回一个新数组。splice()：从数组中添加或删除元素。sort()：对数组的..
2020-07-23 19:21:06
710
1
原创 原型对象prototype、对象原型__proto、原型链
我们一步步的了解到整个原型链过程：我们来看一个例子：function Star(name,age) { this.name = name; this.age = age; this.sing = function() { console.log("我会唱歌"); }}var ldh = new Star("刘德华", 18);var zxy = new Star("张学友", 18);console.log(ldh.sing === zxy.sing); //falseconsol
2020-07-23 09:08:46
459
原创 对象的增、删、改、查
1.对象属性的增加：所谓增添一个对象的属性，就是直接对该属性进行赋值操作即可，这就相当于为该对象添加了一个新属性，而打印未添加的属性，浏览器不会报错，而是会打印出undefined。var obj = { name: "小王"}console.log(obj.age); //这里不会报错，而是得到undefinedobj.age = 18;obj["job"] = "student";console.log(obj);结果如图：2. 删：我们通过delete操作符来删除一个对象的属
2020-07-21 18:42:31
547
原创 对象属性Object.defineProperty()、hasOwnProperty()、propertyIsEnumerable()
Object.defineProperty()对象的属性Object.defineProperty()，深入了解一下这个属性：它的语法：Object.defineProperty(obj, prop, descriptor)参数说明：obj 需要定义属性的对象。prop 需被定义或修改的属性名。descriptor 需被定义或修改的属性的描述符，是一个对象形式。其中描述符有以下属性可选择：configurable: 仅当该属性的 configurable 为 true 时，能够被删除。
2020-07-21 18:26:01
338
原创 let和var变量声明区别
var声明的变量是没有块级作用域的：eg：{ var a = 10;}console.log(a); //a = 10let声明的变量具有块级作用域：eg：{ let a = 10;}console.log(a); //报错,a is not defined下面我们来看一个常见的面试题：for (var i = 0; i < 3; i++) { console.log(i); //0 1 2 setTimeout(function(){ console.log(i
2020-07-21 14:30:11
464
原创 js条件语句和循环
条件语句在js中，条件语句主要是以下：if语句 — 只有当指定条件为 true 时，使用该语句来执行代码；if…else 语句 — 当条件为 true 时执行代码，当条件为 false 时执行其他代码；if…else if…else 语句— 使用该语句来选择多个代码块之一来执行；switch 语句— 使用该语句来选择多个代码块之一来执行。循环语句for - 循环代码块一定的次数for/in - 循环遍历对象的属性while - 当指定的条件为 true 时循环指定的代码块do/wh
2020-07-20 21:02:52
547
原创 面试题数字求和
今天刷到了一道较为简单的题，数字求和，设计一个函数sum()，实现以下功能：// Should equal 15sum(1, 2, 3, 4, 5);// Should equal 0sum(5, null, -5);// Should equal 10sum(‘1.0’, false, 1, true, 1, ‘A’, 1, ‘B’, 1, ‘C’, 1, ‘D’, 1, ‘E’, 1, ‘F’, 1, ‘G’, 1);// Should equal 0.3, not 0.300000000
2020-07-18 08:44:22
354
1
原创 js作用域、作用域链简概
今日份学习内容：delete使用delete关键字可以删除没用var声明的变量。使用var声明的变量不能删除。使用它删除一个变量时，它会返回一个布尔值，删除成功会返回true，失败返回false。eg：var a = 100;b = 200;console.log(delete a); //false console.log(delete b); //true关于它的用处并不多，但需要理解它的使用思想。this和window在我们全局作用域下，this和window是完全可以打等号的
2020-07-17 19:58:43
133
原创 js的几种基本数据类型
今日主要学习js的几个数据类型String类型JavaScript的字符串类型用于表示文本数据。它是一组16位的无符号整数值的“元素”。在字符串中的每个元素占据了字符串的位置。第一个元素的索引为0，下一个是索引1，依此类推。字符串的长度是它的元素的数量。字符串可以是引号中的任意文本。您可以使用单引号或双引号。字符串一旦创建，它们的值就不能改变。转换字符串的方法有三种方式：toString(); 数值、布尔值、对象和字符串值变量都有 toString()方法。但 null 和 undefine
2020-07-16 20:19:49
825
原创 js之match和includes
首先，str1.match(str2)和str1.includes(str2)都有找出字符串中是否包含另一个字符串的作用，它们都有一个返回值。简单介绍它们的不同之处吧！str1.match(str2); 它能比较str1中是否有str2的字符，若找到，则会返回一个数组，它存储的有str2第一个字符在str1中字符的索引，若没找到，即str1无str2中的元素，则会返回null。eg:<script> console.log("hello".match("el"));
2020-07-16 14:31:30
864
原创 js组成及其它类型转化为数值类型
总结一下今天学习的内容吧js介绍js：全称为JavaScript，是一种脚本语言(不需要编译就能运行的程序代码)，它的组成是有ECMAScript（ES）、DOM（Document Object Model）、BOM（Browser Object Model）；ES：规定了语言的语法、类型、语句、关键字、保留字、操作符、对象；DOM(文档对象模型)：指的是HTML页面中的每个组成部分都是某种类型的节点、标签；BOM(浏览器对象模型)：指的是显示的页面以外的部分，如弹出新浏览器窗口的功能、刷新、地
2020-07-15 19:35:26
446
原创 js基础(作用域问题)
现阶段初步接触了js，其中非常非常重要的就是它的作用域问题了，下面我会介绍怎么去分析js代码。js代码的执行过程我们要知道，它分为两个步骤：一、预解析，它又划分为两种：变量预解析(变量提升) ：指的是把所有变量声明提升到当前作用域的最前面，这里不提升赋值操作函数与解析(函数提升)：指的是把所有函数声明提升到当前作用域的最前面，这里不提升赋值操作这里的概念不清楚不重要，下面有实际代码例子更好的帮助理解。二、代码执行拿到一个js代码，首先我们就得做预解析，以致于帮助我们自己写js，我开始
2020-07-14 11:30:06
206
原创 关于字体颜色渐变
关于文字颜色渐变处理，这样会使字体给人的可观性更强，下面介绍怎么让它变成好看有颜色的字体。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti
2020-07-13 18:58:08
925
2
原创 关于文字阴影和盒子阴影
在做一些项目时，会利用阴影来让页面变得更加优美，但这个东西，用得好就是锦上添花，用得不好那就是雪上加霜；今天主要写写关于它的用法。首先是文字阴影：text-shadow: h-shadow v-shadow blur color;其中：h-shadow: 必需，指水平阴影的位置，可以是负值，为负值时阴影是向左移动；v-shadow: 必需，指垂直阴影的位置，可以是负值，为负值时阴影是向上移动；blur: 可选，模糊的距离；color: 可选，阴影的颜色。一个元素的样式属性text-shado
2020-07-13 16:54:46
526
原创 聊天气泡制作
制造聊天气泡，准备一个div类名fa，如下代码： .fa { margin: 100px auto; width: 80px; height: 40px; border: 1px solid #000; position: relative; /* overflow: hidden; */ } .fa::before {
2020-07-13 10:43:32
327
原创 三角形制作
关于小型三角形制作，在项目中，我们会用到三角形定位到矩形盒子上就会让盒子产生倾斜效果以达到想要的目的。首先三角形代码如下：div { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #f00; }效果如图：制作左三角形，注意，这里不是直接让三角形旋转，而是让它的大小变得与定位的父盒子一样高度，**相当于上面三角形的一半，**代码如下：.
2020-07-13 10:00:34
294
原创 弹性布局flex
关于弹性布局flex的注意事项设置了弹性布局后display:flex;其子元素的浮动float、clear、和vertical-align会失效。在没有设宽高的盒子加弹性布局后，会影响默认盒子的宽高度。
2020-07-13 08:40:20
171
原创 关于精灵图比例缩小
我们需要在原精灵图的基础下做出比例缩小或放大，取决于一个属性：background-size**例如：有一张精灵图的像素是400*400，我们需要将它缩小1倍，那么可以用以下语句：background: url(../images/splite.png) no-repeat -80px;width: 15px;height: 15pxbackground-size: 200px;注意：-80px指缩小后精灵图中图标位置，原精灵图位置应为**-160px**，宽度高度亦是如此，这里是等比例缩小
2020-07-12 09:41:39
2120
1
原创 移动端的文字渐变颜色
关于移动端文字标题渐变主要有以下代码构成： -webkit-background-clip: text; color: transparent; background: linear-gradient(90deg, #45CAFF,#1471FB);效果如图：
2020-07-11 15:32:42
388
原创 关于z-index层级关系
重要：层级：z-index；使用条件--------除了定位的static以外，其它定位都可以触发这个属性；浮动、标准盒子无属性；使用场景及注意事项：1.默认不设值后来的盒子居上(上层)；2.父亲设置了z-index*子级无法放在父级下方(无论子级的z-index为何值)；**拼爹效应：其中一个父级小于另一个父级，那么前者子级的z-index无论为何值都不会超过另一个父级的子级的层级；关于z-index层级不起效果的问题：元素本身有浮动；没加定位。有层级效果时注意hover使用在
2020-07-08 12:18:01
938
原创 css定位
定位的方式有：1.position: static;默认值，意为不定位，不影响周边及原盒子；2.position: relative;相对定位，相对自身做位置偏移，会保留原本盒子位置，不会脱离文档流；3.position: absolute;绝对定位，相对body或带有相对定位的盒子作位置偏移，会脱离文档流，不会保留原有盒子位置；4.position: fixed;固定定位...
2020-07-08 08:53:37
444
原创 标签显示模式
标签显示模式有三种：1.块级标签：div、p、h1、ul、li、form等标签，水平垂直方向都具有内外边距；2.行内(内联)标签：span、a等标签，只有水平方向具有内外边距；3.行内块标签：img、input等标签，水平垂直方向都具有内外边距；行内标签只能放文本或其它行内标签，不能放块级标签(a标签除外)。★p标签不能放div等块级标签；★a标签可以放div等块级标签；...
2020-07-04 18:40:59
384
原创 浮动使用及清除浮动
浮动：让元素脱离文档流，不受父盒子限制；浮动元素的宽高不会撑大父盒子(在父盒子无高度情况下)。浮动元素不会遮盖文字部分，文字会围绕浮动元素；浮动目前功能：1.清除图片之间空白间隙；2.行级元素设宽高。使用场景多是宽高一致的元素整齐排列。清除浮动的方法：1.给浮动元素的父盒子加overflow: hidden;2.在浮动元素最后加样式或类clear: both;3.利用伪元素清除浮动：clearFloat::after { content: ""; clear: both; d
2020-07-04 12:04:58
133
原创 关于盒子外边距合并
边距合并，即为当父盒子里的子盒子给它一个margin值时，子盒子的移动会影响父盒子一起移动：这里当子盒子给了margin-top: 20px时，没有达到预想效果，使得与父盒子分离并距离20px。解决方法：一、给父盒子加上overflow: hidden;二、给父盒子加padding: 1px;目的是让子盒子能顺利掉下来，当然这是需要内边距时再使用；三、给父盒子加border: 1px solid #ccc;目的跟二一样是为了撑大盒子，使子盒子顺利与父盒子分隔，当然这是需要边框时再使用。综上建议
2020-07-02 17:17:21
391
原创 关于css搜索框制作
搜索框制作有二种方案：思路：都是通过一个div包含input标签，使得宽高一致。这里div、input都要使用怪异盒子box-sizing: border-box;从而让内边距不影响整个盒子大小。第一种：通过给div设置背景颜色，利用padding内边距使input盒子向下压缩从而显示边框为padding值的大小。代码如下：第二种：通过给div设置边框代码如下：建议使用第二种写法更简便。...
2020-07-02 16:39:17
1946
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人