HTML5 + CSS3 + JavaScript 從入門到精通 (微視頻精編版)

核心技術分冊目錄

第1篇　基礎篇

第1章　HTML基礎 2

視頻講解：58分鐘

1.1 HTML概述 3

1.1.1 什麽是HTML 3

1.1.2 HTML的發展歷程 3

1.2 HTML文件的基本結構 3

1.2.1 HTML的基本結構 4

1.2.2 HTML的基本標簽 5

1.3 編寫第一個HTML文件 9

1.3.1 HTML文件的編寫方法 9

1.3.2 手工編寫頁面 9

1.3.3 使用可視化軟件WebStorm製作頁面 10

1.4 小結 16

1.5 實戰 17

1.5.1 實戰一：設置背景顏色 17

1.5.2 實戰二：設置鏈接顏色 17

第2章　文本 18

視頻講解：1小時14分鐘

2.1 標題 19

2.1.1 標題標簽 19

2.1.2 標題的對齊方式 21

2.2 文字 23

2.2.1 文字的斜體、下畫線、刪除線 23

2.2.2 文字的上標與下標 24

2.2.3 特殊文字符號 25

2.3 段落 27

2.3.1 段落標簽 27

2.3.2 段落的換行標簽 28

2.3.3 段落的原格式標簽 29

2.4 水平線 31

2.4.1 水平線標簽 31

2.4.2 水平線標簽的寬度 32

2.5 小結 33

2.6 實戰 34

2.6.1 實戰一：實現一則天氣預報 34

2.6.2 實戰二：實現一則唐詩 34

2.6.3 實戰三：實現商品打折清單 34

2.6.4 實戰四：實現一個人物字符畫 34

第3章　圖像和超鏈接 35

視頻講解：39分鐘

3.1 添加圖像 36

3.1.1 圖像的基本格式 36

3.1.2 添加圖像 36

3.2 設置圖像屬性 38

3.2.1 圖像大小與邊框 38

3.2.2 圖像間距與對齊方式 39

3.2.3 替換文本與提示文字 41

3.3 鏈接標簽 42

3.3.1 文本鏈接 42

3.3.2 書簽鏈接 44

3.4 圖像的超鏈接 45

3.4.1 圖像的基本鏈接 45

3.4.2 圖像熱區鏈接 47

3.5 小結 49

3.6 實戰 50

3.6.1 實戰一：顯示圖書封面 50

3.6.2 實戰二：製作商品評價頁面 50

3.6.3 實戰三：製作抽獎頁面 50

第4章　CSS3概述 51

視頻講解：1小時6分鐘

4.1 CSS3概述 52

4.1.1 CSS的發展史 52

4.1.2 一個簡單的CSS示例 52

4.2 CSS3中的選擇器 55

4.2.1 屬性選擇器 56

4.2.2 類和ID選擇器 58

4.2.3 偽類和偽元素選擇器 60

4.2.4 其他選擇器 63

4.3 常用屬性 65

4.3.1 文本相關屬性 66

4.3.2 背景相關屬性 69

4.3.3 列表相關屬性 71

4.4 小結 73

4.5 實戰 73

4.5.1 實戰一：製作登錄註冊頁面 73

4.5.2 實戰二：製作網頁版生日賀卡 74

4.5.3 實戰三：實現個人主頁 74

第5章　CSS3高級應用 75

視頻講解：1小時3分鐘

5.1 框模型 76

5.1.1 外邊距margin 76

5.1.2 內邊距padding 79

5.1.3 邊框border 81

5.2 佈局常用屬性 85

5.2.1 浮動 85

5.2.2 定位相關屬性 87

5.3 動畫與特效 88

5.3.1 變換（transform） 88

5.3.2 過渡（transition） 90

5.3.3 動畫（animation） 92

5.4 小結 96

5.5 實戰 96

5.5.1 實戰一：設置手機篩選頁面 96

5.5.2 實戰二：製作橫向導航 97

5.5.3 實戰三：製作圖片輪播 97

第6章　表格與<div>標簽 98

視頻講解：1小時12分鐘

6.1 簡單表格 99

6.1.1 簡單表格的製作 99

6.1.2 表頭的設置 101

6.2 表格的高級應用 103

6.2.1 表格的樣式 103

6.2.2 表格的合並 105

