HTML 5開(kāi)發(fā)實(shí)例大全

目　錄
 
第1章　千里之行 始于足下——基本元素實(shí)戰(zhàn)　
1.1　一個(gè)基本的HTML 5頁(yè)面　
1.2　在頁(yè)面中輸出一段文字　
1.3　使用HTML 5的新元素對(duì)頁(yè)面進(jìn)行分欄設(shè)計(jì)　
1.4　使用CSS修飾HTML 5頁(yè)面　
1.5　使用標(biāo)記元素實(shí)現(xiàn)交互　
1.6　使用腳本控制交互的元素　
1.7　實(shí)現(xiàn)下拉彈出效果　
1.8　無(wú)刷新彈出圖片和文字　
1.9　使用標(biāo)記元素實(shí)現(xiàn)交互　
1.10　使用
標(biāo)記元素實(shí)現(xiàn)菜單交互　
1.11　實(shí)現(xiàn)右鍵菜單功能　
1.12　使用標(biāo)記元素實(shí)現(xiàn)動(dòng)態(tài)對(duì)話框效果　
1.13　使用標(biāo)記元素實(shí)現(xiàn)進(jìn)度條效果　
1.14　使用標(biāo)記元素實(shí)現(xiàn)百分比效果　
1.15　設(shè)置進(jìn)度條的樣式　
1.16　使用根元素顯示文字　
1.17　通過(guò)標(biāo)簽設(shè)置目標(biāo)鏈接　
1.18　通過(guò)JavaScript腳本獲取并顯示文本框的內(nèi)容　
1.19　實(shí)現(xiàn)樹(shù)節(jié)點(diǎn)效果　
1.20　分組列表顯示網(wǎng)頁(yè)中的內(nèi)容　
1.21　在網(wǎng)頁(yè)中突出顯示某些文字　
1.22　使用元素引用文檔　
1.23　在網(wǎng)頁(yè)中顯示一幅圖片　
1.24　在網(wǎng)頁(yè)中顯示一個(gè)文本框架　
1.25　使用元素在網(wǎng)頁(yè)中顯示一個(gè)Flash　
1.26　使用鼠標(biāo)光標(biāo)拖動(dòng)網(wǎng)頁(yè)中的文字　
1.27　自動(dòng)隱藏或顯示網(wǎng)頁(yè)中的文字　
1.28　自動(dòng)檢測(cè)輸入的拼音是否正確　
1.29　編輯修改網(wǎng)頁(yè)中的文字　
1.30　聯(lián)合使用和標(biāo)簽　
1.31　在網(wǎng)頁(yè)中顯示聯(lián)系信息　
1.32　在表單中使用元素插入一個(gè)Flash　
1.33　實(shí)現(xiàn)拖曳和拖放處理　
 
第2章　表單元素實(shí)戰(zhàn)　
2.1　驗(yàn)證郵件地址是否合法　
2.2　驗(yàn)證URL地址　
2.3　驗(yàn)證在文本框中輸入字符的長(zhǎng)度　
2.4　通過(guò)滑動(dòng)條設(shè)置顏色　
2.5　自動(dòng)彈出日期和時(shí)間輸入框　
2.6　顯示文本框中的搜索關(guān)鍵字　
2.7　記住表單中的數(shù)據(jù)　
2.8　驗(yàn)證表單中輸入的數(shù)據(jù)是否合法　
2.9　在文本框中顯示提示信息　
2.10　驗(yàn)證文本框中的內(nèi)容是否為空　
2.11　開(kāi)啟表單的自動(dòng)完成功能　
2.12　重寫(xiě)表單中的某些屬性　
2.13　驗(yàn)證表單中的數(shù)據(jù)是否為網(wǎng)址格式　
2.14　自動(dòng)設(shè)置表單中傳遞數(shù)字　
2.15　在表單中選擇多個(gè)上傳文件　
2.16　在表單中自動(dòng)提示輸入文本　
2.17　一個(gè)簡(jiǎn)單的乘法計(jì)算器　
2.18　在網(wǎng)頁(yè)中生成一個(gè)密鑰　
2.19　驗(yàn)證輸入的密碼是否合法　
2.20　驗(yàn)證兩次輸入的密碼是否一致　
2.21　取消表單元素的所有驗(yàn)證規(guī)則　
2.22　在網(wǎng)頁(yè)中實(shí)現(xiàn)自動(dòng)增加表格效果　
2.23　開(kāi)發(fā)一個(gè)計(jì)數(shù)器程序　
2.24　實(shí)現(xiàn)播放器樣式的按鈕　
2.25　實(shí)現(xiàn)一個(gè)精美的登錄表單界面　
2.26　實(shí)現(xiàn)一個(gè)動(dòng)態(tài)菜單樣式　
2.27　動(dòng)態(tài)添加或刪除表單中的元素　
2.28　實(shí)現(xiàn)一個(gè)漂亮的圓角按鈕　
2.29　textarea根據(jù)內(nèi)容自動(dòng)增高　
2.30　判斷用戶選擇了幾個(gè)復(fù)選框　
2.31　實(shí)現(xiàn)仿DELL搜索表單的效果　
2.32　實(shí)現(xiàn)精致、符合標(biāo)準(zhǔn)的表單頁(yè)面　
 
