1387809421166477_社区达人页

2023年01月

• 01.16 18:24:09
  发表了文章 2023-01-16 18:24:09

  浅谈Ajax请求中的GET,POST,PUT,DELETE,PATCH,OPTIONS

  浅谈Ajax请求中的GET,POST,PUT,DELETE,PATCH,OPTIONS 在日常的前后端交互，数据请求中最长用的就是Ajax，当然在面试时也经常会被问道请求的方式有哪些？分别什么不同？一般我们都会回答GET请求和POST请求，但其实在后端配置接口时，请求方式不仅这两种，还会有PUT，DELETE,PATCH等，当然我们在开发的时候偶尔也会遇到接口要求使用这几种方式进行请求，下面我们就来讲一讲这几种方式分别有什么不同。 首先先要了解http定义与服务器进行交互的方式，其中基本的有GET,POST,PUT,DELETE，PATCH是后增的方式。同时还要知道URL代表的是 统一资源

  
• 01.16 18:22:42
  发表了文章 2023-01-16 18:22:42

  史上最全HTML实体字符整理

  HTML字符实体 做开发的小伙伴们都知道，HTML有一些预留字符，浏览器在解析时不能正确的显示，这个时候我们就需要使用字符实体进行替换。同时，有一些键盘上找不见的符号我们也可使使用字符实体进行替换，下面是我整理的几类我们经常遇到的字符。 1.常见的HTML预留字符 字符 实体编号 实体名称 描述 空格     < 小于号 < < | 大于号 | > | > & | 和号 | & | & " | 引号 | " | " ’ | 撇号 | ' (IE不支持) | ' ￠ | 分 | ¢ | ¢ £ |
• 01.16 18:21:19
  发表了文章 2023-01-16 18:21:19

  HTML5的学习之新增元素

  HTML5的学习之新增元素 这篇文章学习一下HTML5新增的元素及浏览器的兼容 标签 描述 <article> 定义页面独立的内容区域。 <aside> 定义页面的侧边栏内容。 <bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。 <command> 定义命令按钮，比如单选按钮、复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框，比如提示框 <summary> 标签包含 details 元素的标题 <figure> 规定独立的流内容（图像、图
• 01.16 18:20:13
  发表了文章 2023-01-16 18:20:13

  HTML5的学习之表单元素

  HTML5的学习之表单元素 这篇博客我们继续对HTML5进行学习,主要讲解HTML5的表单元素相关的内容。 1.input元素新增的类型 type类型 描述 color 选色板 month 月份 week 周 date 日期 datetime 多数不兼容 datetime-local 日期加时间 time 时间 email 检测邮箱地址 number 数字 range 范围 调节音量 进度条 search 搜索 tel 电话 不支持 url 地址 检测 HTML代码： <form> <input type="text" autofocus placehol
• 01.16 18:18:59
  发表了文章 2023-01-16 18:18:59

  HTML5的学习之媒体元素

  HTML5的学习之媒体元素 前几篇博客我们将HTML5中的canvas画布元素进行了讲解，接下来开始学习其他的HTML5新元素。这篇就博文主要讲解HTML5中的媒体元素 <video> 和 <audio> 。 HTML代码： <!-- 视频 --> <video src="../js练习/英雄联盟.mp4" controls autoplay></video> <video controls> <source src="../js练习/英雄联盟.mp4" type="
• 01.16 18:16:48
  发表了文章 2023-01-16 18:16:48

  HTML5的学习之canvas画布(五)

  HTML5的学习之canvas画布 canvas其他剩余的方法和属性。 转换 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 图像绘制 方法 描述 drawImage() 向画布上绘制图像、画布或视频。 createImageData() 创建新的、空白的 ImageData 对象。 getImageData() 返回 ImageData 对象，