6.2.3 表格的分組 107

6.3 <div>標簽 109

6.3.1 <div>標簽的介紹 109

6.3.2 <div>標簽的應用 110

6.4 <span>標簽 112

6.4.1 <span>標簽的介紹 112

6.4.2 <span>標簽的應用 113

6.5 小結 114

6.6 實戰 114

6.6.1 實戰一：製作每日工作計劃表 114

6.6.2 實戰二：實現網頁版工作總結 114

6.6.3 實戰三：製作一則公司公告 114

第7章　列表 115

視頻講解：11分鐘

7.1 列表的標簽 116

7.2 無序列表 116

7.2.1 無序列表標簽 116

7.2.2 無序列表屬性 117

7.3 有序列表 119

7.3.1 有序列表標簽 119

7.3.2 有序列表屬性 120

7.4 列表的嵌套 122

7.4.1 定義列表的嵌套 122

7.4.2 無序列表和有序列表的嵌套 124

7.5 小結 125

7.6 實戰 126

7.6.1 實戰一：製作網站購買提示內容 126

7.6.2 實戰二：製作QQ聯系人列表 126

7.6.3 實戰三：製作商品列表內容 126

第8章　表單 127

視頻講解：42分鐘

8.1 表單概述 128

8.1.1 概述 128

8.1.2 表單標簽<form> 128

8.2 輸入標簽 131

8.2.1 文本框 131

8.2.2 單選框和多選框 133

8.2.3 按鈕 135

8.2.4 文件域和圖像域 137

8.3 文本域和列表 139

8.3.1 文本域 139

8.3.2 列表/菜單 140

8.4 小結 142

8.5 實戰 143

8.5.1 實戰一：製作QQ登錄頁面 143

8.5.2 實戰二：製作象棋游戲註冊頁面 143

8.5.3 實戰三：製作個人檔案 143

第9章　多媒體 144

視頻講解：1小時5分鐘

9.1 HTML5多媒體的簡述 145

9.1.1 HTML4中多媒體的應用 145

9.1.2 HTML5頁面中的多媒體 145

9.2 多媒體元素基本屬性 146

9.3 多媒體元素常用方法 150

9.3.1 多媒體播放時的方法 150

9.3.2 canPlayType(type)方法 153

9.4 多媒體元素重要事件 153

9.4.1 事件處理方式 153

9.4.2 事件介紹 154

9.4.3 事件實例 155

9.5 小結 157

9.6 實戰 157

9.6.1 實戰一：製作音樂小球 157

9.6.2 實戰二：加載一段視頻文件 157

9.6.3 實戰三：製作一段音頻文件 157

第10章　HTML5新特性 158

視頻講解：57分鐘

10.1 誰在開發HTML5 159

10.2 HTML5的新特性 159

10.3 HTML5和HTML4的區別 161

10.3.1 HTML5的語法變化 161

10.3.2 HTML5中的標記方法 161

10.3.3 HTML5語法中需要掌握的幾個要點 162

10.4 新增和廢除的元素 164

10.4.1 新增的結構元素 164

10.4.2 新增的塊級（block）的語義元素 167

10.4.3 新增的行內（inline）的語義元素 169

10.4.4 新增的嵌入多媒體元素與交互性元素 171

10.4.5 新增的input元素的類型 172

10.4.6 廢除的元素 172

10.5 新增的屬性和廢除的屬性 173

10.5.1 新增的屬性 173

10.5.2 廢除的屬性 175

10.6 小結 176

10.7 實戰 177

實戰一：製作一個圖像鏈接 177

第11章　JavaScript基礎 178

視頻講解：2小時13分鐘

11.1 JavaScript概述 179

11.1.1 JavaScript的發展史 179

11.1.2 JavaScript在HTML中的使用 180

11.2 JavaScript語言基礎 183

11.2.1 數據類型 183

11.2.2 運算符與表達式 186

11.2.3 流程控制 190

11.3 JavaScript對象編程 193

11.3.1 Window窗口對象 193

11.3.2 Document文檔對象 195

11.4 JavaScript事件處理 198

11.4.1 鼠標鍵盤事件 198

11.4.2 頁面事件 201

11.5 小結 203

11.6 實戰 203

11.6.1 實戰一：製作九九乘法表 203