第3章　文件操作實(shí)戰(zhàn)　
3.1　選擇一個(gè)上傳文件　
3.2　選擇多個(gè)上傳文件　
3.3　獲取文件的類型和大小　
3.4　過(guò)濾出非圖片格式的文件　
3.5　過(guò)濾上傳文件的類型　
3.6　預(yù)覽上傳的圖片　
3.7　讀取某個(gè)文本文件的內(nèi)容　
3.8　監(jiān)聽(tīng)事件　
3.9　使用拖曳的方式上傳圖片　
3.10　美化拖曳方式上傳圖片表單　
3.11　拖曳上傳圖片到表單并顯示預(yù)覽　
3.12　IE瀏覽器支持的上傳圖片預(yù)覽程序　
3.13　實(shí)現(xiàn)上傳頭像圖片大小選擇　
3.14　使用拖曳的方式在相簿中對(duì)照片進(jìn)行排序　
 
第4章　音頻和視頻實(shí)戰(zhàn)　
4.1　在網(wǎng)頁(yè)中自動(dòng)播放視頻　
4.2　在網(wǎng)頁(yè)中控制播放的視頻　
4.3　在網(wǎng)頁(yè)中設(shè)置播放視頻的高度　
4.4　在網(wǎng)頁(yè)中自動(dòng)播放音頻　
4.5　在網(wǎng)頁(yè)中控制播放的音頻　
4.6　在網(wǎng)頁(yè)中循環(huán)播放某個(gè)音頻　
4.7　為播放的視頻準(zhǔn)備一幅素材圖片　
4.8　顯示加載視頻的狀態(tài)　
4.9　出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息　
4.10　自定義設(shè)計(jì)播放按鈕　
4.11　檢測(cè)瀏覽器是否支持媒體類型并顯示結(jié)果　
4.12　顯示視頻的播放狀態(tài)　
4.13　顯示播放視頻的時(shí)間信息　
4.14　制作一個(gè)簡(jiǎn)單的視頻播放器　
4.15　制作一個(gè)具有回放功能的視頻播放器　
 
