requestAnimationFrame
可以和setTImeout和setInteral作比较,都属于定时器。
requestAnimationFrame:定时器,不用设置时间间隔,采用的是系统的时间间隔,由系统的刷新速度来决定何时执行回调函数。让动画有一致的刷新机制,节省资源,提高系统性能。
优势:
- CPU节能:当页面未激活的时候,屏幕的刷新会停止,所以刷新动画也会停止。当页面被激活的时候,动画会从停止的地方开始
- 函数节流:可以防止一个刷新间隔内发生多次函数执行
缺点: 目前兼容性不好,微信IOS小程序不支持这个属性
//添加一个小点
setTimeout和setInterval的互相模拟
setTimeout:指定毫秒数后调用函数或表达式(最短执行4ms)
setInterval:按照指定周期循环调用函数或者表达式,直到clearInterval,或者窗口关闭
* 模拟setInterval:
function a() {
setTimeout (function (){
a()
},4000)
}
function B (){
a();
}
- 模拟setTimeout
function test(){
clearId = setInterval(function(){
A();
})
}
function A(){
...
clearInterval(clearId);
}
webSocket
出现的原因:网络通信在websocket 出现之前使用HTTP连接,HTTP连接是半双工连接,基于request/response进行数据传输,所以不论是轮询、长轮询还是流模式都不是最好的解决方法。所以使用websocket全双工的双向通信通道,只用建立一次连接就会一直保持,而且客户端和服务端都可以主动通信
- 轮询:定期发送请求,立即接受请求,但是定期的时间不好确定
- 长轮询:在没有发送请求时,服务器一直等待,直到超时,而超时的时间也难以设置
- 流:建立连接后不会关闭,直到被关闭或者超时,但可能会被防火墙或者代码缓冲住response从而导致响应被延迟
webSocket
在单个 TCP 连接上进行全双工通讯的协议,允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。
客户端的设置
var Socket = new WebSocket(url,[protocol]);
- url:指定连接的URL
- protocol可选,指定可接受的子协议
服务端设置
语义化标签
分类
行属性标签(span):mark / time / output /
块属性标签(div): nav / main / header / footer / section / figure / details / aside / article
内联块标签(img): progress
article : 定义文章
aside : 定义和页面关联度较低的内容
datalist : 定义列表项
demo:
<input list="browser">
<datalist id="browser">
<option value="IE">IE</option>
<option value="Chrome">Chrome</option>
<option value="Safari">Safari</option>
<option value="Opera">Opera</option>
<option value="FirFox">FirFox</option>
</datalist>
details : 定义一小块区域,可以收起,可以展开 open属性代表默认展开
– 如果想要修改名称,使用summary标签
demo:
<details open>
<summary>点击展开</summary>
<p>我是隐藏的详细内容</p>
</details>
figure : 包裹一块图片等信息
figcaption : 设置该区域的名称
demo:
<figure>
<figcaption>图片区域标题</figcaption>
<p>定义一块图片区域</p>
</figure>
section : 定义文档中的某个区域 类似于 div
header : 代表一块区域的头部
footer : 代表一块区域的尾部
main : 代表主要区域
nav : 定义导航部分
mark : 标记文本
time : 定义时间
progress : 进度条
output : 输出内容的标签
音频视频(audio、video)
音频audio
浏览器支持:Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio>
元素,但是 Internet Explorer 8 及更早IE版本不支持<audio>
元素.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。在<audio>
与 </audio>
之间需要插入浏览器不支持的<audio>
元素的提示文本 。<audio>
元素允许使用多个<source>
元素. <source>
元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
视频video
浏览器支持:nternet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 元素。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
元素提供了 播放、暂停和音量控件来控制视频。
同时元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性或者浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
需要在标签之间插入的容是提供给不支持 video 元素的浏览器显示的。
元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
canvas画布API
处理图画模糊的方法:
将canvas绘制过程放大2倍,然后将整个canvas元素或者其父元素缩小两倍。
注意:
canvas元素的宽和高为之前的两倍
使用ctx.scale(2,2)将绘图放大两倍
在父元素中添加的class中有放大缩小元素的zoom属性,0.5为缩小一倍。当然你也可以用css3中transform:scale(0.5,0.5)的办法去缩小,只是使用这种方法不会改变布局大小,即canvas虽然视觉上变小了,但它仍旧会占两倍的高和宽。
浏览器支持:Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.
画布在网页是一个矩形框,通过<canvas>
元素来绘制
注意:标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小,可以在HTML页面中使用多个 元素.
<canvas id="myCanvas" width="200" height="100" style="border:10px dotted #000000; background:#ddd;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
效果图:
canvas本身没有绘图能力,所有绘图工作必须在JS内部完成
demo:绘制一个红色矩形
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
分析:
getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
绘制线条
- moveTo(x,y) 定义线条开始坐标
- ineTo(x,y) 定义线条结束坐标
注意:绘制线条我们必须使用到 “ink” 的方法,就像stroke().
demo:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
绘制园
- arc(x,y,r,start,stop)
在绘制圆形时使用 “ink” 的方法, 比如 stroke() 或者 fill().
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
文本
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
必须使用 fillText()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
绘制渐变
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
注意:使用渐变对象时,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。
使用 createLinearGradient()
demo
线性渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
图像绘制
把一幅图像放置到画布上, 使用drawImage(image,x,y)
地理定位
用 getCurrentPosition() 方法来获得用户的位置。
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
demo:返回用户位置的经度和纬度:
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + posit
分析:检测是否支持地理定位
如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度
web存储
- localStorage - 没有时间限制的数据存储,长期存储,除非主动删除
- sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除。
检查浏览器是否支持localStorage 和 sessionStorage
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
}
else
{
// 抱歉! 不支持 web 存储。
}
localStorage 对象
localStorage和 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
demo:创建localStorage
localStorage.sitename="W3Cschool在线教程";
document.getElementById("result").innerHTML="网站名:" + localStorage.sitename;
这个例子中,创建一个 localStorage 键/值对 key="sitename" 和 value="W3Cschool在线教程",检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。
sessionStorage 对象
针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
demo:创建并访问一个 sessionStorage
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
表单控件
添加了新的input类型:email、url、number、search、color、range、datetime-local
Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域
E-mail: <input type="email" name="email">
在提交表单时,会自动验证 email 域的值是否合法有效:
Input 类型: url
url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。
添加您的主页: <input type="url" name="homepage">
Input 类型: number
number 类型用于应该包含数值的输入域,还能设定对所接受的数字的限定
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
Input 类型: search
search 类型用于搜索域,比如站点搜索或 Google 搜索.
Search Google: <input type="search" name="googlesearch">
Input 类型: color
color 类型用在input字段主要用于选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor">
Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
规定对数字类型的限定的属性:
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值
<input type="range" name="points" min="1" max="10"
Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区)
生日 (日期和时间): <input type="datetime-local" name="bdaytime">