11.6.2 實戰二：製作手機抽獎頁面 203

11.6.3 實戰三：製作購物車結算頁面 203

第2篇　提 高 篇

第12章　繪制圖形 206

視頻講解：1小時15分鐘

12.1 認識HTML5中的畫布Canvas 207

12.1.1 Canvas概述 207

12.1.2 使用Canvas繪制矩形 207

12.2 繪制基本圖形 209

12.2.1 繪制直線 209

12.2.2 繪制曲線 212

12.2.3 繪制圓形 214

12.3 繪制變形圖形 216

12.3.1 繪制平移效果的圖形 216

12.3.2 繪制縮放效果的圖形 217

12.3.3 繪制旋轉效果的圖形 219

12.4 繪制文字 220

12.4.1 繪制輪廓文字 220

12.4.2 繪制填充文字 221

12.4.3 文字相關屬性 222

12.5 小結 224

12.6 實戰 224

12.6.1 實戰一：Canvas繪制移動的正方形 224

12.6.2 實戰二：製作游戲彈幕效果 224

12.6.3 實戰三：實現計時器 224

第13章　文件與拖放 225

視頻講解：37分鐘

13.1 選擇文件 226

13.1.1 通過file對象選擇文件 226

13.1.2 使用Blob接口獲取文件的類型與大小 227

13.2 讀取文件 228

13.2.1 FileReader接口的方法以及事件 228

13.2.2 使用readAsDataURL方法預覽圖片 229

13.2.3 使用readAsText方法讀取文本文件 231

13.3 拖放文件 233

13.3.1 拖放頁面元素 233

13.3.2 DataTransfer對象的屬性與方法 234

13.3.3 使用effectAllowed和dropEffect屬性設置拖放效果 235

13.4 小結 236

13.5 實戰 237

13.5.1 實戰一：實現編輯照片牆中上傳圖片的功能 237

13.5.2 實戰二：查看網頁源碼 237

13.5.3 實戰三：預覽文件功能 237

第14章　JavaScript對象編程 238

視頻講解：1小時2分鐘

14.1 Window窗口對象 239

14.1.1 Window對象 239

14.1.2 對話框（Dialog） 241

14.1.3 窗口對象常用操作 244

14.2 Document文檔對象 247

14.2.1 文檔對象概述 247

14.2.2 文檔對象的常用屬性、方法與事件 248

14.2.3 Document對象的應用 250

14.3 JavaScript與表單操作 255

14.3.1 在JavaScript中訪問表單 255

14.3.2 在JavaScript中訪問表單域 256

14.3.3 表單的驗證 256

14.4 DOM對象 258

14.4.1 DOM概述 258

14.4.2 DOM對象節點屬性 260

14.4.3 節點的幾種操作 261

14.4.4 獲取文檔中的指定元素 262

14.4.5 與DHTML相對應的DOM 264

14.5 小結 265

14.6 實戰 266

實戰一：在頁面的指定位置顯示當前日期 266

第15章　響應式網頁設計 267

視頻講解：38分鐘

15.1 概述 268

15.1.1 響應式網頁設計的概念 268

15.1.2 響應式網頁設計的優缺點和技術原理 268

15.2 像素和屏幕分辨率 269

15.2.1 像素和屏幕分辨率 269

15.2.2 設備像素和CSS像素 270

15.3 視口 271

15.3.1 視口 271

15.3.2 視口常用屬性 272

15.3.3 媒體查詢 273

15.4 響應式網頁的佈局設計 274

15.4.1 常用佈局類型 274

15.4.2 佈局的實現方式 275

15.4.3 響應式佈局的設計與實現 276

15.5 小結 278

15.6 實戰 278

實戰一：實現主頁響應式實現 278

第16章　響應式組件 279

視頻講解：1小時14分鐘

16.1 響應式圖片 280

16.1.1 方法1：使用<picture>標簽 280

16.1.2 方法2：使用CSS圖片 281

16.2 響應式視頻 284

16.2.1 方法1：使用<meta>標簽 284

16.2.2 方法2：使用HTML5手機播放器 285

16.3 響應式導航菜單 288

16.3.1 方法1：CSS3響應式菜單 288

16.3.2 方法2：JavaScript響應式菜單 290

16.4 響應式表格 293

16.4.1 方法1：隱藏表格中的列 293

