新特性

使用者繪畫的canvas

媒體播放的video audio

本地離線儲存的支援

特殊內容 article footer header nav section

新的表單控制元件 calendar date time email URL search

改進：新元素 新屬性；完全支援CSS3 Video Audio 2D/3製圖 本地儲存 本地SQL資料 Web應用

HTML5 簡介

• 語義元素

標籤	描述
article	獨立的內容區域
aside	側標欄
bdi	脫離父元素的文字方向設定
command	命令按鈕 單選核取方塊或按鈕
details	用於描述文件細節
dialog	定義對話方塊，提示框
summary	標籤包含details元素的標題
figure	規定獨立的流內容 影像圖示照片程式碼等
figcaption	定義figure元素的標題
footer	定義section或document頁尾
header	頭部區域
mark	定義帶有記號的文字
meter	定義度量衡
nav	定義導航連結
progress	定義任何型別的進度
ruby	定義ruby的註釋
tr	定義字元的解釋
rp	在ruby註釋中使用，定義ruby元素的瀏覽器所顯示的內容
section	定義文件的一段
time	定義日期或時間
wbr	規定文字中何處新增換行符

HTML5新元素

• <canvas> 標籤定義圖形，比如圖示和其他影像。

1.通過canvas元素顯示一個紅色的矩形
<canvas id="myCanvas"></canvas>
<script>
	var canvas=document.getElementById('myCanvas')
	var ctx=canvas.getContext('2d')
	ctx.fillStyle='#FF0000'
	ctx.fillRext(0,0,80,100)
</script>
複製程式碼

• 多媒體元素 <audio> <video> <embed> <track>
• 新表單元素 <datalist>選項列表 <keygen>表單祕鑰對生成器欄位 <output>指令碼輸出

什麼是Canvas

Canvas元素用於圖形的繪製，通過JS來完成，<canvas>標籤只是圖形容器 您必須用JS繪製 Canvas學習參考連結

• 繪製一個畫布（Canvas）;繪製矩形

<canvas id='myCanvas' width='200' height='100' style='boder:1px solid #000000'>
</canvas>

<script>
	
	1.獲取畫布
	var c=document.getElementById('myCanvas')
	
	2.建立上下文context物件
	var ctx=c.getContext('2d');
	
	3.繪製 ctx擁有多種繪製路徑 矩形 圓形 及新增影像的方法
	ctx.fillStyle='#FF0000'
	ctx.fillRect(0,0,150,75);
	
	4.fillStyle 屬性是CSS顏色，預設是#000，可以設定漸變，圖案
</script>
複製程式碼

• Canvas 座標

Canvas 是一個二維網格;左上角座標是（0，0）;fillRect(x,y,width,height) 意義是從左上角(0,0)開始，繪製width*height 的矩形 填充

2. strokeRect(x, y, width, height) 繪製邊框

3. clearRect(x, y, widh, height) 清除指定的矩形區域

• Canvas路徑繪製一條線

moveTo(x,y);lineTo(x,y);stroke()

• beginPath() 新建一條路徑，路徑一旦建立成功，圖形繪製命令被指向到路徑上生成路徑
• moveTo(x, y)把畫筆移動到指定的座標(x, y)。相當於設定路徑的起始點座標。
• lineTo(x, y) 把畫筆移動到指定的座標(x, y)
• closePath() 閉合路徑之後，圖形繪製命令又重新指向到上下文中
• stroke() 通過線條來繪製圖形輪廓
• fill() 通過填充路徑的內容區域生成實心的圖形

<script>
	var ctx=document.getElementById('myCanvas').getContext('2d')
	ctx.moveTo(0,0);
	ctx.lineTo(200,100);
	ctx.stroke()
</script>
複製程式碼

• Canvas繪製一個圓

  arc(x, y, r, startAngle, endAngle, anticlockwise) ；stroke()

  • arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y)為圓心，以r為半徑，從 startAngle弧度開始到endAngle弧度結束。anticlosewise是布林值，true表示逆時針，false表示順時針(預設是順時針)。
  • arcTo(x1, y1, x2, y2, radius): 根據給定的控制點和半徑畫一段圓弧，最後再以直線連線兩個控制點。

