- 博客(23)
- 收藏
- 关注
RSS订阅原创 实现自己的Promise库
(function(window){ const PENDING='pending' const RESOLVED='resolved' const REJECTED='rejected' //Promise构造函数 //excutor执行器函数 function Promise(excutor){ const that=this that.status=PENDING//状态 that.data= undef
2020-08-20 19:54:51
155
原创 Promise那些事
Promise是ES6中提出的一种处理异步操作的方式，可以有效的解决“回调地狱”的问题promise的三个状态：pending：待定fulfilled：成功rejected：失败状态的改变：pending=>fulfilled,pending=>rejected只有这两种改变情况切每个promise对象只能改变一次。一个简单的promise例子：使用then输出成功的数据还是失败的数据const p = new Promise((resolve,reject)=>{
2020-08-17 18:57:38
202
原创 js数据类型及判断方法
js的数据可分为两大类：1）基本数据类型：String,Number,Boolean,Null,Undefined,Symbol(ES6新加入)2）引用数据类型：Object,Array,Function由于js是一门弱类型语言，变量的类型根据所赋值的类型而变化例：let b=1;//b为number类型let c='你好';//c为string类型let d=true;//d为Boolean类型let e=null;//e为null类型let f=function(){}//f为函数.
2020-08-11 20:05:34
423
原创 Js原型链继承ES5和ES6方法
继承是几乎所有编程语言中都有的一个概念，它可以将多次使用的变量或方法放在父类或父函数身上，让所有的子类去继承父类的一些构造函数或方法，可以达到减少代码和内存使用的目的。ES5原型链继承function Parent(name,age){ this.name=name; this.age=age;}Parent.prototype.be=function(){ console.log('我是原型上的方法');}function Children(name,age,he
2020-08-10 20:34:05
282
原创 js数组扁平化处理3种常用方法
数组扁平化是将二维甚至多维数组转化为一维数组的过程例：将[[1,2,3],4,5,[6,7,[8,9]]]这个多维数组转化为一维数组ES5+递归var arr=[[1,2,3],4,5,[6,7,[8,9]]];function bianping(arr){ var res=[]; for(var i=0;i<arr.length;i++){ var item=arr[i]; if(Array.isArray(item)){
2020-08-03 13:58:47
2558
2
原创 js数组去重3种常用方法
1. ES5方法：var arr=[3,5,7,2,3,4,6,7,8];function uniarr(arr){ var res=[]; for(var i=0;i<arr.length;i++){ var arrItem=arr[i]; if(res.indexOf(arrItem)=== -1){ res.push(arrItem); } } return res;}console
2020-08-01 15:32:11
1447
1
原创 js中call(),apply()和bind()的区别
call,apply和bind都是js中强制改变this指向的方法。具体用法以及差异如下：1. call()用法：call(this指向对象，参数1，参数2……)例：在直接调用方法时，this指向window使用call改变this指向后：this指向对象obj1call有参数传递时：参数依次用逗号排在对象后2. apply()用法：apply(this 指向对象，[参数1，参数2……])例同上：在直接调用方法时，this指向window使用apply改变this指向后
2020-08-01 14:51:45
233
原创 我实现了客户要求的五彩斑斓的黑！！！
在前端圈有这么个段子，说客户想要五彩斑斓的黑。？？？？五彩斑斓？？？还黑？？之前只是笑笑就过去了。。那么能不能实现呢，，，今天他来了！！！效果图:展示出来的效果颜色和光晕的颜色都是用c3写成的动画效果，由于不支持上传视频，就截了几帧的图片，有想要自己实现这个动画效果的，最后代码附上（超级简单）！动画的实现原理主要就是色相的反转和光晕模糊度的设置代码：html代码：<body> <div class="outer"> <div class
2020-07-06 22:10:03
1219
原创 SQL异常，触手可及
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘order’ at line 1今天在写后端SQL数据库语句操作时，突然报这个异常，我对比了之前写的表，一摸一样的语句，为什么只有这个报错其他都正常，在查阅一番资料后，终于发现：异常产生原因：因为我要操作的表是一个订单表，我就随手把表命
2020-06-30 18:04:54
452
原创 那些年我们用混的js和jQuery方法
原生js是前端必备的基础知识，而jQuery是为了更简单的获取Dom，操作Dom，完成js的功能的一个封装的js库，它可以让我们用更少的代码完成与原生js一样的功能，这里就出现了对Dom元素操作时，原生js的方法和jQuery库中封装的方法的名称是不一样的，js对象和jQuery对象的方法不能互用，但在实际操作中，有一些方法，会比较容易用混，以下就是我在实际编程中容易用混的几个方法一、innerHTML和html（），innerText和text（）innerHTML和innerText是js中Dom元
2020-06-07 16:42:08
568
2
原创 ES6对象字面量的增强写法
对象字面量的增强写法是ES6相对于之前版本的ECMAScript新加入的写法，可以使开发过程中的对象的操作变得更加简单一、对象的属性增强在ES5中对象是这样写的：<script> var obj={ name:'curry', age:18, height:1.98, } </script>而ES5在对象之前定义了属性值的时候需要这样写：<script&g
2020-06-02 16:27:52
399
原创 Vue分支循环结构
分支循环结构在编程中的地位不言而喻了，Vue也内置了分支循环的指令来使Vue编程变得简单而有趣一、分支v-ifv-elsev-else-ifv-show例如根据分数判断是优秀，良好，一般还是差将分支在dom元素中表现出来，最后渲染到页面的只有符合判断条件的dom<div class="app"> <div v-if='msg>=90'>{{msg}}优秀</div> <div v-else-if='msg<
2020-05-25 16:24:27
253
原创 Vue实现Tab栏切换（v-for渲染）
在用数据渲染前端页面的几种方式下，原生js和jQuery都需要操作DOM，生成元素，添加元素等一系列操作，而Vue只需要v-for指令就轻松解决。实现功能：有标题和图片两部分组成，点击相应的标题显示响应的图片，其他图片隐藏。实现效果:代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w
2020-05-19 09:30:59
7241
原创 Vue基础语法01
Vue是目前最好的国产前端渐进式框架，它与原生js和jQuery的最大区别就是Vue是直接操作数据来达到对页面的渲染，而原生js和jQuery都是操作Dom元素来渲染页面。Vue可以让开发人员“换一种思路”去开发前端页面。注意：在学习Vue之前，必须学好html。css。js的基础知识基本使用：插值表达式使用步骤：1）、需要提供标签用于填充数据注意： 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据2）、引入vue.js库文件注意：一定要先引入Vue文件 在使用Vue语法 因为
2020-05-17 12:11:47
180
原创 jQuery实现带本地存储的备忘录
前几天发了两篇关于本地存储和实现简单备忘录的两篇文章，但是那个备忘录一刷新页面或关掉浏览器再打开数据就不见了，那为何不把它俩结合一下，做一个不会丢失数据的web备忘录呢。所以，升级版2.0他来了！！！实现功能：实现备忘功能自动获取添加备忘时间自动统计已完成和未完成事件的数量勾选复选框，相应的事件会到已完成列表取消复选框，相应的事件会到未完成列表点击X号，响应的事件删除点击添加备忘按钮，输入框自动清空刷新页面或关闭浏览器，数据不会丢失（除非清理浏览器缓存）实现效果：html文件：
2020-05-10 14:11:07
472
2
原创 jQuery深拷贝和浅拷贝详解
在了解深拷贝和浅拷贝之前首先要明白数据在内存中是如何存放的在js中，数据可以分为基本数据类型（字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined））和复杂数据类型（对象(Object)、数组(Array)、函数(Function)）。在定义变量时，基本数据类型会存放在内存的栈中，而复杂数据类型会存放在内存的堆中，由栈中的名字指向队...
2020-05-07 20:51:30
528
原创 jQuery实现简单的Web备忘录
实现功能：添加备忘事件自动获取备忘时间在未完成事件中点击对号，相应的事件会走到已完成事件中在已完成事件中点击对号，相应的事件会消失实现效果：index.html文件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam...
2020-05-05 16:52:10
530
原创 web本地存储sessionStorage和localStorage
本地存储特性：1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage约5M、localStorage约20M4、只能存储字符串，可以将对象JSON.stringify() 编码后存储一、window.sessionStorage1、生命周期为关闭浏览器窗口2、在同一个窗口(页面)下数据可以共享3、以键值对的形式存储使用存储数...
2020-05-04 18:28:47
238
原创 原生js实现网页轮播图效果
轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图，轮播图也会自动播放图片。 6.鼠标经过，轮播图模块， 自动播放停止。此文章的代码...
2020-05-03 15:16:30
866
原创 CSS两大盒模型的区别
CSS中Box model分为两种，第一种是W3C的标准盒模型，另一种是IE的盒模型。1、content-box传统盒模型content-box 是W3C的标准盒模型模型，范围包括 margin、border、padding、content,并且 content 部分不包含border和padding。例如：首先设置一个宽和高都为100px的盒子div { heig...
2020-04-30 15:33:38
1192
原创 Flex弹性布局一文详解
Flex弹性布局是W3C在2009年提出的新的布局方式，内含的大量的属性，使其可以方便，有效，高适配，响应式的进行页面布局。是目前前端开发的一种重要的布局。一、简介Flex布局是对容器设置的一种布局方式。通过对容器进行display: flex;实现修改容器为Flex弹性布局。再通过一系列属性设置，达到对容器内的元素进行控制。二、容器（父元素）的属性flex-directionjust...
2020-04-23 15:45:08
530
原创 常用的css将元素垂直居中的6种方法
常用的css将元素垂直居中的方法1. 使用line-height将单行文本垂直居中设置line-height等于height，可使单行文本垂直居中例： div { height: 50px; width: 200px; border: 1px solid #ccc; }效果如下：加入line-h...
2020-04-20 18:08:47
4165
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人