• 01.16 18:15:55
  发表了文章 2023-01-16 18:15:55

  HTML5的学习之canvas画布(四)

  HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制"被填充的"文本。 strokeText() 在画布上绘制文本（无填充）。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码： <canvas id="my_canvas"&
• 01.16 18:14:41
  发表了文章 2023-01-16 18:14:41

  HTML5的学习之canvas画布(三)

  HTML5的学习之canvas画布 上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。 1.矩形 方法 描述 rect() 创建矩形。 fillRect() 绘制"被填充"的矩形。 strokeRect() 绘制矩形（无填充）。 clearRect() 在给定的矩形内清除指定的像素。 2.圆形 方法 描述 arc() 创建弧/曲线（用于创建圆形或部分圆）。 arcTo() 创建两切线之间的弧/曲线。 ellipse() 创建椭圆。 3.路径 方法 描述 fill() 填充当前绘图（路径）。 stroke() 绘制已定
• 01.16 18:13:46
  发表了文章 2023-01-16 18:13:46

  HTML5的学习之canvas画布（二）

  HTML5的学习之canvas画布 这篇文章我么继续学习canvas画布。学习学习canvas画布线条的颜色，渐变，阴影等属性和方法。 属性 1.颜色属性 属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。 strokeStyle 设置或返回用于笔触的颜色、渐变或模式。 2.阴影属性 属性 描述 shadowColor 设置或返回用于阴影的颜色。 shadowBlur 设置或返回用于阴影的模糊级别。 shadowOffsetX 设置或返回阴影与形状的水平距离。 shadowOffsetY 设置或返回阴影与形状的垂直距离。 3.线条样式属性 属性 描述 lineC
• 01.16 18:12:48
  发表了文章 2023-01-16 18:12:48

  HTML5的学习之canvas画布(一)

  HTML5的学习之canvas画布 前面几篇博客我们一直在讲如何使用canvas绘制一下图片，但是没有讲过canvas如何使用，都有哪些属性，方法等。今天我们就来讲一讲canvas的有关属性和方法。 HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。 元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 接下来我们来学习一下这个对象的属性和方法，用于在画布上绘制文本、线条、矩形、圆形等等。 HTML代码： <
• 01.16 18:10:35
  发表了文章 2023-01-16 18:10:35

  教你如何用Canvas绘制整身的哆啦A梦

  教你如何用Canvas绘制整身的哆啦A梦 上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图： 在这里插入图片描述 HTML代码： <canvas id="my_canvas"></canvas> <canvas id="my_canvas2"></canvas> 1 2 CSS代码： * { margin: 0; } #my_canvas {

  
• 01.16 17:24:27
  发表了文章 2023-01-16 17:24:27

  教你如何利用canvas画布绘制哆啦A梦

  订阅专栏 教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图： HTML代码： <canvas id="my_canvas"></canvas> 1 CSS代码： canvas { display:block; margin:0 auto; background: pink } 1 2 3 4 5 JavaScript代码： var oCanvas = document.getEleme

  
• 01.11 18:21:17
  发表了文章 2023-01-11 18:21:17

  详细解析JavaScript中的全局属性和方法

  详细解析JavaScript中的全局属性和方法 今天来补充JavaScript中的最后一部分内容，JavaScript中的全局属性和方法(函数)。 1.全局属性 // 属性 // Infinity 代表正的无穷大的数值。 // 在Javascript中，超出 1.7976931348623157E+103088 的数值即为Infinity，小于 -1.7976931348623157E+103088 的数值为无穷小。 var num1 = 1.7976931348623157E+103088; var num2 = -1.79769313486
• 01.11 18:18:26
  发表了文章 2023-01-11 18:18:26

  详细解析Ajax的使用之向服务器发送GET请求

  详细解析Ajax的使用之向服务器发送GET请求 上篇文章讲的如何使用Ajax发送get请求，这篇文章说如何使用Ajax发送post请求。 HTML代码： &lt;h1&gt;ajax的post请求&lt;/h1&gt; &lt;button id=&quot;btn&quot;&gt;发送请求&lt;/button&gt; 1 2 JavaScript代码： var oBtn = document.getElementById(&quot;btn&quot;); // 1.初始化请求对象 var xhr; if (window.XMLHttpRequest) { xhr = new XML