16.4.2 方法2：滾動表格中的列 295

16.4.3 方法3：轉換表格中的列 296

16.5 小結 298

16.6 實戰 298

實戰一：實現一個響應式菜單 298

第3篇　項目篇

第17章　課程設計：游戲公園 300

視頻講解：1小時5分鐘

17.1 課程設計目的 301

17.2 游戲公園網站概述 301

17.2.1 網站特點 302

17.2.2 功能結構 303

17.3 主頁的設計與實現 303

17.3.1 主頁的設計 303

17.3.2 頂部區和底部區功能的實現 304

17.3.3 推薦游戲功能的實現 306

17.3.4 最新游戲功能的實現 307

17.4 博客列表的設計與實現 309

17.4.1 博客列表的設計 309

17.4.2 博客列表的實現 310

17.5 博客詳情的設計與實現 311

17.5.1 博客詳情的設計 311

17.5.2 博客詳情的實現 312

17.6 關於我們的設計與實現 313

17.6.1 關於我們的設計 313

17.6.2 關於我們的實現 314

17.7 小結 316

強化訓練分冊目錄

第1章　HTML基礎 1

應用技能拓展學習 1

1．WebStorm常用快捷鍵 1

2．HTML註釋快捷鍵（WebStorm編輯器） 1

3．谷歌瀏覽器中的開發者工具 2

實戰技能強化訓練 4

訓練一：基本功強化訓練 4

1．輸出雷軍的名言 4

2．輸出中英文版的“時間不等人” 5

3．輸出俞敏洪老師的圖書信息 5

4．輸出繞口令 5

5．輸出跨年演講主題 5

訓練二：實戰能力強化訓練 6

6．輸出淘寶網底部菜單 6

7．輸出騰訊免費直播課公告 6

8．輸出明日學院簡介 7

9．輸出新浪官網底部版權信息 7

第2章　文本 9

應用技能拓展學習 9

1．<article>標簽 9

2．<section>標簽 9

3．特殊符號“ ” 11

實戰技能強化訓練 12

訓練一：基本功強化訓練 12

1．輸出每日勵志名言 12

2．輸出影片基本信息 12

3．輸出馬雲語錄 12

4．輸出明日學院官方網站地址 12

5．輸出2018年世界杯分組情況 13

6．輸出彩色數字 13

7．輸出微信支付憑證 14

8．輸出2018年天貓雙十一總成交額 14

9．輸出超市購物小票 14

10．輸出商品標價簽 15

訓練二：實戰能力強化訓練 15

11．居中排版節日板報 15

12．居中排版唐詩 16

13．天氣預報消息發布 16

14．打折商品清單 16

15．輸出方程2X+X2=16 16

16．輸出方程8Y1-X3=20 17

17．繪制情人節字符畫 17

18．給自己畫個字符畫像 17

19．完成一則通告內容 17

20．使用水平線標簽實現菜譜列表 18

第3章　圖像和超鏈接 19

應用技能拓展學習 19

1．SVG圖像 19

2．AlloyImage圖像處理庫 20

實戰技能強化訓練 21

訓練一：基本功強化訓練 21

1．製作購物網站的“促銷活動”頁面 21

2．使用圖像標簽在頁面中顯示圖書封面 22

3．製作手機商城的商品展示頁面 22

4．製作圖書導航頁面 23

5．展示玫瑰的生長過程 24

6．佈局電腦配件頁面 25

7．為圖書添加替換文本和提示文字 25

8．製作商品評價頁面，提示文字為商品信息 26

9．使用鏈接製作網站的導航菜單 26

10．“展開全文”頁面鏈接效果 27

訓練二：實戰能力強化訓練 27

11．仿淘寶放大鏡效果 27

12．SVG實現圖片模糊效果 28

13．SVG實現點贊特效 28

14．應用AlloyImage對圖像進行灰度處理 28

15．應用AlloyImage對圖像進行反色處理 29

第4章　CSS3概述 30

應用技能拓展學習 30

1．Velocity.js框架 30

2．活用position屬性 31

實戰技能強化訓練 31

訓練一：基本功強化訓練 31

1．製作一個簡單的註冊/登錄頁面 31

2．製作網頁版個人簡歷 31

3．製作網頁版生日賀卡 32

