- 博客(109)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 史上最全HTML实体字符整理
HTML字符实体做开发的小伙伴们都知道，HTML有一些预留字符，浏览器在解析时不能正确的显示，这个时候我们就需要使用字符实体进行替换。同时，有一些键盘上找不见的符号我们也可使使用字符实体进行替换，下面是我整理的几类我们经常遇到的字符。1.常见的HTML预留字符字符实体编号实体名称描述空格  <小于号<<>大于号>>&和号&a
2021-04-20 11:33:08
3841
1
原创 HTML5的学习之新增元素
HTML5的学习之新增元素这篇文章学习一下HTML5新增的元素及浏览器的兼容标签描述<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。<command>定义命令按钮，比如单选按钮、复选框或按钮<details>用于描述文档或文档某个部分的细节<dialog>定义对话框，比如提示框
2020-06-14 16:48:04
398
1
原创 HTML5的学习之表单元素
HTML5的学习之表单元素这篇博客我们继续对HTML5进行学习,主要讲解HTML5的表单元素相关的内容。1.input元素新增的类型type类型描述color选色板month月份week周date日期datetime多数不兼容datetime-local日期加时间time时间email检测邮箱地址number数字range范围 调节音量 进度条search搜索tel电话 不支持u
2020-06-14 16:39:39
393
1
原创 HTML5的学习之媒体元素
HTML5的学习之媒体元素前几篇博客我们将HTML5中的canvas画布元素进行了讲解，接下来开始学习其他的HTML5新元素。这篇就博文主要讲解HTML5中的媒体元素 <video> 和 <audio> 。HTML代码： <!-- 视频 --> <video src="../js练习/英雄联盟.mp4" controls autoplay></video> <video controls> &
2020-06-14 15:49:22
568
1
原创 HTML5的学习之canvas画布(五)
HTML5的学习之canvas画布canvas其他剩余的方法和属性。转换方法描述scale()缩放当前绘图至更大或更小。rotate()旋转当前绘图。translate()重新映射画布上的 (0,0) 位置。transform()替换绘图的当前转换矩阵。setTransform()将当前转换重置为单位矩阵。然后运行 transform()。图像绘制方法描述drawImage()向画布上绘制图像、画布或视频。cre
2020-06-14 15:41:08
260
原创 HTML5的学习之canvas画布(四)
HTML5的学习之canvas画布这篇博客继续学习canvas的文字相关属性和方法。属性属性描述font设置或返回文本内容的当前字体属性。textAlign设置或返回文本内容的当前对齐方式。textBaseline设置或返回在绘制文本时使用的当前文本基线。方法方法描述fillText()在画布上绘制"被填充的"文本。strokeText()在画布上绘制文本（无填充）。measureText()返回包含指定文本宽度的对象
2020-06-14 15:18:42
292
原创 HTML5的学习之canvas画布(三)
HTML5的学习之canvas画布上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。1.矩形属性描述rect()创建矩形。fillRect()绘制"被填充"的矩形。strokeRect()绘制矩形（无填充）。clearRect()在给定的矩形内清除指定的像素。2.圆形属性描述arc()创建弧/曲线（用于创建圆形或部分圆）。arcTo()创建两切线之间的弧/曲线。
2020-06-14 14:51:46
277
原创 HTML5的学习之canvas画布(二)
HTML5的学习之canvas画布这篇文章我么继续学习canvas画布。学习学习canvas画布线条的颜色，渐变，阴影等属性和方法。属性1.颜色属性属性描述fillStyle设置或返回用于填充绘画的颜色、渐变或模式。strokeStyle设置或返回用于笔触的颜色、渐变或模式。2.阴影属性属性描述shadowColor设置或返回用于阴影的颜色。shadowBlur设置或返回用于阴影的模糊级别。shadowOffsetX设置或返
2020-06-14 14:39:34
254
原创 HTML5的学习之canvas画布(一)
HTML5的学习之canvas画布前面几篇博客我们一直在讲如何使用canvas绘制一下图片，但是没有讲过canvas如何使用，都有哪些属性，方法等。今天我们就来讲一讲canvas的有关属性和方法。HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。 元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。接下来我们来学习一下这个对象的属性和方法，用于在画布上绘制文
2020-06-14 14:11:24
220
原创 教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图：HTML代码： <canvas id="my_canvas"></canvas> <canvas id="my_canvas2"></canvas>CSS代码： * { margin: 0;
2020-06-14 13:40:31
775
1
原创 教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图：HTML代码： <canvas id="my_canvas"></canvas>CSS代码： canvas { display:block; margin:0 auto; background: pink }JavaScript代码：
2020-06-12 01:38:25
3288
9
原创 史上最详细的使用canvas绘制五星红旗的方法
史上最详细的使用canvas绘制五角星的方法昨天我们在课堂上讲到了HTML5中的canvas标签，canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。当天布置的作业就是利用canvas画布绘制五星红旗。如图：上篇文章我们已经讲到了五星红旗的制法说明。（一）旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。（二）五星之位置与画法如下:为便于确定五
2020-06-12 01:27:58
2758
3
原创 详细解析JavaScript中的全局属性和方法
详细解析JavaScript中的全局属性和方法今天来补充JavaScript中的最后一部分内容，JavaScript中的全局属性和方法(函数)。1.全局属性 // 属性 // Infinity 代表正的无穷大的数值。 // 在Javascript中，超出 1.7976931348623157E+103088 的数值即为Infinity，小于 -1.7976931348623157E+103088 的数值为无穷小。 var num1 = 1.79769313486231
2020-06-12 00:39:36
1663
2
转载 简单解析Ajax中onreadystatechange事件的readyState属性和status属性
简单解析Ajax中的onreadystatechange 事件onreadystatechange 事件当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState属性 存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest对象的三个重要的属性：属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改
2020-06-12 00:31:43
1679
1
原创 详细解析Ajax的使用之向服务器发送GET请求
详细解析Ajax的使用之向服务器发送GET请求上篇文章讲的如何使用Ajax发送get请求，这篇文章说如何使用Ajax发送post请求。HTML代码： <h1>ajax的post请求</h1> <button id="btn">发送请求</button>JavaScript代码： var oBtn = document.getElementById("btn"); // 1.初始化请求对象 var xhr;
2020-06-12 00:18:00
519
原创 详细解析Ajax的使用之向服务器发送GET请求
详细解析Ajax的使用之向服务器发送GET请求前面一篇博客我们讲到了如何使用form表单像服务器发送请求，但是请求方式是同步的，效率太低，现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。HTML代码： <h1>ajax的get请求</h1> <button id="btn">获取数据</button> <p>姓名：<span id="user"></span></p>
2020-06-12 00:10:09
584
原创 浏览器同步发送请求之form表单提交数据
浏览器同步发送请求之form表单提交数据上篇就文章我们讲到了同步和异步的区别，这次主要说一下在网页中如何提交同步的请求，答案就是通过form表单提交请求。1.GET请求HTML代码： <form action="get.php" method="get"> 账号：<input type="text" name="user"> <br> 密码：<input type="text" name="psw"><br&
2020-06-11 23:58:24
736
原创 详细解析JavaScript的Ajax之同步和异步的区别
详细解析JavaScript的Ajax之同步异步的区别博客整理到这里基本上JavaScript的初级知识就整理完了，现在我们来说一下看JavaScript的最后一个知识点——Ajax。（Asynchronous Javascript And XML） 即异步 JavaScript 和 XML，一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。1.同步和异步首先我们先来分析一下JavaScript的中的同步和异步的区别。同步就是调用某个内容时，调用
2020-06-11 01:13:51
843
1
原创 详细解析cookie，sessionStroage和localStroage的区别
详细解析cookie，sessionStroage和localStroage的区别前面我们说到了JavaScript中的缓存对象，主要是cookie,sessionStroage和localStroage，今天我们来讲一下这三者之间的区别。共同点都是保存在浏览器端，且同源的。(所谓同源就是协议，域名，端口号相同)。都是字符串类型的键值对。区别1.cookieHTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=valu
2020-06-11 00:45:14
1335
2
原创 简单解析JavaScript中的cookie对象
简单解析JavaScript中的cookie对象前面说大了BOM的存储对象，现在简单了解一下cookie对象。Cookie 用于存储 web 页面的用户信息。大小限制为 4k。安全性差。1.创建cookie var aBtns = document.getElementsByTagName("button"); // 创建cookie document.cookie="name=value,name1=value1;expires= ;path=/"
2020-06-09 02:25:55
2053
5
原创 详解BOM的存储对象
详解BOM的存储对象今天来讲一下BOM中的最后一部分内容，BOM的存储对象。在JavaScript中以前有cookie对象可以对一部分数据进行存储，但是安全性低，并且容量有限。所有就有了现在的BOM中的存储对象 sessionStroage 和 localstroage 对象。HTML代码： <h1>02BOM的储存对象</h1> <h3>sessionStorage</h3> <button>setItem()<
2020-06-09 02:14:24
1326
3
原创 JavaScript模拟列表跳转详情页面效果
JavaScript模拟列表跳转详情页面效果上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然后有同学问我，说淘宝的是利用的"?id=****"效果实现的，现在我们来讲一下如何利用location的 search实现效果。如图：1.列表页面HTML代码： <a href="01模拟详情页面.html?id=0" target="_blank"><img src="../0603/img/1.jpg" al
2020-06-09 01:21:48
2112
3
原创 JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果
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模拟详情页面.htm
2020-06-05 02:14:18
1576
6
原创 详细解析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服务器使用的端口号 conso
2020-06-05 02:05:44
1346
3
原创 简单解析BOM中History对象
简单解析BOM中History对象History 对象包含用户（在浏览器窗口中）访问过的 URL。 <button>back()</button> <button>forward()</button> <button>go()</button> console.log(history); var aBtns=document.getElementsByTagName("button");
2020-06-05 02:03:07
496
2
原创 简单解析BOM中Screen对象
简单解析BOM中Screen对象Screen 对象包含有关客户端显示屏幕的信息。 console.log(screen); // 属性 // availHeight 返回屏幕的高度（不包括Windows任务栏） // availWidth 返回屏幕的宽度（不包括Windows任务栏） console.log(screen.availHeight,screen.availWidth); // height 返回屏幕的总高度 // width 返回
2020-06-05 02:00:56
1023
1
原创 简单解析BOM中Navigator对象
简单解析BOM中Navigator对象navigator对象包含了有关浏览器的信息。 console.log(navigator); // 属性 // appCodeName 返回浏览器的代码名 console.log(navigator.appCodeName); // appName 返回浏览器的名称 console.log(navigator.appName); // appVersion 返回浏览器的平台和版本信息 console.l
2020-06-05 01:58:47
958
2
原创 BOM中window对象的其他方法
BOM中window对象的其他方法前两篇博客一直在讲window对象的方法，现在将剩下的其他方法以此进行讲解。HTML代码： <button>open()</button> <button>close()</button> <button>focus()</button> <button>print()</button> <br> <butto
2020-06-05 01:56:05
304
1
原创 BOM中window对象的方法之计时器
BOM中window对象的方法之计时器前面讲到了window对象的弹窗方法，现在来讲一下计时器方法。 // setInterval(function(){},time,参数,参数) 按照指定的周期（以毫秒计）来调用函数或计算表达式。 var i=0; var timer=setInterval(function(){ i++; console.log(i); }, 1000); // clearInterval(定时器的名称) 取消
2020-06-05 01:51:31
853
3
原创 BOM中window对象的方法之弹窗
BOM中window对象的方法之弹窗之前介绍了window对象的属性，接下来说一说window对象的方法。当然方法有好些，这里主要讲一下window对象的弹窗方法。 // alert() 显示带有一段消息和一个确认按钮的警告框。 window.alert("这是是一个警告框"); // confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 返回值 true false var sure=window.confirm("确认要离开吗？");
2020-06-05 01:49:13
336
1
原创 BOM中window对象的属性
BOM中window对象的属性这篇博客主要介绍一下BOM中的window对象的属性。HTML代码： <a href="http://www.baidu.com">百度一下</a> <iframe src="" frameborder="1" id="frame1" name="frame_1"></iframe> <iframe src="" frameborder="1" name="frame_2"></ifr
2020-06-05 01:43:43
962
1
原创 简单认识JavaScript的BOM对象
简单认识JavaScript的BOM对象前面JavaScript中DOM的学习基本已经结束了。今天开始我们学习一下JavaScript中的BOM。BOM(浏览器对象模型) Browser Object Model所有有的浏览器都支持window对象， 浏览器的窗口window对象是js的最高级 / 顶级对象。所有js的全局对象, 变量, 函数 自动变成window对象的成员全局变量相当于window对象的属性。全局函数相当于window对象的方法。 a = 10; cons
2020-06-05 01:28:47
810
1
原创 利用Javascript制作轮播图最终版--滑动效果
JS最快速度制作滑动效果的轮播图前面几篇博客一直在讲轮播图的制作，这篇博客是最终版，实现轮播图的滑动效果。如图：HTML代码： <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner"></li> <li class="banner"></li>
2020-06-05 01:23:05
1311
1
原创 利用JavaScript的控制图片的CSS位置实现轮播图功能
利用JavaScript的控制图片的CSS位置实现轮播图功能上篇博客我们说到了如何给轮播图添加定时器效果，当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的，有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图：HTML代码： <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner">&
2020-06-05 00:41:46
1589
1
原创 如何用最简单的代码制作带定时器的轮播图
如何用最简单的代码制作带定时器的轮播图前几天写了一篇有关轮播图制作的博客，但当时没有添加定时的效果，说白了就是没有自动轮播的效果，今天来说一下怎样添加自动轮播效果。如图：HTML代码： <div class="box" id="box"> <img src="img/1.jpg" alt=""> <!-- <img src="img/1.jpg" alt=""> <img src="img/2.jp
2020-06-05 00:31:05
1340
2
原创 简单解析JavaScript的默认事件及如何阻止默认事件
简单解析JavaScript的默认事件及如何阻止默认事件上篇文章就提到，在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件，现在来聊一聊什么是默认事件，及如何阻止默认事件。1.什么是默认事件顾名思义，默认事件就是默认执行的事件，比如 a标签，点击a标签，页面会自动跳转。如图：HTML代码： <form action=""> <input type="submit" id="submit"> <inpu
2020-06-03 02:21:04
1302
5
原创 简单解析事件捕捉
简单解析事件捕捉上篇博客说到了事件冒泡，其实在JavaScript中，说到事件冒泡还有两个个不得不提的事件捕获和默认事件，我们先来说一下事件捕获。效果如下图：HTML代码： <div class="box1"> <div class="box2"> <div class="box3"> <div class="box4"></div> &l
2020-06-03 02:12:22
822
2
原创 简单解析js的事件冒泡及如何取消事件冒泡
简单解析js的事件冒泡1.什么是事件冒泡？以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时，点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下：HTML代码： <di
2020-06-03 02:06:08
456
3
原创 JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果，今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图：HTML代码： <div id="box"></div>CSS代码： * { margin: 0; padding: 0; } #box { width: 200px; height:
2020-06-03 01:52:23
5390
2
01JavaScript数组的迭代方法.mp4
2020-05-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人