• 01.11 18:13:43
  发表了文章 2023-01-11 18:13:43

  详细解析Ajax的使用之向服务器发送GET请求

  详细解析Ajax的使用之向服务器发送GET请求 前面一篇博客我们讲到了如何使用form表单像服务器发送请求，但是请求方式是同步的，效率太低，现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。 HTML代码： &lt;h1&gt;ajax的get请求&lt;/h1&gt; &lt;button id=&quot;btn&quot;&gt;获取数据&lt;/button&gt; &lt;p&gt;姓名：&lt;span id=&quot;user&quot;&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;年龄：&lt;span id=&quot;age&quot;&gt;&lt;/span&gt;&lt;/p&gt; 1 2 3 4 JavaScript代码： var oBtn =
• 01.11 18:11:00
  发表了文章 2023-01-11 18:11:00

  浏览器同步发送请求之form表单提交数据

  浏览器同步发送请求之form表单提交数据 上篇就文章我们讲到了同步和异步的区别，这次主要说一下在网页中如何提交同步的请求，答案就是通过form表单提交请求。 1.GET请求 HTML代码： &lt;form action=&quot;get.php&quot; method=&quot;get&quot;&gt; 账号：&lt;input type=&quot;text&quot; name=&quot;user&quot;&gt; &lt;br&gt; 密码：&lt;input type=&quot;text&quot; name=&quot;psw&quot;&gt;&lt;br&gt; &lt;input type=&quot;submit&quot; value=&quot;登录&quot;&gt; &lt;/form&gt; 1 2
• 01.11 18:07:55
  发表了文章 2023-01-11 18:07:55

  详细解析JavaScript的Ajax之同步和异步的区别

  详细解析JavaScript的Ajax之同步异步的区别 博客整理到这里基本上JavaScript的初级知识就整理完了，现在我们来说一下看JavaScript的最后一个知识点——Ajax。 （Asynchronous Javascript And XML） 即异步 JavaScript 和 XML，一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。 1.同步和异步 首先我们先来分析一下JavaScript的中的同步和异步的区别。 同步就是调用某个内容时，调用方得等待这个调用返回结果才能继续往后执行。(期间不可以执行其他的命令)。如图：

  
• 01.11 18:04:15
  发表了文章 2023-01-11 18:04:15

  详细解析cookie，sessionStroage和localStroage的区别

  详细解析cookie，sessionStroage和localStroage的区别 前面我们说到了JavaScript中的缓存对象，主要是cookie,sessionStroage和localStroage，今天我们来讲一下这三者之间的区别。 共同点 都是保存在浏览器端，且同源的。(所谓同源就是协议，域名，端口号相同)。 都是字符串类型的键值对。 区别 1.cookie HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储 cookie的构成： 名称：n

  
• 01.11 17:55:56
  发表了文章 2023-01-11 17:55:56

  简单解析JavaScript中的cookie对象

  简单解析JavaScript中的cookie对象 前面说大了BOM的存储对象，现在简单了解一下cookie对象。 Cookie 用于存储 web 页面的用户信息。 大小限制为 4k。 安全性差。 1.创建cookie var aBtns = document.getElementsByTagName(&quot;button&quot;); // 创建cookie document.cookie=&quot;name=value,name1=value1;expires= ;path=/&quot; document.cookie = &quot;name=小韩,n