第5章　繪圖實(shí)戰(zhàn)　
5.1　在網(wǎng)頁(yè)中定位顯示鼠標(biāo)光標(biāo)的坐標(biāo)　
5.2　在指定位置繪制指定角度的相交線　
5.3　繪制一個(gè)圓　
5.4　在Canvas畫(huà)布中顯示一幅指定的圖片　
5.5　繪制一個(gè)指定大小的正方形　
5.6　繪制一個(gè)帶邊框的矩形　
5.7　繪制一個(gè)漸變圖形　
5.8　繪制不同的圓形　
5.9　繪制一個(gè)漸變圓形　
5.10　移動(dòng)、縮放和旋轉(zhuǎn)網(wǎng)頁(yè)中的圓形　
5.11　使用組合的方式顯示圖形　
5.12　為圖形添加陰影　
5.13　在頁(yè)面中使用不同的格式繪制指定的圖像　
5.14　在頁(yè)面中使用不同的方式平鋪指定的圖像　
5.15　切割指定的圖像　
5.16　改變頁(yè)面中圖像的像素　
5.17　繪制文字　
5.18　在網(wǎng)頁(yè)中保存、恢復(fù)和輸出圖形　
5.19　制作一個(gè)簡(jiǎn)單的動(dòng)畫(huà)　
5.20　為視頻播放器設(shè)計(jì)一個(gè)截圖功能　
5.21　在網(wǎng)頁(yè)中繪制美麗的花朵　
5.22　生成一個(gè)能控制動(dòng)作的小車　
5.23　實(shí)現(xiàn)一個(gè)時(shí)鐘效果　
5.24　制作一個(gè)顏色選取器　
5.25　制作一個(gè)圖像放大鏡　
5.26　制作一個(gè)寫(xiě)字板　
5.27　使用動(dòng)畫(huà)的形式裝載顯示一幅圖片　
5.28　疊加顯示兩個(gè)矩形　
5.29　將彩色照片轉(zhuǎn)換為黑白照片　
5.30　模擬鐘表的效果　
5.31　將文字轉(zhuǎn)換為圖片　
5.32　繪制曲線　
5.33　繪制一個(gè)心形圖像　
5.34　實(shí)現(xiàn)奧運(yùn)五環(huán)效果　
5.35　在網(wǎng)頁(yè)中繪制不同的圖形　
5.36　實(shí)現(xiàn)統(tǒng)計(jì)餅圖效果　
5.37　在網(wǎng)頁(yè)中繪制貝賽爾曲線　
5.38　在網(wǎng)頁(yè)中實(shí)現(xiàn)矩陣變換效果　
5.39　在網(wǎng)頁(yè)中繪制精美的五角星矩陣效果　
5.40　在網(wǎng)頁(yè)中繪制坐標(biāo)變換圖形　
5.41　在網(wǎng)頁(yè)中繪制線性漸變圖形　
5.42　在網(wǎng)頁(yè)中繪制向日葵效果　
5.43　開(kāi)發(fā)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版貪吃蛇游戲　
 
第6章　數(shù)據(jù)存儲(chǔ)　
6.1　保存并讀取臨時(shí)數(shù)據(jù)　
6.2　保存并讀取登錄用戶名和密碼　
6.3　在網(wǎng)頁(yè)中保存、清空數(shù)據(jù)記錄　
6.4　在網(wǎng)頁(yè)中獲取并顯示數(shù)據(jù)　
6.5　創(chuàng)建一個(gè)簡(jiǎn)單的學(xué)生信息管理頁(yè)面　
6.6　管理localStorage中的數(shù)據(jù)　
6.7　使用openDatabase打開(kāi)、創(chuàng)建數(shù)據(jù)庫(kù)　
6.8　執(zhí)行事務(wù)操作(1)　
6.9　執(zhí)行事務(wù)操作(2)　
6.10　執(zhí)行事務(wù)操作(3)　
6.11　日記式事務(wù)提醒系統(tǒng)　
6.12　實(shí)現(xiàn)一個(gè)訂單　
6.13　使用客戶端session保存并操作數(shù)據(jù)　
6.14　一個(gè)離線的、日記式事務(wù)提醒系統(tǒng)　
6.15　本地存儲(chǔ)　
6.16　在頁(yè)面中動(dòng)態(tài)地顯示時(shí)間　
6.17　檢測(cè)本地緩存是否更新　
6.18　更新本地緩存　
6.19　使用swapCache方法更新本地緩存　
6.20　更新本地緩存時(shí)觸發(fā)的其他事件　
6.21　檢測(cè)網(wǎng)絡(luò)的當(dāng)前狀態(tài)　
6.22　檢測(cè)網(wǎng)絡(luò)的當(dāng)前狀態(tài)　
6.23　離線留言系統(tǒng)　
 
第7章　Web Sockets API通信實(shí)戰(zhàn)　
7.1　安裝jWebSocket服務(wù)器　
7.2　跨文檔傳輸數(shù)據(jù)　
7.3　使用WebSocket傳送數(shù)據(jù)　
7.4　傳送JSON對(duì)象　
7.5　使用jWebSocketTest框架進(jìn)行通信　
7.6　在線聊天系統(tǒng)　
 
第8章　Geolocation API實(shí)戰(zhàn)　
8.1　獲取當(dāng)前地理位置　
8.2　使用getCurrentPosition()方法獲取地理位置信息　
8.3　在網(wǎng)頁(yè)中使用地圖　
8.4　在地圖中顯示當(dāng)前的位置　
8.5　在網(wǎng)頁(yè)中顯示當(dāng)前的位置信息　
8.6　在網(wǎng)頁(yè)中居中顯示定位地圖　
8.7　利用百度和HTML 5技術(shù)實(shí)現(xiàn)定位處理　
8.8　在彈出對(duì)話框中顯示定位信息　
 
