Edasi-CSDN博客

原创仿飞书背景蒙层+小眼睛效果

点击进入飞书由于我没有参照原这部分的方法只是自己想出来的所以归纳了以下分析分析：图片鼠标移入移出产生了几个效果1.鼠标移入后产生背景蒙层2.鼠标移入后产生产生小眼睛效果（由小变大）3.鼠标移入后和移出后图片以下框子产生阴影效果(但图片部分没有阴影效果)4.鼠标移入和移出有淡入淡出效果问题点：1.眼睛变大，淡入淡出效果2.蒙层插在哪里？3.鼠标移到上面的图片但是上面没有阴影反而下面产生阴影如果轻松想出以上问题那么就出门左拐把~~这是我完成后的效果整体来说是一个很简单的过程&..

2020-09-18 17:13:08 645

原创 React入门

一、引入REACT1.通过CDN直接引入react依次加载的react核心API部分、添加至DOM的方法、

2020-09-17 20:54:05 161

原创 js轮播图

前几天准备看看轮播图的时候找到了这个版本的轮播图这个代码逻辑十分清晰，也很简单我对代码进行了一丢丢加工，可以根据插入图片数量的多少进行增加元素节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt

2020-08-28 18:09:41 181

原创 js小知识点(一)

数据的比较在实战中经常会遇到数据之间的比较判断所以我有时就会忘掉了原则，将引用值与引用值进行比较原则上引用值是不能和引用值进行比较的结果为false结果为true引用值会开辟一个新的空间所以比较不会相等而通过c.f和d.f比较的是基础值所以相等...

2020-08-28 17:55:58 122

原创 JS基础整理之数据类型

JS的数据类型在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。其中：基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。引用类型：object。里面包含的 function、Array、Date。数据类型的内存图栈：是有结.

2020-08-19 11:26:54 134

原创 ES5新特性

一、简介ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ES5还引入了一个语法的严格变种，被称为”严格模式(strictmode)”。二、浏览器支持Opera 11.60Internet Explorer 9*//ie10才支持严格模式可以用es5shim处理兼容问题Firefo

2020-08-19 10:24:13 1340

原创关于vue-router的两种模式以及原理

一、简介众所周知vue-router 有两种模式一种是hash模式一种是history模式首先是hash模式hash ——即地址栏URL中的#符号比如这个URL：http://www.baidu.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。history ——利用了HTML5 History Interface 中新增的pushState() 和r

2020-08-13 15:46:21 3290

原创 MVC，MVP，MVVM的区别

看了很多版本的讲解让我越来越糊涂，最后总结还是阮一峰老师的比较生动容易理解（不过我看了看老师文章的评论下面也有很多跟我一样很多不同的看法）MVC很多框bai架都是以方便实现MVC模式而设计的，比du如Struts，spring。在阮一峰老师的文章里看来 MVC是单向的也就是我们可以通过视图对页面进行控制，当进行一些逻辑时通过控制器来将模型部分的数据改变也就是这样当然也可以是这样直接通过控制器控制MVP关于MVP老师就讲得很通俗易懂了这里我直接将老师讲的搬过来MVV

2020-08-13 10:25:51 158

原创 vue篇什么是vue

一、什么vue　　（一）vue渐进式JavaScript框架　　（二）特点：数据进行驱动(mvvm)　　（三）两大核心：虚拟DOM，双向绑定(一)那么什么是渐进式框架呢简单的来讲渐进式框架就是你用什么就可以拿什么在上面和张图里可以看到vue的一些核心功能，但是你同样不必引入所有的模块进行工作，你可以只用v-model等一些简单的指令进行使用，vue不强求你一次性接受并使用它的全部功能特性(二) 数据进行驱动(mvvm)vue是如何用数据进行驱动的呢？vuejs帮我们封装了数据和do

2020-08-13 08:50:50 278

原创 GIT指令

检查git版本git --version查看git相关命令git --help查看当前的git配置信息git config --list查看git用户名git config user.name-查询⽬前git所使⽤的使⽤者名称git config --global user.name 名称注： --global 表示全局，没有–global表示只设置在当前项目中的配置查看git邮箱git config user.email-查询git所使⽤的emailgit config --

2020-08-10 08:25:27 120

原创注册框demo

之前感觉自己js部分的代码练习太少了前段时间恶补了一下后面还有一些demoHTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册demo</title&

2020-07-24 11:32:37 228

原创 webpack完整配置

