/******************************************************
* @Web Storage
******************************************************/
//一直有效，關閉窗口和重啟浏覽器後數據依然存在
window.localStorage["key"] = value;
//當前裝口有效，關閉窗口和重啟浏覽器後數據消失
window.sessionStorage["key"] = value;
//不能存放函數，如果是函數會被轉換成字符串
//每個域的數據是不能共享的
/******************************************************
* @Web SQL Database
******************************************************/
//1.打開數據庫
db = openDatabase("DBTest", "1.0", "Html5 Database API example", 200000);
//2.判斷是否打開成功
if (!db) {
alert("數據庫打開失敗");
} else {
//3.執行sql查詢
db.transaction(function(tx){
tx.executeSql("SELECT * FROM Table1Test", [], function(tx, result){
console.log(r = result);
for (var i = 0, item = null; i < result.rows.length; i++) {
//提取結果中第i行數據對象，存入item變量，通過item["id"]這種方式獲得該行id字段的值
item = result.rows.item(i);
031 console.log(item);
032 }
033 });
034 });
036 //4.插入一條記錄
037 db.transaction(function(tx){
038 tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value], function(tx, result){
039 }, onError);
040 });
041 }
042 //查詢函數，data為替代sql語句中?的變量的數組
043 tx.executeSql("sql", data, successCallback, errorCallback)
044 //例如
045 tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [10,"text"], successCallback, errorCallback)
047 /******************************************************
048 * @Web Workers
049 ******************************************************/
050 //main.JS:父進程腳本
051 var worker = new Worker('extra_work.JS');
052 worker.onmessage = function(event){
053 alert(event.data);
054 };
056 //extra_work.JS: 被調用的腳本，子進程
058 // 這裡進行你所需要的計算
059 postMessage(some_data);//當需要通知父進程時調用，參數傳入到父進程的onmessage方法中
061 /******************************************************
062 * @Web Sockets
063 ******************************************************/
064 //連接sockets服務器
065 var socket = new WebSocket("ws://bloga.jp:80/mychat1");
067 socket.readyState; //連接狀態 0:連接中 1:連接成功 2:連接關閉
068 //當連接成功時
069 socket.onopen = function(event){
070 console.log("connected!");
071 }
072 //當從服務器接收到信息時
073 socket.onmessage = function(event){
074 console.log(event.data);
075 }
076 //當連接關閉時
077 socket.onclose = function(event){
078 console.log("closed");
079 }
081 /******************************************************
082 * @Notifications
083 ******************************************************/
085 window.webkitNotifications.checkPermission();//檢查是否允許桌面提示 0：允許 1：禁止。桌面提示的允許狀態是按域保存的
086 window.webkitNotifications.requestPermission();//請求用戶允許桌面提示
088 tip = window.webkitNotifications.createNotification("src/dwd1.png", "提示框的標題", "提示框的內容！！！")
089 tip.show(); //彈出提示框
090 tip.close(); //關閉提示框
092 /******************************************************
093 * @Geolocation
094 ******************************************************/
095 navigator.geolocation.getCurrentPosition(function(position){
097 position.coords //位置坐標
098 position.coords.longitude //經度
099 position.coords.latitude //緯度
100 position.coords.accuracy //精度
101 position.coords.altitudeAccuracy //高度的精度
102 position.coords.heading //朝向
103 position.coords.speed //速度
104 position.timestamp //獲取坐標的時間戳
105 });
107 /******************************************************
108 * @Audio + Video
109 ******************************************************/
110 //獲得video對象，audio對象也可以通過此方法，需要在Html中放置video或audio標簽
111 Media = document.getElementById("vvv");
113 //audio對象可以通過這個方法快速創建，video不可以。
114 Media = new Audio("http://directguo.com/Html5/src/france.ogg")
116 //方法和屬性。video和audio方法和屬性基本相同
117 Media.src = value; //返回或設置當前資源的URL
118 Media.currentTime = value; //當前播放的位置，賦值可改變位置
119 Media.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0
120 Media.duration; //當前資源長度 流返回無限
121 Media.paused; //是否暫停
122 Media.ended; //是否結束
123 Media.autoPlay = value; //是否自動播放 true/false
124 Media.loop = value; //是否循環播放 true/false
125 Media.play(); //播放
126 Media.pause(); //暫停
127 Media.controls = value; //是否有默認控制條 true/false
128 Media.volume = value; //音量
129 Media.muted = value; //靜音 true/false
130 //TimeRanges(區域)對象 ：該對象描述的是一個或多個區域，例如已經加載的區域為兩個部分：1-5.8秒 6-10秒
131 TimeRanges.length; //區域段數，例如上述例子，應該返回2
132 TimeRanges.start(i) //第i段區域的開始位置,單位秒
133 TimeRanges.end(i) //第i段區域的結束位置，單位秒
135 //事件
136 eventTester = function(e){//著裡定義了一個簡單的事件檢測函數來檢測如下的事件
137 Media.addEventListener(e, function(){
138 console.log((new Date()).getTime(), e);
139 });
140 }
142 eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起），
143 eventTester("error"); //請求數據時遇到錯誤
144 eventTester("play"); //play()和autoplay開始播放時觸發
145 eventTester("pause"); //pause()觸發
146 eventTester("playing"); //開始回放
147 eventTester("timeupdate"); //播放時間改變
148 eventTester("ended"); //播放結束
149 eventTester("ratechange"); //播放速率改變
150 eventTester("volumechange"); //音量改變
152 //詳細API請看：http://directguo.com/blog/index.PHP/2010/07/Html5-audio-video-tag/
154 /******************************************************
155 * @Canvas2D
156 ******************************************************/
157 var elem = document.getElementById('myCanvas');
158 var ctx = elem.getContext('2d');
160 //畫矩形
161 ctx.fillRect(x,y,width,height); //畫一個填充的矩形
162 ctx.strokeRect(x,y,width,height); //為一個矩形描邊
163 ctx.clearRect(x,y,width,height); //清楚一個矩形的一部分並且設為透明
164 ctx.rect(x, y, width, height); //畫矩形
166 //畫路徑
167 ctx.beginPath();//創建路徑的第一步是調用beginPath方法，返回一個存儲路徑的信息
168 ctx.closePath();//從當前的點到起始點閉合路徑
169 ctx.stroke();//描邊路徑
170 ctx.fill();//填充路徑
171 ctx.lineTo(x, y);//從上一個起點到(x,y)的點畫線，上一個起點可以通過moveTo來指定，默認為原先路徑的終點
173 //畫圓弧
174 arc(x, y, r, sa, ea, cw);//x,y圓心坐標，r-半徑, sa和ea是圓弧的開始和結束弧度cw為true是逆時針，false為順時針
176 //畫貝塞爾曲線
177 quadraticCurveTo(cp1x, cp1y, x, y);//二次貝塞爾曲線
179 //使用圖像
180 drawImage(image, x, y); //image-圖像對象