4．製作網頁版宣傳海報 32

5．製作購物商城的商品展示頁面 33

6．製作手機介紹頁面 34

7．製作個人空間主頁 34

8．實現頁面橫幅廣告效果 35

9．製作購物商城的“熱銷爆款”頁面 35

10．製作購物商城的“精品手機”頁面 36

11．製作網站登錄頁面 36

12．製作手機展示頁面 37

13．華為手機詳情頁面 37

14．手機產品參數頁面 38

訓練二：實戰能力強化訓練 39

15．圖片跑馬燈效果 39

16．相冊內圖片單擊輪換效果 40

17．圖形加載動畫 40

18．製作方塊填充的進度條 40

第5章　CSS3高級應用 41

應用技能拓展學習 41

1．偽類選擇器的應用 41

2．彈性佈局（flexbox）的使用 42

實戰技能強化訓練 44

訓練一：基本功強化訓練 44

1．製作手機商城的“精品配件”頁面 44

2．製作開心消消樂網站的“最新活動”頁面 45

3．製作小米Max 2手機宣傳頁面 45

4．實現手機分類篩選頁面 45

5．製作新增收貨地址頁面 46

6．製作商品詳情頁的產品規格部分 46

7．製作手機商城中“主題購”頁面 47

8．製作一個簡單的橫向導航欄 47

9．製作含二級菜單的橫向導航欄 48

10．製作含二級菜單的側邊導航欄 48

11．旋轉風車效果 49

12．自動拼圖動畫效果 49

13．鼠標光標滑過時的平移特效 50

14．鼠標懸停時展開和放大相冊 50

15．旅游網站圖片輪播效果 51

16．廣告頁面文字滾動顯示效果 51

訓練二：實戰能力強化訓練 52

17．實現凸顯圖片效果 52

18．實現文字水波紋效果 52

19．實現郵件訂閱中心頁面 53

20．製作紅包兌換頁面 53

21．製作360每日趣聞頁面 53

22．實現跳動文字效果 54

第6章　表格與<div>標簽 55

應用技能拓展學習 55

1．表格中的結構標簽 55

2．偽元素選擇器的巧用 57

實戰技能強化訓練 57

訓練一：基本功強化訓練 57

1．表格實現鍵盤快捷鍵介紹頁面 57

2．表格實現12306公告頁面 58

3．CSS實現唯美主題背景 58

4．表格實現KTV價格表 58

5．實現電子版違章罰單 59

6．實現ATM機銀行憑證 59

7．實現健身房課程表 59

8．製作電子邀請函 60

9．DIV實現崗位招聘頁面 60

10．表格實現手機版天氣預報 61

11．表格實現商品列表 61

12．表格實現51購商城首頁商品信息 62

13．製作移動端王者榮耀官網頁面 62

14．製作美團外賣頁面 63

15．表格實現科學計算器 64

16．表格實現日歷頁面 64

17．DIV實現優惠券領取頁面 64

18．微信朋友圈動態效果 65

訓練二：實戰能力強化訓練 65

19．圖文顯示課程列表頁面 65

20．使用表格佈局女裝頁面 65

21．美食製作熱門推薦列表 66

22．表格實現游戲博客頁面 67

第7章　列表 68

應用技能拓展學習 68

1．CSS3中的列表屬性 68

2．列表的嵌套 68

實戰技能強化訓練 70

訓練一：基本功強化訓練 70

1．手機詳情頁面信息 70

2．CSS製作精美書簽 71

3．餐廳菜單頁面 71

4．支付寶話費充值頁面 72

5．看圖猜成語頁面 72

6．修改列表項標志 72

7．QQ聯系人列表 73

8．商品熱銷排行榜 73

9．票據報銷網絡填單 73

10．仿手機聯系人頁面 73

訓練二：實戰能力強化訓練 74

11．分類導航頁面 74

12．列表實現汽車網站導航菜單 74

13．紅包領取記錄 75

14．駕考寶典答題頁面 75

15．教師節節日賀卡 76

16．限時搶購頁面 76

17．手機商城“熱賣推薦”頁面 76

18．開發類網站的二級導航菜單 77

19．輪播介紹手機的兒童模式 77

20．時間軸顯示各月份最適合的景點 78

第8章　表單 79

應用技能拓展學習 79