这里简单学习了一下webpack的配置首先是webpack.development.jsconst path=require('path');const StyleLintPlugin=require('stylelint-webpack-plugin');const HtmlWebpackPlugin=require('html-webpack-plugin');module.exports={ mode: 'development', output: { filename:

2020-07-24 11:02:49 233

原创 H5美团小demo

没有实现具体的功能主要是学习了一下灵活布局代码奉上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>美团网</title> <link rel="s.

2020-07-24 10:46:48 962

原创 MySQL忘记密码重置方法

在学习node要使用mysql的时候因为太久没用忘了mysql的配置导致密码整忘记了结果在网上搜索了很久如何把密码找回都没有成功终于在网上找到了一篇可以拯救我的文章首先一定要知道你的mysql是什么版本的mysql是最近在官网下载的一般就是8.0的老版本的就是5.7的MySQL 8.0.15忘记密码重置方法1.打开命令窗口cmd，输入命令：net stop mysql，停止MyS...

2020-05-06 10:39:58 406 1

原创 ajax+node前后端交互实战（含详细代码以及注释）

先看看完成后效果点击登录后进入登录页面账号错误或者无账号点击注册图为登录成功后页面注册页面点击修改或保存后出现编辑页面这里是数据库里的两张表上面一张是后台管理表下面一张是登录的账号和密码信息添加了cookie防止直接进入这里是主要文件包括一些文件作用的描述ajax封装代码/** *如果是默认参数就可以不传 * @param method 请求的方法 ...

2020-05-05 21:25:03 981 2

原创 HTTP服务器 ---学习笔记（3）

HTTP前置知识1 什么是url？统⼀资源定位符是对可以从互联⽹上得到的资源的位置和访问⽅法的⼀种简洁的表示，是互联⽹上标准资源的地址。互联⽹上的每个⽂件都有⼀个唯⼀的URL，它包含的信息指出⽂件的位置以及浏览器应该怎么处理它2 url包含的内容（这里需要重点理解）url的形式是这样的： http://nodeing.com/cloud/search?q=html 其中，http://...

2020-05-05 15:05:44 240

原创什么是NPM---学习笔记（2）

什么是NPMNPM的全称是Node Package Manager，是⼀个NodeJS包管理和分发⼯具，这⾥要搞清楚包的概念，通俗的说，包就是具有⼀定功能的⼯具(软件)，本质上呢这些包就是很多⽂件的集合，例如下图就是⼀个包：使用NPM1 初始化项⽬npm init（这条命令运⾏后，会在项⽬⽂件夹下⽣成⼀个package.json的⽂件，记录⼀些关于项⽬的信息,如果加上 -y 参数...

2020-05-05 11:36:33 269

原创 ajax+node前后端交互学习笔记（1）

大致理解前后端交互的概念当你去餐馆吃饭的时候，坐下后服务员会带着⼀个菜单过来，问你需要点什么菜，这个时候你浏览了菜单上的菜，把想吃的菜告诉服务员，服务员把你点的菜拿到后台，后台根据你点的菜名，逐⼀完成，菜做完后叫服务员给你上菜，就这么⼀个场景其实和我们web开发中的前后台交互竟是如此相似，我们来看看哪些点是相似的：1 菜单—浏览器⻚⾯，你看到的菜单如果在web开发中，就相当于⽤户看到的...

2020-05-05 11:29:57 288

原创 GET和POST的区别

一、前言：HTTP定义了与服务器交互的不同方法，最常用的方法有四种Put，Delete、post，get，即增删改查。1.Get，它用于获取信息，它只是获取、查询数据，也就是说它不会修改服务器上的数据，从这点来讲，它是数据安全的，而稍后会提到的Post它是可以修改数据的，所以这也是两者差别之一了。2.Post，它是可以向服务器发送修改请求，从而修改服务器的，比方说，我们要在论坛上回贴、在博客...

2020-04-22 10:16:39 205

原创 XMLHttpRequest初体验

谈到ajax就不得不谈到 XMLHttpRequest因为XMLHttpRequest 是 AJAX 的基础作用:XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。创建XMLHttpRequest对象：try { xhr = new XMLHttpRequest(); //新版本浏览器} catch ...

2020-04-22 10:12:43 185

原创 ES5中提及不多的几个数组方法(Array.forEach...)

forEachlet arr = [{ title: 'aaa', read: 100, hot: true },{ title: 'bbb', read: 100, hot: true },{ title: 'ccc', read: 100, hot: true }]arr.forEach((value, index, arr) => { //括号里面是个回调函数 ...

2020-03-30 10:13:48 166

原创 canvas贪吃蛇

html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...

2020-02-21 17:49:40 199

原创 canvas globalCompositionOperation属性

详细效果主要看图片目标图像：前一个图像源图像：后一个图像 source开头，后一个覆盖前一个destination开头，前一个覆盖后一个var cans1 = document.getElementById('canvas1');if(cans1.getContext){ var ctx1 = cans1.getContext('2d'); ctx1....

2020-02-19 15:21:40 1036

原创 rgba以及canvas渐变小技巧

RGBA说明：RGBA(R,G,B,A)取值：R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数 | 百分数A：Alpha透明度,取值0~1之间。由于A是表透明度的var draw = document.getElementById('canvas');if (draw.getContext) { var ctx = draw.getCon...

2020-02-17 22:49:53 462

原创原生JS扫雷

作为继贪吃蛇练手后的第二个练习五子棋着实有点难，由于训练不多，主要是学习的视频教学不多说了直接看效果发代码html代码在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...

2020-02-17 10:53:40 156

原创事件

事件捕获–由父节点向子节点捕获事件冒泡–由子节点向父节点冒泡先捕获后冒泡（中间还有一个处于目标阶段）<html><body> <div></div></body></html>除上述代码外还有document捕获顺序：document --> <html> --> <body...

2020-02-12 15:25:04 152

原创 DOM2,DOM3,XML以及它与HTML的区别

首先要了解的是DOM1级主要定义是HTML和XML文档的底层结构，而DOM2和DOM3级则是在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性DOM2级和DOM3级的目的在于扩展DOM API，以满足操作XML的所有需求那么解释一下什么是XML呢什么是 XML？XML 指可扩展标记语言（EXtensible Markup Language）。XML 是一种很像HTML的...

2020-02-11 15:54:15 138

原创 DOM相关知识点（2）

首先，DOM的node类型可分为：Node.ELEMENT_NODE(1)Node.ATTRIBUTE_NODE（2）Node.TEXT_NODE（3）Node.CDATA_SECTION_NODE（4）Node.ENTITY_REFERENCE_NODE（5）Node.ENTITY_NODE（6）Node.PROCESSING_INSTRUCTION_NODE（7）Node.CO...

2020-02-10 22:47:43 122

原创 DOM相关知识点（1）