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