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

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