HTML5 学习之三 web worker,server-send,表单属性

HTML5 Web Workers

一般情况下，当在HTML页面中执行脚本时，页面的状态是不可响应的，知道脚本已经完成。

Web worker是运行在后天的JavaScript，独立于其他脚本，不影响页面的性能，开放者可以继续做任何要做的事情：点击，选取内容等等，而此时web worker在后台运行。

浏览器支持:

除了IE其他浏览器都支持

Web Workers和DOM

由于web Workers位于外部文件中，他们无法访问下列JavaScript对象：

1、  window对象

2、  document对象

3、  parent 对象

 

要使用web worker先检测用户的浏览器是否支持它：

if(typeof(Worker)!==”undefined”){

 //浏览器支持

}else{

 //浏览器不支持

}

 

创建Web Workers对象

下面代码检测是否存在worker，如果不存在会创建一个：

if(typeof(w)=="undefined")

  {

  w=new Worker("demo_workers.js");

  }

w.onmessage=function(event)

{

document.getElementById("result").innerHTML=event.data;

};

前面说了，Web worker运行在一个独立于其他脚本，所以这里需要一个单独的js文件，js文件事例如下：

var i=0;

 

function timedCount()

{

i=i+1;

postMessage(i);

setTimeout("timedCount()",500);

}

 

timedCount();

主要代码就是postMessage()方法。它会向HTML页面传回一段消息。

注释：web worker通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

当js向页面传回消息之后，worker的onmessage事件监听器就可以收到这个消息，这个消息就存在于event.data中，上面的例子就是直接将获得内容展示到了页面上。

 

停止Web worker

当创建Web worker对象之后，它会继续监听消息，直到其被终止才结束，并释放浏览器/计算机资源，那就请使用terminate()方法。

w.terminate();

 

eg:

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

<br /><br />

<script>

var w;

function startWorker()

{

if(typeof(Worker)!=="undefined")

{

  if(typeof(w)=="undefined")

    {

    w=new Worker("demo_workers.js");

    }

  w.onmessage = function (event) {

    document.getElementById("result").innerHTML=event.data;

  };

}

else

{

document.getElementById("result").innerHTML="Sorry, your browser

 does not support Web Workers...";

}

}

 

function stopWorker()

{

w.terminate();

}

</script>

 

Server-Sent事件-单向消息传递：

该事件的作用是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

接收Server-sent事件通知：

EventSource对象用于接收服务器发送的事件通知：

Var source = new EventSource(“demo_sse.php”); //创建一个新的EventSource对象，并规定发送更新的页面的URL(demo_sse.php)

Source.onmessage=function(event){

 Document.getElementById(“result”).innerHTML =event.data;

}

//收到更新后，发生onmessage事件，然后把接收的数据放到result元素中

 

HTML5 表单：

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

新的输入类型：（IE完全不支持）

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

但是不支持不代表不能正常显示，还是可以在主流浏览器上显示为常规的文本域的

Input 类型-email

在提交表单时会自动验证email域的值：

E-mail: <input type="email" name="user_email" />

其他类型于此用法类似。

这里要特别说一下number类型

它添加属性值max,min,step,value字段类型来对数字进行限定

Max,min很好理解，数字文本域中最大最小值，step规定合法的数字间隔（如果step=3,则合法的数是-3,0,3,6等），value规定默认值

 

Input 类型 - Date Pickers（数据检出器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

 

HTML5表单属性：

新的form属性：

Autocomplete //form 或input域应该拥有自动完成的功能。

注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

Novalidate

新的input属性：

Autocomplete//同上

Autofocus //规定页面加载时，域自动获得焦点

注释：autofocus 属性适用于所有 <input> 标签的类型。

Form //规定输入域所属的一个或多个表单

注释：form 属性适用于所有 <input> 标签的类型。

form 属性必须引用所属表单的 id：

Form override(formaction,formenctype,formmethod,formnovalite,formtarget)//允许中邪form元素的某些属性设置

 

Height和width  // height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

注释：height 和 width 属性只适用于 image 类型的 <input> 标签

 

List //规定输入域的datalist（是输入域的选项列表）

注释：list属性适用于一下类型的<input>标签：text,search,url,telephone,email,date pickers,number,range以及color.

Eg:

<input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

 

Min,max,step

注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：

 

Multiple//规定输入域中可选择多个值

注释：multiple属性适用于email和file类型的<input>标签

 

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

 

Pattern

注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

 

Placeholder //提供一种提示（hint），描述输入域所期待的值

注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

 

Retuired //必须在提交之前写入输入域（不能为空）

注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<input type="text" name="usr_name" required="required" />

评论总数：0 条 [ 查看全部 ] 网友评论