12.14学习经验分享#
Bruce_Zhu于2016.12.14
HTML5 - 表单新验证属性
<pre>
<input type="text">
<--!
=>
required:
验证当前元素是否为空
pattern:
使用正则表达式验证当前元素是否匹配不能验证内容是否为null
min/max:
用于验证当前元素值的最大值和最小值，一般用于number/range等元素
minlength和maxlength:
用于验证当前元素值的最小长度和最大长度
validity:
通过validityState对象获取到，validityState对象可通过validity属性得到
-->
</pre>
HTML5- 表单新验证状态
<pre>
<script> $("input")[0].typeMissmatch; </script>
<--!
=>
validityState:
其对象提供了一系列的有效状态，通过有效状态判断，进行判断
valueMissing:
判断当前元素值是否为空，配合required属性使用
typeMismatch:
判断当前元素值得类型是否匹配,配合email/number/url等属性使用
patternMismatch:
判断当前元素值是否匹配正则表达式，配合pattern属性使用
tooLong:
判断当前元素值的长度是否正确，配合maxlength属性
rangeUnderflow:
判断当前元素值是否小于min属性值，配合min
stepMismatch:
判断当前元素值是否与step设置相同，配合step属性，并不与min和max属性值比较
valid:
判断当前元素是否正确，返回true - 表示验证成功，返回false - 表示验证失败
customError:
配合setCustomValidity()方法使用
-->
</pre>
HTML5 - 视频(音频)处理
<pre>
<vedio width="600px" height="400px" controls>
<source src="video.mp4"/>
<source src="video.ogg"/>
<source src="video.webm"/>
</vedio>
<audio src="audio.mp3"></audio>
<script> $("video").play() </script>
</pre>
HTML5 - Canvas画布
<pre>
<canvas width="525px" height="395" style="background: orange;"></canvas>
<script>
// 2、找到canvas标签
var canvas = document.getElementsByTagName("canvas")[0];
// 3、获取到画布对象，可以理解为画笔
// .getContext()中字符"2d"只能为小写
var context = canvas.getContext("2d");
// 4、使用canvas的API作图
// .fillRect(x,y,width,height)中x,y是相对于canvas的位置
// 绘制内容的透明度，在绘制之前设置，否则无效
context.globalAlpha = 0.5;
// 实心矩形，默认为黑色
context.fillStyle = "red";
context.fillRect(10,10,200,200);
context.fillRect(151,20,200,200);
// 空心矩形，默认黑色
context.strokeStyle = "blue";
context.strokeRect(100,223,100,100);
context.clearRect(10,10,50,50);
</script>
</pre>