1．HTML5新增的input標簽的屬性 79

實戰技能強化訓練 81

訓練一：基本功強化訓練 81

1．QQ註冊頁面 81

2．電子發票開具頁面 81

3．中獎信息填寫頁面 81

4．簡約登錄頁面 82

5．“愛家”在線租房申請頁面 82

6．商品評價時限制輸入的長度 83

7．玩轉漂流瓶 83

8．在線留言頁面 83

9．包含第三方登錄接口的會員登錄頁面 84

10．文本框不為空驗證 84

訓練二：實戰能力強化訓練 85

11．手機端購票頁面 85

12．個人檔案頁面 85

13．百貨超市滿意度調查表 86

14．QQ空間留言板 86

15．大連一日游預定報名頁面 87

16．bug意見反饋頁面 88

第9章　多媒體 89

應用技能拓展學習 89

1．Audio標簽與Video標簽的使用 89

2．Audio對象和Video對象的屬性 89

3．Audio對象和Video對象方法 90

實戰技能強化訓練 92

訓練一：基本功強化訓練 92

1．網頁中添加視頻 92

2．實現直播頁面 92

3．設置視頻控制欄的顯示與隱藏 93

4．添加背景音樂 93

5．動態設置視頻大小與播放狀態 94

6．自定義視頻工具欄 94

7．音樂循環播放 95

8．HTML5手機視頻播放器 95

9．實現音樂、歌詞同步 96

10．為視頻添加彈幕 96

訓練二：實戰能力強化訓練 96

11．為視頻添加字幕 96

12．實現PC端音樂播放器 97

13．模擬游戲音效 97

14．仿酷狗音樂播放器 98

第10章　HTML5新特性 99

應用技能拓展學習 99

1．HTML5中新增的結構元素與語義化元素 99

2．HTML5中新增的input元素類型 101

實戰技能強化訓練 101

訓練一：基本功強化訓練 101

1．會說話的湯姆貓 101

2．文字邊緣鏤空動畫 101

3．恐龍爬坡動畫 102

4．懸掛的日歷 102

5．氣溫變化圖 103

6．網購商城商品跳轉頁面 103

訓練二：實戰能力強化訓練 104

7．商品訂購信息 104

8．實現個人博客主頁 104

9．將圖片裁切為不規則圖形 105

第11章　JavaScript基礎 106

應用技能拓展學習 106

1．函數的定義和調用 106

2．for語句 108

3．數組簡介 108

4．toFixed()方法 111

5．Math對象簡介 111

6．Number()函數 112

7．eval()函數 113

8．parseInt()函數 113

9．Date對象 114

10．setTimeout()方法 115

11．事件對象簡介 115

12．為元素綁定事件 117

13．DOM簡介 117

14．style對象簡介 121

15．圖像對象簡介 125

16．offsetLeft、offsetTop、offsetWidth、offsetHeight 屬性 127

17．scrollLeft、scrollTop屬性 127

18．直接創建自定義對象的方法 127

實戰技能強化訓練 128

訓練一：基本功強化訓練 128

1．輸出自動櫃員機客戶憑條 128

2．輸出《九陽神功》口訣 128

3．計算存款本息合計 128

4．計算身體質量指數 129

5．查看你是什麽星座 129

6．輸出由“*”組成的空心菱形 130

7．商品搶購倒計時 130

8．播放歌曲權限設置 130

9．計算從出生到現在度過的時間 131

10．輸出2018年內地電影票房排行榜 131

訓練二：實戰能力強化訓練 131

11．燈泡點亮與熄滅 131

12．抽屜風格的滑出菜單 132

13．切換表情圖片 132

14．為圖片添加和移除模糊效果 132

15．簡單計算器 133

16．隨意擺放的照片牆 133

17．模擬畫圖軟件調整圖片大小 133

18．圖片放大鏡效果 134

19．顯示選擇的酒店類型 134

20．切換商品類別選項卡 135

21．驗證用戶登錄信息是否為空 135

22．橫向導航菜單 136

第12章　繪制圖形 137

應用技能拓展學習 137

1．sin()方法和cos()方法 137

2．狀態的保存和恢復 138

3．onwheel事件 138

4．zoom屬性 139

5．createPattern()方法 139

6．繪制陰影 140

7．clearRect()方法 141

