暂时未有相关云产品技术能力~
暂无个人介绍
浅谈Ajax请求中的GET,POST,PUT,DELETE,PATCH,OPTIONS 在日常的前后端交互,数据请求中最长用的就是Ajax,当然在面试时也经常会被问道请求的方式有哪些?分别什么不同?一般我们都会回答GET请求和POST请求,但其实在后端配置接口时,请求方式不仅这两种,还会有PUT,DELETE,PATCH等,当然我们在开发的时候偶尔也会遇到接口要求使用这几种方式进行请求,下面我们就来讲一讲这几种方式分别有什么不同。 首先先要了解http定义与服务器进行交互的方式,其中基本的有GET,POST,PUT,DELETE,PATCH是后增的方式。同时还要知道URL代表的是 统一资源
HTML字符实体 做开发的小伙伴们都知道,HTML有一些预留字符,浏览器在解析时不能正确的显示,这个时候我们就需要使用字符实体进行替换。同时,有一些键盘上找不见的符号我们也可使使用字符实体进行替换,下面是我整理的几类我们经常遇到的字符。 1.常见的HTML预留字符 字符 实体编号 实体名称 描述 空格   < 小于号 < < | 大于号 | > | > & | 和号 | & | & " | 引号 | " | " ’ | 撇号 | ' (IE不支持) | ' ¢ | 分 | ¢ | ¢ £ |
HTML5的学习之媒体元素 前几篇博客我们将HTML5中的canvas画布元素进行了讲解,接下来开始学习其他的HTML5新元素。这篇就博文主要讲解HTML5中的媒体元素 <video> 和 <audio> 。 HTML代码: <!-- 视频 --> <video src="../js练习/英雄联盟.mp4" controls autoplay></video> <video controls> <source src="../js练习/英雄联盟.mp4" type="
HTML5的学习之canvas画布 canvas其他剩余的方法和属性。 转换 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 图像绘制 方法 描述 drawImage() 向画布上绘制图像、画布或视频。 createImageData() 创建新的、空白的 ImageData 对象。 getImageData() 返回 ImageData 对象,
HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制"被填充的"文本。 strokeText() 在画布上绘制文本(无填充)。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码: <canvas id="my_canvas"&
HTML5的学习之canvas画布 上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。 1.矩形 方法 描述 rect() 创建矩形。 fillRect() 绘制"被填充"的矩形。 strokeRect() 绘制矩形(无填充)。 clearRect() 在给定的矩形内清除指定的像素。 2.圆形 方法 描述 arc() 创建弧/曲线(用于创建圆形或部分圆)。 arcTo() 创建两切线之间的弧/曲线。 ellipse() 创建椭圆。 3.路径 方法 描述 fill() 填充当前绘图(路径)。 stroke() 绘制已定
HTML5的学习之canvas画布 这篇文章我么继续学习canvas画布。学习学习canvas画布线条的颜色,渐变,阴影等属性和方法。 属性 1.颜色属性 属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。 strokeStyle 设置或返回用于笔触的颜色、渐变或模式。 2.阴影属性 属性 描述 shadowColor 设置或返回用于阴影的颜色。 shadowBlur 设置或返回用于阴影的模糊级别。 shadowOffsetX 设置或返回阴影与形状的水平距离。 shadowOffsetY 设置或返回阴影与形状的垂直距离。 3.线条样式属性 属性 描述 lineC
HTML5的学习之canvas画布 前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。 HTML代码: <
教你如何用Canvas绘制整身的哆啦A梦 上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下。如图: 在这里插入图片描述 HTML代码: <canvas id="my_canvas"></canvas> <canvas id="my_canvas2"></canvas> 1 2 CSS代码: * { margin: 0; } #my_canvas {
订阅专栏 教你如何利用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
详细解析Ajax的使用之向服务器发送GET请求 上篇文章讲的如何使用Ajax发送get请求,这篇文章说如何使用Ajax发送post请求。 HTML代码: <h1>ajax的post请求</h1> <button id="btn">发送请求</button> 1 2 JavaScript代码: var oBtn = document.getElementById("btn"); // 1.初始化请求对象 var xhr; if (window.XMLHttpRequest) { xhr = new XML
浏览器同步发送请求之form表单提交数据 上篇就文章我们讲到了同步和异步的区别,这次主要说一下在网页中如何提交同步的请求,答案就是通过form表单提交请求。 1.GET请求 HTML代码: <form action="get.php" method="get"> 账号:<input type="text" name="user"> <br> 密码:<input type="text" name="psw"><br> <input type="submit" value="登录"> </form> 1 2
详细解析cookie,sessionStroage和localStroage的区别 前面我们说到了JavaScript中的缓存对象,主要是cookie,sessionStroage和localStroage,今天我们来讲一下这三者之间的区别。 共同点 都是保存在浏览器端,且同源的。(所谓同源就是协议,域名,端口号相同)。 都是字符串类型的键值对。 区别 1.cookie HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储 cookie的构成: 名称:n
JavaScript模拟列表跳转详情页面效果 上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然后有同学问我,说淘宝的是利用的"?id=****"效果实现的,现在我们来讲一下如何利用location的 search实现效果。如图: 1.列表页面HTML代码: <a href="01模拟详情页面.html?id=0" target="_blank"><img src="../0603/img/1.jpg" alt=""></a> <a href="01模拟详情页面.html?id=1" target=
JavaScript通过改变location对象的hash属性的应用 前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码: <a href="10模拟详情页面.html#0" target="_blank">张三</a> <a href="10模拟详情页面.html#1" target="_blank">李四</a> <a href="10模拟详情页面.html#2" target="_blank">王五</a> <a href="10模拟详情页面.html#3" target="_b
JS最快速度制作滑动效果的轮播图 前面几篇博客一直在讲轮播图的制作,这篇博客是最终版,实现轮播图的滑动效果。如图: 在这里插入图片描述 HTML代码: <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner"></li> <li class="banner"></li> <li class="banner"></li> <li class="banner"></li>
利用JavaScript的控制图片的CSS位置实现轮播图功能 上篇博客我们说到了如何给轮播图添加定时器效果,当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的,有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图: 在这里插入图片描述 HTML代码: <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner"></li> <li class="banner"></li>
如何用最简单的代码制作带定时器的轮播图 前几天写了一篇有关轮播图制作的博客,但当时没有添加定时的效果,说白了就是没有自动轮播的效果,今天来说一下怎样添加自动轮播效果。如图: 在这里插入图片描述 HTML代码: <div class="box" id="box"> <img src="img/1.jpg" alt=""> <!-- <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> -->
简单解析JavaScript的默认事件及如何阻止默认事件 上篇文章就提到,在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件,现在来聊一聊什么是默认事件,及如何阻止默认事件。 1.什么是默认事件 顾名思义,默认事件就是默认执行的事件,比如 a标签,点击a标签,页面会自动跳转。如图: 在这里插入图片描述 HTML代码: <form action=""> <input type="submit" id="submit"> <input type="image" src="../../CSS/0421/car.jpg"
简单解析js的事件冒泡 1.什么是事件冒泡? 以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时,点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下: 在这里插入图片描述 HTML代码: <div class="box1"> <div clas
JavaScript实现鼠标拖拽效果 前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图: 在这里插入图片描述 HTML代码: <div id="box"></div> 1 CSS代码: * { margin: 0; padding: 0; } #box { width: 200px; height: 200px; background: red
JavaScript实现一串div跟随鼠标移动效果 上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果。现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果。如图: 在这里插入图片描述 HTML代码: <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div
JavaScript实现div块跟随鼠标移动效果 前面讲了这么多DOM事件有关的属性等,现在我们进行一些相关的练习,实现div块跟随鼠标移动效果,如图: 在这里插入图片描述 HTML代码: <div id="box"></div> 1 CSS代码: *{ margin: 0; padding: 0; } body{ width: 2000px; height: 2000px; } #box{ width: 200px; heigh
JavaScript实现省市区三级联动 之前的文章中我们说到过如何利用JavaScript实现二级联动,这次我们来说说如何利用JavaScript实现三级联动。效果如图: 在这里插入图片描述 HTML代码: 请选择省份:<select name="" id="province"> <option value="">请选择省份......</option> </select> 请选择城市:<select name="" id="city"> <option value="">请选择城市......</option> </sel
最简单的利用原生js模拟电视机屏保效果 小的时候记得家里刚用彩色电视机时,看电视还要用天线,当天线信号不好时,电视屏幕就会进入到屏保状态,有一串文字在屏幕内“撞来撞去”。下面我们来讲一下如何实现下图这个效果: 在这里插入图片描述 HTML代码: 调速:<input type="number" name="" id="num"> <div id="box"></div> 1 2 CSS代码: * { margin: 0; padding: 0; } #box { width:
利用JavaScript实现键盘控制小方块移动 HTML代码: <div class="box"></div> 1 CSS代码: *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } 1 2 3 4 5 6 7 8
HTML代码: <input type="text" name="" id="text"> <input type="text" name="" id="text2"> 1 2 1.onkeydown事件 var oText=document.getElementById("text"); var oText2=document.getElementById("text2"); // onkeydown 某个键盘按键被按下。 针对所有键 oText.onkeydown=function(event){ co
JavaScript中DOM节点的查找(遍历) 这篇文章讲一下DOM节点的查找,即DOM节点的遍历。说道遍历大家应该不陌生了,在js中,通过DOM节点的遍历,我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位,到了后期开始学习jQuery时会感觉方便很多。 整个DOM中,节点与节点之间的关系只有两种,兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。 HTML代码: <div class="wrap" style="position:relative"> <div class="box"> 盒子01
原生js实现Tab切换(排他)功能 在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图: 在这里插入图片描述 HTML代码: <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <ul> <li></li> <
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
DOM中的node(节点)有关的三个属性–nodeType、nodeName、nodeValue 上篇博文我们讲到了如何通过DOM获取HTML文档中的元素,在这里要明白一点,当我们获取到具体的某一个元素的时候这个元素就是一个元素节点。说到节点,我们不可避免的有三个属性很有必要了解一下:nodeType、nodeName、nodeValue。 1.nodeType属性 每个节点都有一个 nodeType 属性,用于表明节点的类型,节点类型由 Node 类型中定义12个常量表示: 常量名 常量(返回)值 节点类型 描述 Node.ELEMENT_NODE 1 Element 代表元素 Nod
最详细通过DOM获取元素的方法 上一篇你博文中我们简单的介绍了什么DOM,DOM可以做什么。其中最基本的就是如何通过DOM来获取HTML文档中的元素。这篇文章我们来详细聊一下如何通过DOM获取HTML文档中的元素。 获取HTML文档中的元素从大的方面来区分主要分为两类: 通过元素的标签名,id名等获取。 通过选择器的方法获取 HTML代码: <ul> <li class="item">列表01</li> <li class="item">列表02</li> <li>列表03</li> <li>列表0
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
JavaScript中Date对象的方法解析 上篇文章讲到了JavaScript的Date对象,对Date对象的创建和属性进行了讲解,这篇博客我们来讲一讲Date对象的方法有哪些。 1.获取日期的方法 // 获取当前的日期 var oDate=new Date(); // 方法 描述 // getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 console.log(oDate.getDate()); // getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 c
JavaScript的Date对象的创建和属性 今天我们来学习一下js中的Date对象。Date 对象主要用于处理日期与时间。 1.Date对象的声明/创建 // 1.创建日期 var oDate=new Date(); console.log(oDate); // 2.定义自定义的日期 // new Date(year,month,day,hour,minute,second,millisecond); var oDate3=new Date(2020,5,27,12,0,0); console.log(oDate3);
JavaScript的字符串之HTML包装方法 前面以前文章我们讲解了字符串的各种方法。这篇文章对字符串的方法进行一些补充。 1.字符串的indexOf()和lastIndexOf()方法的补充 var str='hello world'; // indexOf() lastIndexOf() // 不加第二个参数 console.log(str.indexOf("l");// 2 console.log(str.lastIndexOf("l");// 9 console.log(str.indexOf("l",5));// 9 5之后
JavaScript字符串对象的方法详解 前面的博客我们说到了字符串对象的创建,属性及字符串的拼接。现在来详细讲一下字符串的方法。 1.ES6之前的方法 // js字符串的方法 var str="hello"; var str1="world"; // concat() 连接两个或更多字符串,并返回新的字符串。 拼接字符串 console.log(str+str1); console.log(str.concat(str1)); console.log(str);//hello // indexOf() 返回某个指定的字符串值
利用js的数组制作二级联动 前面的博客我们讲解js的数组及相关属性和方法,今天我们来说一下如何利用js的数组制作二级联动效果。当然,说到二级联动,跳不过的就是多维数组。 1.多维数组 // 多维数组:数组作为数组的项 // 二维数组 两层数组 // 二维数组的创建 var arr=[1,2,3,4];//一维数组 // 1.字面量方式声明 var arr2=[[1,2,3],[1,2,3],[4,5,6]]; // 2. 采用构造函数 使用 new 关键字 var arr3=new Array([1,2,3],[4,5
JavaScript字符串的拼接和转义字符 这篇博文主要讲一下字符串的拼接和转义字符的简单使用。 1.字符串的拼接 // js字符串的拼接 + var str="hello"; var str1="world"; console.log(str+str1); // var str=``;//模板字符串 console.log(`${str}${str1}`); // 外单内双 外双内单 var str3='"'; var str4="'"; console.log(str3); doc
简单解析JavaScript中数组的冒泡排序和选择排序 上篇博客我们讲解了数组的sort()方法,这篇博客我们来讲一下数组的另外两种排序方法:冒泡排序和选择排序。其中冒泡排序在前端面试中笔试部分经常会被问到。 1.冒泡排序 冒泡排序:简单解释,就是相邻两元素之间两两比较,比较出大值进行赋值互换,再依次与相邻的元素比较,层层递进互换元素位置,相互赋值,最后得出排序的结果。 在这里插入图片描述 var arr = [100, 20, 9, 3, 22, 111, 28, 55]; // js数组的冒泡排序 // var arr=[1,2,3,4] // 第一层
JavaScript数组对象的迭代方法详解 上一篇博客讲到了数组的方法,当然里边比较复杂的就是数组的迭代方法,因为涉及到了回调函数,所以这篇博客我们来详细讲解一下js数组迭代方法的使用。 1.forEach(funcrion(value,index,arr){}):对数组的每一项运行给定函数,这个方法不进行返回,所以一般用于让数组循环执行某方法。 var arr=[1,2,3,4,5,6]; arr.forEach(function(val,index,arr){ console.log(val,index,arr); }) // 其中:
JavaScript数组对象详解(二) 上一篇博客我们讲到了JavaScript数组对象的创建,访问和属性,接下来一篇博客主要讲一下JavaScript数组对象的方法及使用。说到数组的方法,主要分为两大部分,一部分是ES6以前的数组方法,一部分是ES6新增的方法。 1.ES6之前的方法 var arr1 = [1, 2, 3]; var arr2 = ["a", "b", "c"]; var arr3 = ["张三", "李四", "王五", "赵六"]; var arr4 = ["a", "b", "c", "a", "b", "c", "a", "b",
3.客户端(tortoisesvn)的配置 1.双击安装包,然后点击下一步 在这里插入图片描述 2.直接点下一步 在这里插入图片描述 3.点击install,进行安装 在这里插入图片描述 4.安装结束后,点击finish 在这里插入图片描述 5.安装汉化语言包,双击安装包,然后点击next 在这里插入图片描述 7.安装结束后配置语言,桌面空白位置右键点击,找到tortoisesvn,选择setting,如下图,语言修改为中文 在这里插入图片描述 8.汉化完之后,在桌面空白位置右键单击选择检出,可以修检出的路径,修改路径后点击确定可能会出现下面的警告框,选择永久接受即可 在这里插入图片描述 9
如何配置SVN的服务器端和客户端 好些小伙伴儿在开发的时候都会遇到一个比较麻烦的事情,那就是自己开发的东西不太会整理,或者是团队一起开发,有一些东西不太好整合到一起,那这个时候你们就需要一个版本控制(管理)工具了,当然现在程序用到比较多的是GitHub和国内的码云。但是有一个团队协作也很好用的工具叫SVN,SVN是一个开放源代码的版本控制系统,通过采用分支管理系统的高效管理,简而言之就是用于多个人共同开发同一个项目,实现共享资源,实现最终集中式的管理。今天来和大家说一下怎样配置SVN的服务器和客户端。 1.下载SVN服务器端和客户端安装包 服务器端下载地址:https://www.visu
利用JavaScript的循环语句再页面中打印图形 前面两篇博客我们讲解怎么使用for循环进行数学的简单计算,这篇博客主要是利用js的循环语句在网页中打印出各种图形。 1.利用js的循环语句打印矩形 // 利用循环语句在网页中打印十行十列的矩形 for (var j = 0; j < 10; j++) { // 一行打印10个 @ for (var i = 0; i < 10; i++) { document.write("@"); } document.write("<br/>");
JavaScript的for循环语句练习之鸡兔同笼 上一篇文章我们说到了JavaScript中的for循环语句,今天我们来说一下for循环的有关练习,来加强一下对for循环的使用,因为for循环在后面整个的JavaScript中都很重要,比如说tab切换,轮播图,二级联动,冒泡排序等。当然单纯的for循环也只是一个语法的问题,然后重复执行代码,或者是遍历某一些东西。比如: 1.利用for循环打印0到9: for(var i=0;i<10;i++){ console.log(i); } 1 2 3 2.利用for循环遍历是数组项:
JavaScript的break和continue语句的使用和区别 JavaScript中break 和 continue都是用来控制循环结构,即用在for循环和while循环中。区别在于: break 语句用于跳出循环。 continue 用于跳过循环中的一个迭代。 1.break语句 break语句会终止循环并且跳出循环 for(var j=0;j<5;j++){ if(j==3){ break; } console.log(j);//0 1 2 }
JavaScript的流程控制(一) 接下来我么来讲一下JavaScript的流程控制,JavaScript中的流程控制主要包括条件语句和循环语句。这篇博客主要讲条件语句。说到条件语句主要包括if条件语句和switch选择语句两种。 1.if语句 //语法: // if(判断的条件){ // 条件成立时的执行代码 // } //if语句当条件不成立时,不执行任何的代码 var oDate=new Date(); console.log(oDate.getDay()); if(oDate.getDay()==6){
利用javascript制作计算器 前面我们讲到如何用js模拟计算器的基本运算,现在咱们来讲一下如何使用HTML+CSS+javascript制作一个功能齐全,切外观大气的计算器。功能效果如下图所示: 在这里插入图片描述 HTML代码: <table> <tr> <td colspan="5"> <input type="text" id="text"> </td> </tr> <tr> <td><button value="7
用js模拟计算器进行计算 今天我们来讲一下怎么使用js来模拟计算器的加减乘除基本运算。代码如下: HTML代码: <h1>计算器</h1> <input type="number" name="" id="num1"> <br> <input type="number" name="" id="num2"> <br> <button onclick="func('+')">+</button> <button onclick="func('-')">-</button> <button onclick="func('*')"