上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 相关教程 >>  网页教程 >>  HTML教程

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

做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • HTML5大纲算法的学习
  • HTML入门学习教程:简单网页制作
    TOP