1.從左上角(95,50) 繪製半徑40 角度行0角度開始，360度為止，繪製圓形曲線
<script>
	var ctx=document.getElementById('myCanvas').getContext('2d')
	ctx.beginPath()
	ctx.arc(95,50,40,0.2*Math.PI)
	ctx.stroke()
</script>
複製程式碼

• Canvas繪製文字

font 定義字型；fillText(text,x,y)在canvas上繪製實心的文字；strokeText(text,x,y)在canvas上繪製空心的文字

1.ctx.font 設定字型
2.ctx.fillText('222',x,y) 從左上角（x,y）開始繪製
var ctx = document.getElementById("myCanvas").getContext('2d')
ctx.font='30px Arial'
ctx.fillText('Hello World',10,50)
複製程式碼

• Canvas 漸變色

1.通過上下文建立漸變，2建立顏色停止區間 3漸變值賦值給ctx.fillStyle 4開始填充

1建立漸變 線性漸變，圓型漸變
 - createLinearGrandient(x,y, x1,y1)
 - createRadialGradient(x,y,r, x1,y1,r1)

2.建立線性漸變
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd = ctx.createLinearGradient(0,0,200,0)
grd.addColorStop(1,'red')
grd.addColorStop(1,'white')

ctx.fillStyle=grd
ctx.fillRect(10,10,150,80)

3.建立圓形漸變
var c1=document.getElementById("myCanvas");
var ctx1=c1.getContext("2d");

var grd1 = ctx1.createRadialGradient(75,50,5, 90,60,100)
grd1.addColorStop(0,'red')
grd1.addColorStop(1,'white')

ctx1.fillStyle = grd1
ctx1.fillRect(10,10,150,80)
複製程式碼

• Canvas影像

drawImage(image,x,y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imge=document.getElementById('screen')
ctx.drawImage(img,10,10)

複製程式碼

HTML5內聯SVG

• 什麼是SVG：1是指可伸縮向量圖形 2用於定義網路的基於向量圖形 3使用XML格式定義圖形 3.SVG圖形在放大或改變成村的情況下其圖形質量不會有損失

• SVG優勢：1，可以通過文字編輯器建立和修改 2可以被搜尋 索引 指令碼化壓縮 3.是可伸縮的 4影像在任何解析度下被高質量的列印 5.SVG在影像質量不下降的情況下被放大

• SVG可以直接嵌入HTML中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
複製程式碼

• SVG和Canvas兩者間的區別
  • svg 是通過XML描述的2D圖形的語言
  • Canvas是通過JS描述2D圖形
  • SVG基於XML的，每個元素的都是可用的，可以為每個元素新增JS事件處理器
  • Canvas是按畫素處理的，一旦繪製完成，不會繼續得到瀏覽器的關注，如果為止發生改變場景也會重新繪製，

Canvas	SVG
依賴解析度	不依賴解析度
不支援事件處理器	支援事件處理器
弱的文字渲染能力	最適合帶有大型渲染區域的應用程式
能攻以.png 或 .jpg 格式儲存結果影像	複雜度高灰減慢渲染進度
適合影像密集型的遊戲，其中許多物件頻繁重繪	不適合遊戲應用

HTML5 MathML

html5使用MathML元素。標籤是<math></math>

數學運算子 矩陣等

拖放Drag Drop

• 1.設定元素可拖動 draggable='true'
• 2.當元素被拖動時 會出發ondragstart(eve) ev.dataTransfer.setData()設定被拖動的資料，設定型別和值
• 3.移動的時候，如果設定了函式回掉ondragover() ，如果允許放置，必須阻止元素的預設處理方式
• 4.放下的時候，監聽函式ondrop(). 阻止預設的處理方式，然後獲取被拖拽的資料，是IDname ;把拖動的元素放置到目標元素中

<body>
	<p>拖動下面圖片到右側矩形框中</p>
	<div='div1' ondrop="drop(event)" ondragover='allowDrop(event)'></div>
	
	<img id='drag1' src='/logo.png' draggable='true' ondragstart='drag(event)'>
</body>

<script>
	function allowDrop(ev){
		ev.preventDefault();
	}
	
	function drag(ev){
		ev.dataTransfer.setData('Text',ev.target.id)
	}
	
	function drop(ev){
		ev.preventDefault()
		var data=ev.dataTransfer.getData('Text')
		ev.target.appendChild(document.getElementById(data))
	}
	
</script>
複製程式碼

HTML5 地理定位

Geolocation 地理定位 ；需要獲取使用者授權；getCurrentPosition() 方法獲得使用者的位置

• 獲取使用者的經度緯度

1.如果getCurrentPosition()執行成功，則向引數showPosition中規定函式返回一個coordinates

var x=document.getElementById("demo");
function getLocation(){
	if(navigatior.geolocation){
		navigatior.geolocation.getCurrentPosition(showPosition)
		
		回掉函式想當於：
		//navigatior.geolocation.getCurrentPosition({(posi)
			//showPosition(posi)
		//})		
	}else{
		x.innerHTML='不支援獲取地理位置'
	}
}
function showPosition(position){
	x.innerHTML='維度' + position.coords.latitude + '<br>經度' + position.coords.longitude;
}
複製程式碼

• 處理錯誤和拒絕

function showError(error)
{
    switch(error.code) 
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="使用者拒絕對獲取地理位置的請求。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="位置資訊是不可用的。"
            break;
        case error.TIMEOUT:
            x.innerHTML="請求使用者地理位置超時。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="未知錯誤。"
            break;
    }
}
複製程式碼

