HTML5表单新验证状态
validityState
1. valueMissing:判断当前元素值是否为空，配合required使用
返回true代表该元素值为空
返回false代表该元素值不为空
2.typemismatch:判断当前元素值的类型是否匹配，配合email/number/url等属性使用
3.patternMismatch：判断当前元素值是否匹配正则表达式，配合pattern属性使用
返回true - 表示验证成功
返回false - 表示验证失败
4.tooLong：判断当前元素值的长度是否正确，配合maxlength属性使用
5.rangeUnderflow:判断当前元素值是否小于min属性值，配合min
6.stepMismatch：判断当前元素值是否与step设置相同，匹配step属性，并不与min和max属性值比较
7.valid:判断当前元素是否正确
返回true - 表示验证成功
返回false - 表示验证失败
8.customError:配合setCustomValidity()方法使用
setCustomValidity()--设置自定义的错误提示内容
使用此方法会产生两个bug:
让所有验证都不通过，但并不会影响验证状态的值
无论验证是否正确都有错误提示
视频内容-基本内容
-
flash介绍
1）使用Flash技术处理HTML页面中的视频内容，也可以处理音频、动画、网页游戏等
2）Flash的特点
浏览器原生不支持(IE浏览器要求安装ActiveX组件)
性能不好(不能过多的使用)
智能移动端使用Flash技术播放视频比较麻烦
Flash的母公司Adobe公开宣布放弃
3）目前用于替代Flash技术最好的选择-HTML5
几乎所有浏览器原生支持video元素
性能更高
智能移动端支持非常好
-
使用HTML实现视频处理
<video controls loop poster="gg.jpg" width="500px" height="700px" perload="auto">您的浏览器不支持播放该视频 <source src="video.mp4"> <source src="video.ogg"> <source src="video.webm"> <-- src 视频路径 autoplay 自动播放 controls 提供视频播放的控制面板，无属性值 loop 循环播放视频 poster 在视频播放前，显示一张图片 width/height 设置显示视频的宽度和高度 preload 预加载 1)auto （默认值）自动加载 2)none 不加载 3)metadata 只加载视频的基本信息（不含视频）--> </video>
视频处理- 高级内容
-
方法
play() - 播放视频 pause() - 暂停视频 load() - 重新加载音频/视频元素 canPlayType() - 判断当前浏览器是否支持指定视频格式 -
事件
onplay - 当视频开始播放时调用 onpause - 当视频暂停时触发 onended - 当视频结束时被触发 onerror - 当视频错误时被触发 oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件 oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件 onprogress - 用于更新媒体的下载进度，会周期性的触发 -
属性
paused - 表示判断当前是否暂停，true表示暂停 ended - 表示判断当前视频是否播放完毕，true表示播放完毕 duration - 表示当前视频的时长,单位为s currentTime - 表示当前视频播放的位置
音频处理
<audio src="audio.mp3" autoplay>
<source src="video.mp3">
<source src="video.ogg">
<source src="video.wav">
</audio>
参考video
Canvas(画布) - 简单内容
HTML5提供的新元素
Canvas在HTML页面提供画布的功能，可以在页面中绘制各种图形
-
canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的推行绑定DOM事件
只能使用canvas提供的API
-
主要用途
在HTML页面中绘制图标(例如柱状图、饼状图等)
网页游戏 - Flash技术
-
如何使用canvas
1）在HTML页面中定义canvas元素
默认宽度 300*150
效果上类似于div
-
问题：
定义canvas元素的宽度和高度
style设置-绘制图形被拉伸
属性方式 - 没有任何问题
2）获取canvas元素
3）获取画布对象
getContext("2d");参数类型是string类型，参数必须是“2d”或“3d”(目前支持2d,不可大写)
4）使用Canvas提供的API
context.fileRect(10,10,100,100);
Canvas(画布) - 高级内容
1.绘制实心矩形
fillRect(x,y,width,heigth)
2.绘制空心矩形
strokeRect(x,y,width,heigth)
3.清除指定区域的像素，类似于橡皮擦
clearRect(x,y,width,height)
4.设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色
声明形状线条的颜色::<b>strokeStyle</b>
声明形状内部区域的颜色::<b>fillStyle</b>
透明度属性。可以设置画布上图形的透明度:<b>globalAlpha</b>