• 01.11 17:53:03
  发表了文章 2023-01-11 17:53:03

  详解BOM的存储对象

  详解BOM的存储对象 今天来讲一下BOM中的最后一部分内容，BOM的存储对象。在JavaScript中以前有cookie对象可以对一部分数据进行存储，但是安全性低，并且容量有限。所有就有了现在的BOM中的存储对象 sessionStroage 和 localstroage 对象。 HTML代码： &lt;h1&gt;02BOM的储存对象&lt;/h1&gt; &lt;h3&gt;sessionStorage&lt;/h3&gt; &lt;button&gt;setItem()&lt;/button&gt; &lt;button&gt;getItem()&lt;/button&gt; &lt;button&gt;removeItem()&lt;/button&gt;
• 01.11 17:49:39
  发表了文章 2023-01-11 17:49:39

  JavaScript模拟列表跳转详情页面效果

  JavaScript模拟列表跳转详情页面效果 上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然后有同学问我，说淘宝的是利用的&quot;?id=****&quot;效果实现的，现在我们来讲一下如何利用location的 search实现效果。如图： 1.列表页面HTML代码： &lt;a href=&quot;01模拟详情页面.html?id=0&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;../0603/img/1.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt; &lt;a href=&quot;01模拟详情页面.html?id=1&quot; target=
• 01.11 17:46:55
  发表了文章 2023-01-11 17:46:55

  JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果

  JavaScript通过改变location对象的hash属性的应用 前面我们学到了BOM的Location对象，现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码： &lt;a href=&quot;10模拟详情页面.html#0&quot; target=&quot;_blank&quot;&gt;张三&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#1&quot; target=&quot;_blank&quot;&gt;李四&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#2&quot; target=&quot;_blank&quot;&gt;王五&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#3&quot; target=&quot;_b
• 01.11 17:44:36
  发表了文章 2023-01-11 17:44:36

  详细解析BOM中Location对象

  详细解析BOM中Location对象 Location对象包含有关当前URL的信息。 // href 返回完整的URL console.log(location.href); // host 返回一个URL的主机名和端口 console.log(location.host); // hostname 返回URL的主机名 console.log(location.hostname); // port 返回一个URL服务器使用的端口号 console.log(location.port); // origin 源 返
• 01.11 17:42:44
  发表了文章 2023-01-11 17:42:44

  简单解析BOM中History对象

  简单解析BOM中History对象 History 对象包含用户（在浏览器窗口中）访问过的 URL。 &lt;button&gt;back()&lt;/button&gt; &lt;button&gt;forward()&lt;/button&gt; &lt;button&gt;go()&lt;/button&gt; 1 2 3 console.log(history); var aBtns=document.getElementsByTagName(&quot;button&quot;); // 属性 // length 返回历史记录/列表中的网址数 console.log(histo
• 01.11 17:41:12
  发表了文章 2023-01-11 17:41:12

  简单解析BOM中Screen对象

  简单解析BOM中Screen对象 Screen 对象包含有关客户端显示屏幕的信息。 console.log(screen); // 属性 // availHeight 返回屏幕的高度（不包括Windows任务栏） // availWidth 返回屏幕的宽度（不包括Windows任务栏） console.log(screen.availHeight,screen.availWidth); // height 返回屏幕的总高度 // width 返回屏幕的总宽度 console.log(screen.height,scree
• 01.11 17:39:28
  发表了文章 2023-01-11 17:39:28

  简单解析BOM中Navigator对象

  简单解析BOM中Navigator对象 navigator对象包含了有关浏览器的信息。 console.log(navigator); // 属性 // appCodeName 返回浏览器的代码名 console.log(navigator.appCodeName); // appName 返回浏览器的名称 console.log(navigator.appName); // appVersion 返回浏览器的平台和版本信息 console.log(navigator.appVersion); // cookieEna