8．Date對象中的幾個方法 141

9．數組的push()方法 143

10．在canvas中應用layerX和layerY屬性 143

11．min()方法 144

12．random()方法 144

13．requestAnimationFrame()方法 144

實戰技能強化訓練 145

訓練一：基本功強化訓練 145

1．繪制火柴人 145

2．繪制紅心 145

3．繪制簡易房屋 145

4．在圖片上輸出文字 146

5．繪制嚮日葵 146

6．在畫布中顯示圖片 146

7．通過鼠標滾輪放大和縮小圖片 146

8．製作圖像平鋪效果 147

9．製作文字陰影效果 147

訓練二：實戰能力強化訓練 147

10．繪制別墅與樹木 147

11．製作桌面時鐘 147

12．小車的移動和停止 148

13．圖像放大鏡 148

14．製作簡易寫字板 149

15．圖片漸隱漸現效果 149

16．圖像局部放大效果 149

17．下雪動畫效果 150

18．地球繞太陽公轉效果 150

第13章　文件與拖放 151

應用技能拓展學習 151

1．Math對象的兩個方法 151

2．正則表達式簡介 152

3．naturalWidth和naturalHeight屬性 153

4．substr()方法 153

5．canvas元素的toBlob()方法 154

6．URL.createObjectURL()方法 154

7．URL.revokeObjectURL()方法 154

8．createElement()方法 155

9．appendChild()方法 155

實戰技能強化訓練 156

訓練一：基本功強化訓練 156

1．顯示上傳文件名 156

2．單圖縮略圖預覽 157

3．單圖預覽並輸出文件信息 157

4．編輯照片牆 158

5．文本的上傳預覽 159

6．應用事件屬性拖放圖片到指定區域 160

7．應用事件監聽器幫小鳥回家 161

8．將文件拖動到指定區域預覽 161

訓練二：實戰能力強化訓練 162

9．將商品拖至購物車 162

10．隨意拖動廣告圖 162

11．下載canvas圖像 163

12．預覽多個上傳文件信息 163

13．圖片在兩個容器內隨意拖動 164

14．將圖片拖放到回收站 164

第14章　JavaScript對象編程 165

應用技能拓展學習 165

1．setInterval()方法和clearInterval()方法 165

2．classList屬性 166

3．style對象的幾個屬性 168

4．按鈕的disabled屬性 171

5．下拉菜單的selectedIndex屬性 172

6．clientHeight屬性 172

7．setAttribute()和getAttribute()方法 172

8．數組的splice()方法 173

9．globalCompositeOperation屬性 174

實戰技能強化訓練 175

訓練一：基本功強化訓練 175

1．刪除訂單信息 175

2．奧運知識問答 175

3．單擊火箭圖片返回頂部 176

4．切換註冊按鈕的狀態 176

5．在列表中選擇頭像 177

6．使用進度條模擬安裝過程 177

7．實現秒錶計時功能 177

8．輸入取票碼取票 178

9．獲取驗證碼倒計時 178

10．更換頁面主題 179

訓練二：實戰能力強化訓練 179

11．實現圖片輪播功能 179

12．柱形圖顯示投票結果 179

13．紅心按鈕點贊動畫特效 180

14．開心小農場 180

15．幸運大抽獎 181

16．模擬刮刮卡刮獎特效 181

17．歌曲置頂和刪除 182

18．模擬老虎機滾動抽獎效果 182

19．幕簾動畫效果 182

20．模擬微信彈出菜單 183

21．模擬微信輸入支付密碼 184

22．實現電影海報輪播 184

第15章　響應式網頁設計 186

應用技能拓展學習 186

1．媒體查詢的使用 186

2．響應式插件之柵格系統 187

實戰技能強化訓練 188

訓練一：基本功強化訓練 188

1．開心消消樂“最新活動”頁面 188

2．瀏覽器縮小時，隱藏成績表中的列 188

3．翻轉並滾動顯示招聘表 189

4．CSS實現響應式導航欄 190

5．實現課程推薦列表頁面 190

訓練二：實戰能力強化訓練 191

6．360趣玩頁面 191

7．響應式游戲活動介紹頁面 191

8．響應式游戲列表頁面 192

9．女裝專場活動頁面 192

10．Bootstrap實現圖片輪播 193

答案提示 194