• 如果需要返回使用者移動時的更新位置，使用watchPosition()

HTML Video視訊

• video 簡單使用

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援Video標籤。
</video>
複製程式碼

• video提供了播放 暫停 音量等控制視訊
• 如果不設定width height大小，會根據原始視訊的大小而改變
• video標籤之間的插入的內容是不支援video元素的瀏覽器顯示的
• 元素支援多個source，瀏覽器使用第一個可識別的格式
• 改變播放器的大小 暫停和播放播放器

1.<video> 定義一個視訊
2.<source> 定義多種媒體資源 
3.<track> 定義在媒體播放器文字軌跡

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused){
		myVideo.play(); 
	}else{
		myVideo.pause(); 
	} 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script> 

複製程式碼

HTML Audio 音訊

• Audio簡單使用

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支援 audio 元素。
</audio>
複製程式碼

HTML Input型別

color date datetime datetime-local email nonth number range search tel time url week

• input型別 color

<input type='color' name='favcolor'>
複製程式碼

• input型別：date

<input type='date'>
複製程式碼

• input型別datetime

1.UTC時間
生日（日期和時間）<input type='datetime' name='bdaytime'>
複製程式碼

• input 型別 datetime-local

1.無時區本地時間
<input type='datetime-local' name='bdaytime'>
複製程式碼

• input型別：email

1.email型別用於應該包含e-mail 地址的輸入域 
2.提交表單 會自動驗證email域的值是否合法有效
E-mail <input type='email' name='aemail'>
複製程式碼

• input型別 number

1.number型別用於應該包含數值的輸入值
2.可以設定限定
數量（1-5之間）: <input type='number' name='quantity' min='1' max='5'>
複製程式碼

屬性	描述
disable	禁用
max	最大值
maxlength	最大字元長度
min	最小值
pattern	用於驗證輸入欄位的正規表示式
readonly	只讀 無法修改
required	必填項
size	可見字元數
step	合法數字間隔
value	輸入欄位的預設值

• input型別range

1.顯示為滑動條 用於應該包含一定範圍內數字值的輸入域
2.max 規定允許的最大值；min規定允許最小值；step規定合法的陣列間隔；value規定預設值；

 <input type='range' name='points' min='1' max='10'>
複製程式碼

• input型別 search

1.search型別用於搜尋域；比如站點搜尋或Google搜尋
Search Google :<input type='search' name='googlesearch'>
複製程式碼

• input 型別tel

tel:定義輸入電話號碼欄位：
電話號碼： <input type='tel' name='surtel'>
複製程式碼

• input型別：time

1.time型別，允許選擇一個時間
選擇時間：<input type='time' name='usr-time'>
複製程式碼

• input型別 url

1.url型別用於包含URL地址的輸入域
2.提交表單中，會自動驗證URL域的值
您的主頁：<input type='url' name='homepage'>
複製程式碼

• input 型別week

1.week型別選擇周和年
選擇周：<input type='week' name='week_year'>
複製程式碼

HTML 表單元素

datalist ; keygen ; output

• datalist 元素