• 01.11 17:36:18
  发表了文章 2023-01-11 17:36:18

  BOM中window对象的其他方法

  BOM中window对象的其他方法 前两篇博客一直在讲window对象的方法，现在将剩下的其他方法以此进行讲解。 HTML代码： &lt;button&gt;open()&lt;/button&gt; &lt;button&gt;close()&lt;/button&gt; &lt;button&gt;focus()&lt;/button&gt; &lt;button&gt;print()&lt;/button&gt; &lt;br&gt; &lt;button&gt;resizeTo()&lt;/button&gt; &lt;button&gt;resizeBy()&lt;/button&gt; &lt;button&gt;moveTo()&lt;/button&gt; &lt;button&gt;mo
• 01.11 17:33:06
  发表了文章 2023-01-11 17:33:06

  BOM中window对象的方法之计时器

  BOM中window对象的方法之计时器 前面讲到了window对象的弹窗方法，现在来讲一下计时器方法。 // setInterval(function(){},time,参数,参数) 按照指定的周期（以毫秒计）来调用函数或计算表达式。 var i=0; var timer=setInterval(function(){ i++; console.log(i); }, 1000); // clearInterval(定时器的名称) 取消由 setInterval() 设置的 timeout。 document.
• 01.11 16:49:21
  发表了文章 2023-01-11 16:49:21

  BOM中window对象的方法之弹窗

  BOM中window对象的方法之弹窗 之前介绍了window对象的属性，接下来说一说window对象的方法。当然方法有好些，这里主要讲一下window对象的弹窗方法。 // alert() 显示带有一段消息和一个确认按钮的警告框。 window.alert(&quot;这是是一个警告框&quot;); // confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 返回值 true false var sure=window.confirm(&quot;确认要离开吗？&quot;); console.log(sure); // prompt(&quot;提示文本&quot;
• 01.11 16:47:15
  发表了文章 2023-01-11 16:47:15

  BOM中window对象的属性

  BOM中window对象的属性 这篇博客主要介绍一下BOM中的window对象的属性。 HTML代码： &lt;a href=&quot;http://www.baidu.com&quot;&gt;百度一下&lt;/a&gt; &lt;iframe src=&quot;&quot; frameborder=&quot;1&quot; id=&quot;frame1&quot; name=&quot;frame_1&quot;&gt;&lt;/iframe&gt; &lt;iframe src=&quot;&quot; frameborder=&quot;1&quot; name=&quot;frame_2&quot;&gt;&lt;/iframe&gt; &lt;iframe src=&quot;&quot; frameborder=&quot;1&quot; name=&quot;frame_3&quot;&gt;&lt;/iframe&gt; &lt;ifra
• 01.11 16:41:58
  发表了文章 2023-01-11 16:41:58

  简单认识JavaScript的BOM对象

  简单认识JavaScript的BOM对象 前面JavaScript中DOM的学习基本已经结束了。今天开始我们学习一下JavaScript中的BOM。 BOM(浏览器对象模型) Browser Object Model 所有有的浏览器都支持window对象， 浏览器的窗口 window对象是js的最高级 / 顶级对象。 所有js的全局对象, 变量, 函数 自动变成window对象的成员 全局变量相当于window对象的属性。 全局函数相当于window对象的方法。 a = 10; console.log(window.a);/
• 01.11 16:39:15
  发表了文章 2023-01-11 16:39:15

  利用Javascript制作轮播图最终版--滑动效果

  JS最快速度制作滑动效果的轮播图 前面几篇博客一直在讲轮播图的制作，这篇博客是最终版，实现轮播图的滑动效果。如图： 在这里插入图片描述 HTML代码： &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;ul class=&quot;min_box&quot; id=&quot;banner&quot;&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt;

  
• 01.11 16:34:40
  发表了文章 2023-01-11 16:34:40

  利用JavaScript的控制图片的CSS位置实现轮播图功能

  利用JavaScript的控制图片的CSS位置实现轮播图功能 上篇博客我们说到了如何给轮播图添加定时器效果，当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的，有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图： 在这里插入图片描述 HTML代码： &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;ul class=&quot;min_box&quot; id=&quot;banner&quot;&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt;