2021年02月_一颗不甘坠落的流星

原创【Web】localStorage 和 sessionStorage 用法

localStorage：用于存储持久数据，除非用户手动将其从浏览器中删除，否则数据将终身存储。即使用户关闭窗口或选项卡，它也不会过期；sessionStorage：用于存储临时会话数据，页面重新加载后仍然存在，关闭浏览器选项卡时数据丢失

2021-02-26 13:50:52 212

原创【ES6】Map 映射

文章目录Map 创建的意义思考一个问题知识点分析代码Map 数据结构常用方法1. 添加：`add()`2. 删除：`delete()`3. 判断：`has()`4. 清除：`clear()`5. 遍历：`forEach()`6. 遍历：`for...of`7. 长度：`size`Map 创建的意义思考一个问题下面输出的结果是什么？var obj = {};var a = {name:'Jack'};var b = {name:'Rose'};obj[a] = 100;obj[b] = 2

2021-02-26 09:29:42 376

原创【ES6】Set 集合

文章目录Set 数据结构常用方法1. 添加：`add()`2. 删除：`delete()`3. 判断：`has()`4. 清除：`clear()`5. 遍历：`forEach()`6. 遍历：`for...of`7. 长度：`size`Set 数据结构ES6新增语法迭代器结构的数据被称之为：字典数组语法：new Set()可以在实例化的时候，传递一个数组数组里面的每一个数据就是 set 数据类型的每一个数据没有索引const s = new Set(['hell

2021-02-25 23:44:19 193

原创【AJAX】实现登录验证·教程

效果图：HTML文件<!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">

2021-02-24 18:58:57 1802

原创【Web】跨域请求

文章目录同源策略实现一个跨域请求JSONPscript 标签的本质配置代理正向代理反向代理同源策略同源策略是由浏览器给的浏览器不允许我们向别人发送请求，只能向自己的服务器发送请求当我们向别人的服务器发送请求的时候，就会被浏览器阻止了什么是“别人的服务器”？当请求协议/域名/端口号有任意一个不同的时候，那么就算是别人的服务器这个时候就会触发同源策略我们管触发了同源策略的请求叫做跨越请求实现一个跨域请求有的时候我们是需要实现跨域请求的我们需要多个服务器给一个页面提供数据那

2021-02-23 21:21:33 1257 1

原创【前端】AJAX 简解

文章目录AJAXAJAX的使用创建一个AJAX对象配置链接信息发送请求AJAX请求AJAX状态码readyStateChangeresponseText使用AJAX发送请求时携带参数发送一个带有参数的get请求发送一个带有参数的post请求封装AJAX确定一下使用的方式封装AJAXAJAX全名async javascript and xml是前后台交互得到能力也就是我们客户端给服务端发送消息的工具，以及接受响应的工具是一个默认异步执行机制的功能AJAX的使用在js 中有内置的构造函数来创

2021-02-23 21:19:54 187

原创【系统】实现简单注册登录功能

文件夹路径图code（总文件夹）public（HTML文件夹）cart.html（登录成功所跳转的页面）login.html（登录页面）register.html（组成页面）login.php（实现登录功能）register.php（实现注册功能）connect.php（封装需要反复用到的信息）HTML文件cart.html 文件代码<!DOCTYPE html><html lang="en"><head> <m

2021-02-23 17:43:25 6801

原创【Web】Cookie 用法

cookie 是一个以字符串的形式存储数据的位置每一个HTTP请求都会在请求头中携带cookie到服务端每一个HTTP响应都会在响应头中携带cookie到客户端也就是说，cookie是不需要我们手动设置的，就会自动在客户端和服务端之间游走的数据我们只是需要设置下cookie的内容就可以了

2021-02-22 19:12:39 1270

原创【Web】HTTP 协议简解

- HTTP/1.0：每一对HTTP请求和响应都需要打开一个单独的TCP连接- HTTP/1.1：主要实现了对TCP连接的复用：- 引入了持久连接的概念，通过设置Connection头部为keep-alive的方式可以让TCP连接不会关闭- HTTP/2：主要实现了多个请求的复用：- 通过将HTTP消息拆分为独立的帧，进行交错发送，实现了在同一个连接上并行多个请求- 对HTTP头部进行了二进制编码，实现了多个复用功能，不再语义可读- 还实现了Header压缩、服务端主动推动、流优先级等能力

2021-02-22 17:48:40 238

原创 MySQL简解

MySQLMySQL是一个数据库的名称和PHP合作的比较好的数据库前端向后端索要数据，后端就是去数据库中查询数据，返回给前端接下来就聊聊使用PHP操作数据库MySQL 是最流行的关系型数据库管理系统（非关系型数据库简略介绍）关系数据库管理系统(Relational Database Management System)的特点1.数据以表格的形式出现2.每行为各种记录名称3.许多的行和列组成一张表单4.若干的表单组成database5.主键：主键是唯一的。一个数据表中只能包含一个主键

2021-02-08 22:13:35 148

原创 PHP简解

为什么学PHP？PHP是一门后端语言做前端开发为什么要学习一个后端语言呢？目前市场上的需求，要求前端人员掌握一个后端语言方便和后端开发人员进行交互PHP基础语法我们一定要知道，PHP是另一个语言了，不再是我们的html、JavaScript了一个别的语言就有人家语言的规则PHP文件我们在写JavaScript的时候，是一个.js文件我们在写html的时候，是一个.html文件PHP的代码写在一个.php后缀的文件中PHP文件的书写所有的PHP代码都要写在一个PH

2021-02-07 21:04:50 179

原创服务器简解

文章目录服务器的简单理解服务器的认识什么是服务器？服务器访问方式传输协议域名端口号再看百度服务器的简单理解我们平时开发的时候会经常用到数据库但是你总不能直接把数据库丢到用户的电脑上一个是太大，一个是不安全所以我们要把数据库放在网络从另一端（远程）所以当前端人员向后端人员索要数据的时候需要网络我们也不可能把页面放在用户电脑上所以用户也是需要网络向前端人员索要页面服务器的认识我们现在的市场上有一些常见的服务器可以承载内容目前比较常用的就是Apache和Tocat在这讲解的就是Apa

2021-02-06 20:14:02 346 1

原创【前端】手写数字时钟·教程

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：通过date获取时间通过间隔定时器setInterval动态获取时间间隔定时器setInterval间隔设置为1000毫秒（1秒）获取一次时间为了样式好看，我们这是用数字图片来代替数字的源代码：HTML部分 <div id="div"> <img src="img/0.png" /> <img src="img/0.png" /> 时 <img src="img

2021-02-04 19:40:35 1487 3

原创【前端】手写打字游戏·教程

文章目录效果图：需求分析：源代码：效果图：需求分析：在char这个div里面显示要输入的字母，大写在result这个div里面时时显示正确率，比如98%给文档绑定按键事件如果输入的内容和char里面一致，显示正确动画：animated zoomIn,并更换输入的字母如果输入的内容和char里面不一致，显示错误动画：animated shake error不管是正确还是错误都时时更新result里面的正确率源代码：HTML部分<mian> <div

2021-02-04 17:41:22 671 1

原创【前端】实现图片轮播·教程

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：页面打开的时候，img中显示第一福图，order里面显示第一幅图的进度，info显示第一幅图的信息初始时顺序点击播放点击自动轮播按钮，变成循环播放模式，未开始播放点击prev按钮，向左自动循环播放点击next按钮，向右自动循环播放点击顺序点击按钮，变成顺序播放模式点击prev按钮，img里面变成前一张图点击next按钮，img里面变成后一张图源代码：HTML部分<div id="controls"&gt

2021-02-04 15:52:33 542 1

原创【前端】实现放大镜效果·教程

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：鼠标移入小盒子里面，大盒子显示,mask显示鼠标移出小盒子，大盒子隐藏，mask隐藏鼠标在小盒子里面移动，mask跟随鼠标移动，鼠标在mask中间mask不能超出小盒子范围鼠标在小盒子里面移动，大盒子显示大图的相应部分源代码：HTML部分<div id="box" > <div id="small"> <img src="001.jpg

2021-02-04 11:07:36 540 2

原创【前端】实现图片无缝滚动·教程

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：实现无缝滚动源代码：HTML部分<div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l

2021-02-04 09:30:26 772 1

原创【前端】实现旋转木马轮播图·教程

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：页面打开的时候，每个li缓动到相应位置鼠标移入slide，箭头显示鼠标点击prev按钮，显示上一张鼠标点击next按钮，显示下一张源代码：HTML部分<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#">

2021-02-03 21:17:03 667

原创【前端】手写轮播图·教程2

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：根据图片数量生成对应的小圆点克隆第一个li，放到ul的最后面最开始显示第一个li,点亮第一个小圆点点击left按钮，看上一张，点亮小圆点点击right按钮，看下一张，点亮小圆点点击小圆点，看相应图片，点亮小圆点可以自动轮播鼠标移入，停止轮播鼠标移出，开始轮播源代码：HTML部分<div class="all" id='all'> <div class="screen" id="sc

2021-02-03 19:46:34 409

原创【前端】手写轮播图·教程1

文章目录需求分析：效果图：源代码：所用图片：需求分析：根据图片的数量生成相同的小圆点，类名是slider-ctrl-con显示第一个图片，同时第一个小圆点高亮，类名是:slider-ctrl-con current;点击prev显示上一张图片，同时对应小圆点高亮点击next显示下一张图片，同时对应小圆点高亮点击小圆点，切换到对应的图片，同时小圆点高亮可以自动轮播（每隔3000ms自动切换到下一张）鼠标移入slider盒子，停止轮播鼠标移出slider盒子，继续轮播效果图：源代码

2021-02-03 10:33:23 508 1

原创【前端】手写星级评分·教程

文章目录需求分析：效果图：源代码：所用图片：需求分析：鼠标移入哪个星星，哪个星星及其前面的星星都高亮同时显示相应文字鼠标点击哪个星星，哪个星星及其前面的星星都高亮鼠标移出 ul ，上次点击的星星及其前面的星星都高亮鼠标移出 ul ，如果没有点击过，则所有星星都暗效果图：源代码：HTML部分<ul id="ul1" ><li class="defaul

2021-02-02 19:12:08 1019 3

原创【前端】手写手风琴·教程

文章目录效果图：源代码：效果图：未展开时的效果鼠标悬浮在其上的效果源代码：HTML部分：<div> <ul id="box"> <li></li> <li></li> <li></li> <li&g

2021-02-02 11:52:45 926 2

qq_45677671的博客