第9章　前后臺(tái)數(shù)據(jù)交互——Web Workers API實(shí)戰(zhàn)　
9.1　處理線程　
9.2　使用線程傳遞JSON對(duì)象　
9.3　使用線程嵌套交互數(shù)據(jù)　
9.4　使用Web Workers API執(zhí)行大計(jì)算量任務(wù)　
9.5　在后臺(tái)運(yùn)行耗時(shí)較長(zhǎng)的運(yùn)算　
9.6　通過(guò)JSON發(fā)送消息　
9.7　計(jì)算加法運(yùn)算和乘法運(yùn)算　
 
第10章　統(tǒng)計(jì)圖實(shí)戰(zhàn)　
10.1　使用插件RGraph制作柱狀圖　
10.2　改變選中柱狀圖的顏色　
10.3　繪制分組柱狀圖　
10.4　將柱狀圖的同一根柱子設(shè)置為不同的顏色　
10.5　繪制一個(gè)折線圖　
10.6　顯示提示的折線圖　
10.7　繪制多根折線　
10.8　繪制范圍折線圖　
10.9　在一個(gè)折線圖中使用左右兩根不同單位的垂直坐標(biāo)軸　
10.10　在一個(gè)統(tǒng)計(jì)圖中同時(shí)繪制柱狀圖與折線圖　
10.11　繪制動(dòng)態(tài)折線圖　
10.12　繪制一個(gè)餅圖　
10.13　單擊餅塊后呈現(xiàn)白色半透明效果　
10.14　繪制橫向柱狀圖　
10.15　繪制分組橫向柱狀圖　
10.16　繪制雷達(dá)圖　
10.17　用拖曳的方式在柱狀圖中打開(kāi)餅圖　
10.18　放大網(wǎng)頁(yè)中的統(tǒng)計(jì)圖　
10.19　使用放大鏡效果放大網(wǎng)頁(yè)中的統(tǒng)計(jì)圖　
 
第11章　特效實(shí)戰(zhàn)　
11.1　實(shí)現(xiàn)星級(jí)評(píng)論功能　
11.2　實(shí)現(xiàn)無(wú)刷新驗(yàn)證　
11.3　實(shí)現(xiàn)的表單特效　
11.4　制作一個(gè)漂亮的搜索表單框　
11.5　動(dòng)態(tài)操作表格　
11.6　在文本框中彈出層效果　
11.7　實(shí)現(xiàn)五彩連珠網(wǎng)頁(yè)特效　
11.8　實(shí)現(xiàn)圣誕樹(shù)特效　
11.9　實(shí)現(xiàn)帶動(dòng)畫(huà)、陰影的表單提示特效　
11.10　讓圖片DIV豎向滑動(dòng)　
11.11　在網(wǎng)頁(yè)中實(shí)現(xiàn)風(fēng)車特效　
11.12　在網(wǎng)頁(yè)中實(shí)現(xiàn)滑動(dòng)門(mén)特效　
11.13　顯示世界部分地區(qū)時(shí)間表　
11.14　實(shí)現(xiàn)界面框上下可以拖動(dòng)效果　
11.15　在網(wǎng)頁(yè)中實(shí)現(xiàn)粒子特效效果　
11.16　實(shí)現(xiàn)純CSS3瀑布流布局　
11.17　實(shí)現(xiàn)類似百葉窗拍攝快門(mén)攝影拍攝效果　
11.18　jQuery幻燈片切換應(yīng)用一個(gè)HTML5的幻燈片　
11.19　制作一個(gè)HTML5篩選容器插件選項(xiàng)卡　
 
第12章　游戲?qū)崙?zhàn)　
12.1　開(kāi)發(fā)一個(gè)躲避小游戲　
12.2　網(wǎng)頁(yè)版迷宮游戲　
12.3　網(wǎng)頁(yè)版貪吃蛇游戲　
12.4　網(wǎng)頁(yè)版水果老虎機(jī)游戲　
12.5　網(wǎng)頁(yè)版數(shù)獨(dú)游戲　
12.6　網(wǎng)頁(yè)版俄羅斯方塊游戲　
12.7　挖箱子游戲　
12.8　抽獎(jiǎng)游戲　
12.9　拼圖游戲