1.datalist 規定輸入域的選項列表
2.datalist 屬性規定 form 或 input域 應改擁有自動完成功能，當使用者在完成域中開始輸入的時候，瀏覽器應該在該區域中顯示填寫的選項
<input list='browsers'>
<datalist id='browsers'>
	<option value='IE'>
	<option value='Firefox'>
	<option value=''Chrom>
	<option value='Opera'>
	<option value='Safari'>
</datalist>
複製程式碼

• keygen元素

1.keygen元素作用提供一種驗證使用者的可靠方法
2.規定用於表單的金鑰對生成器 當提交時 會生成兩個鍵一個是私鑰 一個是公鑰
3.公鑰傳送給伺服器，可用域之後驗證使用者的客戶端證照

<form action='demo_kes.asp' method='get'>
使用者名稱：<input type='text' name='usr_name'>
密碼：<keygen name='security'>
<input type='submit'>
</form>
複製程式碼

• output元素

1.元素用於不同型別的輸出。計算或指令碼輸出
2.oninput output 成堆出現。
<form oninput='x.value=parseInt(a.value)+parseInt(b.value)'>
0
<input type='range' id='a' value='50'>
100 + 
<input type='number' id='b' value='50'>
=
<output name='x' for='a b'> </output>
</form>
複製程式碼

HTML表單屬性

form 新屬性：autocomplete; novalidate; input新屬性：autocomplete ; autofocus; form; formaction; formenctype; formmethod; formnovalidate; formtarget; height/width; list; min/max; muliple; pattern; placeholder; required; step

• autocomplete 屬性

1. HTML form 中開啟 autocomplete (一個 input 欄位關閉 autocomplete ):

<form action='forma1.php' autocomplete='on'> 
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
複製程式碼

• novalidate屬性 無需驗證

novalidate 屬性是一個boolean屬性
novalidate屬性規定在提交表單時不因該驗證form 或input 區域
// 無序驗證的提交的郵箱
<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
複製程式碼

• autofocus 屬性

1.autofocus在頁面載入中國呢，域自動獲得焦點
<input type='text' name='fname' autodocus> 
複製程式碼

• form 屬性

1.多個表單域，指定input 所屬 form的ID
<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
複製程式碼

• formaction屬性

1.屬性用於描述表單提交的URL地址；會覆蓋form元素中的action屬性
2.屬性用於 type='submit' 和 type=‘image’
<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php" value="提交">
</form>
3.第一個提交，指定URL是demo-form.php;  第二個提交地址是 交給demo-adimin.php 處理
複製程式碼

• formenctype 屬性 編碼格式

1.描述表單提交伺服器的資料編碼；只對post有效
2.屬性會覆蓋form元素的預設enctype屬性
<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
3. 第一個提交 安預設媽媽
複製程式碼

• formmethod 屬性 請求方式post/get等

1.會覆蓋form元素的method 屬性
<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>
複製程式碼

• formnovalidate無需驗證； formtarget指定型別；

• height/width 寬高

• list屬性

1.datalist是輸入域的選項列表
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
複製程式碼

• min/max屬性 適用於datepickers;numbers;range

• multiple屬性 可以多選值

Select images: <input type="file" name="img" multiple>
複製程式碼

• pattern屬性 描述正規表示式

1.只能輸入大小寫字母
Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
複製程式碼

• placeholder屬性；required屬性

Username: <input type="text" name="usrname" required>
複製程式碼

• step屬性

1.輸入域規定合法的數字間隔
2.step 屬性與以下type型別一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<input type="number" name="points" step="3">
複製程式碼

HTML語義元素

html5新的語義元素：header；nav;section;ariticle;aside;figcaption;figure;footer;

• <figure>和 <figcaption> 元素

1.<figure>標籤規定獨立的流內容（影像、圖表、照片、程式碼等等）。
2.<figure> 元素的內容應該與主內容相關，但如果被刪除，則不應對文件流產生影響。
3.<figcaption> 標籤定義 <figure> 元素的標題.
4.<figcaption>元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。
複製程式碼

HTML Web 儲存

Cookie 早些時候使用

LocalStorage; 用於長久存在的整個網站的資料，儲存的資料沒有過期時間，手動去除

sessionStorage 用於臨時儲存同一視窗；在關閉視窗或標籤之後將會傷處這些資料

• 檢驗是否支援Storage

if(typeof(Storage) != 'undefined') {
	// 支援
}else{
   // 不支援Web儲存
}
複製程式碼

