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>

</pre>

HTML5 - Canvas画布
<pre>

       // 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>