目 錄
第1章 HTML+CSS基礎(chǔ)項目 1
1.1 導(dǎo)航欄菜單的設(shè)計與實現(xiàn) 1
1.1.1 界面設(shè)計 1
1.1.2 鼠標事件 4
1.1.3 完整代碼展示 5
1.2 商務(wù)風(fēng)格表格的設(shè)計與實現(xiàn) 6
1.2.1 創(chuàng)建表格 6
1.2.2 樣式設(shè)計 7
1.2.3 完整代碼展示 11
第2章 JavaScript基礎(chǔ)項目 13
2.1 電子時鐘的設(shè)計與實現(xiàn) 13
2.1.1 界面設(shè)計 13
2.1.2 時鐘動態(tài)效果的實現(xiàn) 16
2.1.3 完整代碼展示 18
2.2 電子日歷的設(shè)計與實現(xiàn) 19
2.2.1 界面設(shè)計 19
2.2.2 顯示狀態(tài)欄中的年份和月份 22
2.2.3 顯示當前月份的所有日期 23
2.2.4 按鈕控件功能的實現(xiàn) 26
2.2.5 完整代碼展示 27
第3章 HTML5拖放API項目 31
3.1 仿回收站效果的設(shè)計與實現(xiàn) 31
3.1.1 界面設(shè)計 31
3.1.2 文件拖曳與回收功能的實現(xiàn) 34
3.1.3 完整代碼展示 37
3.2 圖片相框展示的設(shè)計與實現(xiàn) 39
3.2.1 界面設(shè)計 39
3.2.2 相框自動生成功能的實現(xiàn) 41
3.2.3 完整代碼展示 46
第4章 HTML5表單API項目 49
4.1 用戶注冊頁面的設(shè)計與實現(xiàn) 49
4.1.1 界面設(shè)計 50
4.1.2 表單設(shè)計 51
4.1.3 提示與驗證功能的實現(xiàn) 54
4.1.4 完整代碼展示 58
4.2 問卷調(diào)查頁面的設(shè)計與實現(xiàn) 60
4.2.1 界面設(shè)計 61
4.2.2 表單設(shè)計 62
4.2.3 驗證功能的實現(xiàn) 69
4.2.4 完整代碼展示 73
第5章 HTML5畫布API項目 79
5.1 手繪時鐘的設(shè)計與實現(xiàn) 79
5.1.1 界面設(shè)計 79
5.1.2 實時更新效果 87
5.1.3 完整代碼展示 88
5.2 拼圖游戲的設(shè)計與實現(xiàn) 91
5.2.1 界面設(shè)計 91
5.2.2 實現(xiàn)游戲邏輯 95
5.2.3 游戲成功與重新開始 102
5.2.4 完整代碼展示 105
第6章 HTML5媒體API項目 111
6.1 音樂播放器的設(shè)計與實現(xiàn) 111
6.1.1 界面設(shè)計 111
6.1.2 媒體文件的載入 115
6.1.3 控件功能的實現(xiàn) 115
6.1.4 完整代碼展示 119
6.2 在線教學(xué)視頻的設(shè)計與實現(xiàn) 122
6.2.1 界面設(shè)計 122
6.2.2 視頻文件的載入與播放 127
6.2.3 視頻時間跳轉(zhuǎn)的實現(xiàn) 128
6.2.4 完整代碼展示 130
第7章 HTML5地理定位API項目 133
7.1 運動數(shù)據(jù)記錄頁面的設(shè)計與實現(xiàn) 133
7.1.1 界面設(shè)計 134
7.1.2 實時監(jiān)控地理定位 135
7.1.3 開始與結(jié)束按鈕的切換 136
7.1.4 計算與顯示距離 138
7.1.5 完整代碼展示 140
7.2 運動軌跡繪制頁面的設(shè)計與實現(xiàn) 144
7.2.1 界面設(shè)計 144
7.2.2 開始與結(jié)束按鈕的切換 146
7.2.3 繪制地圖與運動軌跡 146
7.2.4 計時功能的實現(xiàn) 151
7.2.5 完整代碼展示 153
第8章 HTML5 Web存儲API項目 157
8.1 基于Web存儲技術(shù)的網(wǎng)頁主題設(shè)置 157
8.1.1 界面設(shè)計 157
8.1.2 重置網(wǎng)頁主題顏色的實現(xiàn) 160
8.1.3 加載網(wǎng)頁主題顏色的實現(xiàn) 162
8.1.4 完整代碼展示 163
8.2 基于Web存儲技術(shù)的網(wǎng)頁日志本 165
8.2.1 界面設(shè)計 165
8.2.2 讀取日志功能的實現(xiàn) 168
8.2.3 保存日志功能的實現(xiàn) 169
8.2.4 刪除日志功能的實現(xiàn) 170
8.2.5 完整代碼展示 171
第9章 CSS3基礎(chǔ)項目 175
9.1 使用CSS3文本陰影制作特殊字體效果 175
9.1.1 整體設(shè)計 175
9.1.2 火焰文字效果的實現(xiàn) 177
9.1.3 霓虹文字效果的實現(xiàn) 178
9.1.4 完整代碼展示 179
9.2 使用CSS3動畫制作響應(yīng)式放大菜單 180
9.2.1 整體設(shè)計 180
9.2.2 動畫效果的實現(xiàn) 182
9.2.3 完整代碼展示 183
第10章 綜合應(yīng)用設(shè)計實例 185
10.1 基于HTML5的貪吃蛇游戲的設(shè)計與實現(xiàn) 185
10.1.1 貪吃蛇游戲簡介 185
10.1.2 界面布局設(shè)計 185
10.1.3 數(shù)據(jù)模型設(shè)計 190
10.1.4 游戲的邏輯實現(xiàn) 192
10.1.5 完整代碼展示 203
10.2 實戰(zhàn)項目——企業(yè)文化用品展示網(wǎng)頁的開發(fā) 207
10.2.1 項目簡介 207
10.2.2 整體布局設(shè)計 208
10.2.3 頁眉和頁腳的實現(xiàn) 210
10.2.4 主體內(nèi)容的實現(xiàn) 212
10.2.5 完整代碼展示 225
HTML5拖放API項目
本章主要包含兩個基于HTML5拖放API的應(yīng)用設(shè)計實例，一是仿回收站效果的設(shè)計與實現(xiàn)，二是圖片相框展示的設(shè)計與實現(xiàn)。在仿回收站項目中，主要難點為元素的拖曳以及回收效果；在圖片相框展示項目中，主要難點為文件的拖曳、自動生成帶有相框的圖片以及顯示圖片文件信息的技術(shù)。
本章學(xué)習(xí)目標：
* 學(xué)習(xí)如何綜合應(yīng)用HTML5拖放API、CSS與JavaScript開發(fā)仿回收站效果；
* 學(xué)習(xí)如何綜合應(yīng)用HTML5拖放API、CSS與JavaScript開發(fā)圖片相框展示效果。
3.1 仿回收站效果的設(shè)計與實現(xiàn)
【例3-1】 基于HTML5拖放API的仿回收站效果的設(shè)計與實現(xiàn)
背景介紹：在Windows等操作系統(tǒng)中均包含回收站功能，用戶可以直接將不需要的文件拖曳并放置到桌面回收站圖標上以實現(xiàn)文件的刪除。
功能要求：使用HTML5拖放API相關(guān)技術(shù)在網(wǎng)頁上實現(xiàn)仿回收站的類似效果。用戶通過拖曳可以將頁面上的元素放置到回收站中刪除。效果如圖3-1所示。
新書資訊