• LocalStorage物件 CRUD(增 刪 改 查)

1.儲存資料
localStorage.setItem(key,value)

2.讀取資料
localStorage.getItem(key)

3.刪掉單個資料
localStorage.removeItem(key)

4.刪除所有資料
localStorage.clear()

5.得到某個索引的key
localStorage.key(index)

6.儲存是按json字串儲存，按需要轉換格式
複製程式碼

• sessionStorage物件

var site = new Object;
var str = JSON.stringify(site); // 將物件轉換為字串

使用 JSON.parse 方法將字串轉換為 JSON 物件：
var site = JSON.parse(str);
複製程式碼

Web SQL 資料庫

openDatabase;開啟新建資料庫 transaction; 控制一個事務，在內執行或者提交回滾 executeSql 執行SQL查詢

• 開啟資料庫

1.開啟已存在的資料庫，如果資料不存在，會建立一個新的資料庫
2.五個引數：資料庫名稱，版本號，描述檔案，資料庫大小，建立回撥;
var db = openDatabase('mydb','1.0','TextDB',2*1025*1024)
db.transaction(function(tx){
	tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,log)')
})
3.建立一個名為LOGS的表
複製程式碼

• 插入資料

1.開啟資料庫
2.在transaction中執行事務，執行SQL語句 動態插入資料
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function(tx){
	tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,log)')
	tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?,?)',[e_id,e_log])
})
3.例項中的 e_id 和 e_log 是外部變數，executeSql 會對映陣列引數中的每個條目給 "?"。
複製程式碼

• 讀取資料

1.開啟資料庫
2.插入資料
3.查詢出資料
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

db.transaction(function(tx){
	
	tx.executeSql('SELECT * FROM LOGS',[],function(tx1,results){
		var length = results.rows.length,i;
		 msg = "<p>查詢記錄條數: " + len + "</p>";
		 for (i = 0;i<len;i++){
		 	altert(results.rows.item(i).log)
		 }	
	},null);
});

複製程式碼

• 刪除記錄

1.指定ID刪除
db.tansaction(function(tx){
	tx.executeSql('DELETE FROM LOGS WHERE id=1');
})

2.動態ID刪除
db.tansaction(function(tx){
	tx.executeSql('DELETE FROM LOGS WHERE id=?',[id]);
})
複製程式碼

• 更新記錄

1.指定ID更新
db.transaction(function(tx){
	tx.executeSql('UPDATE LOGS SET log=\'dsdsdadfs.cc\' WHERE id=2')
})
2.動態ID更新
db.transaction(function(tx){
	tx.executeSql('UPDATE LOGS SET log=\'dsdsdadfs.cc\' WHERE id=?',[id])
})
複製程式碼

HTML5 應用程式快取（Application Cache）

可以離線快取；載入速度更快；減少伺服器負載

• Cache Manifest 例子

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
文件內容......
</body>

</html>
1.如果需要，在html標籤中包含mainfest屬性，manifest 檔案的建議的副檔名是：".appcache"。manifest 檔案需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 伺服器上進行配置
複製程式碼

• Mainfest檔案

1.是文字檔案；告知瀏覽器被快取的內通
2.分三個部分；
 Cache manifest 在此標題下列出的檔案在首次下載後進行快取
 NETWORK 在標題下列出檔案需要與伺服器連結 且不會被快取
 fallback 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（404）
複製程式碼

• 完整的一個manifest檔案

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html
複製程式碼

• 上面第一行CACHE MANIFEST，是必需的 上面三個檔案會被快取。然後，無論使用者何時與因特網斷開連線，這些資源依然是可用的
• 下面的 NETWORK 規定檔案 "login.php" 永遠不會被快取，且離線時是不可用的：
• 最後 FALLBACK 小節規定如果無法建立因特網連線，則用 "offline.html" 替代 /html5/ 目錄中的所有檔案：

HTML5 Web Works

• 在html中 參考連結

<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 = "抱歉，你的瀏覽器不支援 Web Workers...";
    }
}
 
function stopWorker() 
{ 
    w.terminate();
    w = undefined;
}
</script>
複製程式碼

• 在work.js中

var i=0;
function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();
複製程式碼

伺服器傳送事件

允許網頁獲得來自伺服器的更新

• Server-Sent事件 / 單向訊息傳遞