JavaScript項目開發全程實錄

第1章 幸運大抽獎 1

——運算符 + 循環控制 + 函數 + Math 對象

1.1 開發背景 1

1.2 系統設計 2

1.2.1 開發環境 2

1.2.2 業務流程 2

1.2.3 功能結構 2

1.3 技術準備 3

1.4 功能設計 7

1.4.1 抽獎界面設計 7

1.4.2 初始化單元格的位置 10

1.4.3 抽獎功能的實現 11

1.4.4 獲取抽獎結果 12

1.5 項目運行 12

1.6 源碼下載 13

第2章 精美萬年歷設計 14

——字符串操作 + 條件判斷 + 數組操作 + Date 對象

2.1 開發背景 14

2.2 系統設計 15

2.2.1 開發環境 15

2.2.2 業務流程 15

2.2.3 功能結構 15

2.3 技術準備 16

2.4 功能設計 21

2.4.1 萬年歷界面設計 21

2.4.2 生成公歷日期和農歷日期 25

2.4.3 選擇年月和切換年月的實現 30

2.4.4 查看假期安排 32

2.4.5 快速返回當前日期 33

2.5 項目運行 34

2.6 源碼下載 34

第3章 別踩白塊兒小游戲 35

——構造函數 + 原型 + Event 對象 + Document 對象

3.1 開發背景 35

3.2 系統設計 36

3.2.1 開發環境 36

3.2.2 業務流程 36

3.2.3 功能結構 36

3.3 技術準備 37

3.4 功能設計 42

3.4.1 游戲初始界面設計 42

3.4.2 選擇游戲模式界面設計 45

3.4.3 選擇塊兒數界面設計 45

3.4.4 經典模式游戲設計 46

3.4.5 街機模式游戲設計 49

3.4.6 游戲結束界面設計 52

3.5 項目運行 53

3.6 源碼下載 54

第4章 五子棋小游戲 55

——對象 + 事件處理 + DOM 文檔對象模型 + 二維數組

4.1 開發背景 55

4.2 系統設計 56

4.2.1 開發環境 56

4.2.2 業務流程 56

4.2.3 功能結構 57

4.3 技術準備 57

4.3.1 技術概覽 57

4.3.2 二維數組 59

4.4 游戲初始界面設計 60

4.4.1 創建主頁 60

4.4.2 游戲初始化 62

4.5 實現人機對弈 64

4.5.1 玩家下棋 64

4.5.2 判斷玩家是否取勝 67

4.5.3 電腦下棋 69

4.5.4 棋子權重的判斷 70

4.6 顯示游戲結果 73

4.7 項目運行 76

4.8 源碼下載 77

第5章 明日在線教育網站 78

——圖像處理 + Form 對象 + Window對象 + localStorage

5.1 開發背景 78

5.2 系統設計 79

5.2.1 開發環境 79

5.2.2 業務流程 79

5.2.3 功能結構 79

5.3 技術準備 80

5.3.1 技術概覽 80

5.3.2 localStorage 83

5.4 首頁設計 84

5.4.1 輪播圖設計 85

5.4.2 實戰課程展示 86

5.4.3 實現最新動態的向上間斷滾動效果 89

5.4.4 實現圖片的不間斷滾動 90

5.4.5 實現浮動窗口 91

5.5 課程列表頁面設計 92

5.6 課程詳情頁面設計 96

5.6.1 構建頁面 98

5.6.2 觀看視頻頁面設計 100

5.7 登錄和註冊頁面設計 101

5.7.1 登錄功能的實現 101

5.7.2 註冊功能的實現 104

5.8 項目運行 107

5.9 源碼下載 107

第6章 飛馬城市旅游信息網 108

——模塊 + JSON + BOM 瀏覽器對象模型

6.1 開發背景 108

6.2 系統設計 109

6.2.1 開發環境 109

6.2.2 業務流程 109

6.2.3 功能結構 110

6.3 技術準備 110

6.4 公共文件設計 114

6.4.1 頁面頭部文件設計 114

6.4.2 頁面底部文件設計 115

6.5 首頁設計 116

6.6 熱門景點頁面設計 120

6.6.1 景點列表頁面設計 121

6.6.2 景點詳情頁面設計 123

6.7 酒店住宿頁面設計 128

6.7.1 酒店列表頁面設計 128

6.7.2 酒店搜索結果頁面設計 133

6.7.3 酒店詳情頁面設計 135

6.8 門票預訂頁面設計 140

6.9 游客服務頁面設計 144

6.10 用戶中心頁面設計 147

6.10.1 用戶註冊頁面設計 148

6.10.2 用戶登錄頁面設計 150

6.11 項目運行 152

6.12 源碼下載 152

第7章 花瓣電影評分網 153

——DOM 操作 + 設置超時 + Style 對象

7.1 開發背景 153

7.2 系統設計 154

7.2.1 開發環境 154

7.2.2 業務流程 154

7.2.3 功能結構 154

7.3 技術準備 155

7.3.1 技術概覽 155

7.3.2 querySelector()方法 155

7.3.3 querySelectorAll()方法 156

7.3.4 classList 屬性 156

7.4 公共文件設計 157

7.4.1 頁面頭部文件設計 157

7.4.2 頁面底部文件設計 158

7.5 主頁設計 158

7.5.1 “正在熱映”版塊的實現 159

7.5.2 “最近熱門的電影”版塊的實現 164

7.5.3 “一周口碑榜”版塊的實現 167

7.6 電影信息頁面設計 168

7.6.1 “電影基本信息和評分”版塊的設計 168

7.6.2 “劇情簡介”版塊的實現 171

7.6.3 “類似電影推薦”版塊的實現 171

7.7 註冊和登錄功能設計 172

7.7.1 用戶註冊頁面設計 173

7.7.2 用戶登錄頁面設計 175

7.7.3 判斷用戶是否已登錄 177

7.8 電影評價功能的實現 178

7.8.1 記錄想看的電影 178

7.8.2 評價看過的電影 183

7.8.3 刪除記錄 185

7.9 項目運行 186

7.10 源碼下載 187

第8章 明日書店網上商城 188

——sessionStorage + 正則表達式 + insertAdjacentHTML()方法

8.1 開發背景 188

8.2 系統設計 189

8.2.1 開發環境 189

8.2.2 業務流程 189

8.2.3 功能結構 189

8.3 技術準備 190

8.3.1 技術概覽 190

8.3.2 sessionStorage 191

8.3.3 insertAdjacentHTML()方法 192

8.4 主頁的設計與實現 192

8.4.1 主頁的設計 192

8.4.2 頂部區和底部區功能的實現 194

8.4.3 輪播圖功能的實現 196

8.4.4 新書熱賣榜功能的實現 197

8.4.5 商品推薦功能的實現 198

8.5 商品列表頁面的設計與實現 202

8.5.1 商品列表頁面的設計 202

8.5.2 分類選項功能的實現 202

8.5.3 商品列表區的實現 205

8.6 商品詳情頁面的設計與實現 208

8.6.1 商品詳情頁面的設計 208

8.6.2 圖片放大鏡效果的實現 209

8.6.3 商品概要功能的實現 211

8.6.4 商品評價功能的實現 215

8.6.5 猜你喜歡功能的實現 216

8.6.6 選項卡切換效果的實現 218

8.7 購物車頁面的設計與實現 219

8.7.1 購物車頁面的設計 219

8.7.2 購物車頁面的實現 220

8.8 付款頁面的設計與實現 223

8.8.1 付款頁面的設計 223

8.8.2 付款頁面的實現 224

8.9 註冊和登錄頁面的設計與實現 227

8.9.1 註冊和登錄頁面的設計 227

8.9.2 註冊頁面的實現 228

8.9.3 登錄頁面的實現 230

8.10 項目運行 231

8.11 源碼下載 232

第9章 吃了麽外賣網 233

——JSON + Ajax + Bootstrap

9.1 開發背景 233

9.2 系統設計 234

9.2.1 開發環境 234

9.2.2 業務流程 234

9.2.3 功能結構 235

9.3 技術準備 235

9.3.1 技術概覽 235

9.3.2 Bootstrap 237

9.4 主頁的設計與實現 240

9.4.1 主頁的設計 240

9.4.2 頁面頭部和頁面尾部的實現 241

9.4.3 導航和輪播圖的實現 242

9.4.4 商家分類展示的實現 243

9.5 商家列表頁面的設計與實現 246

9.5.1 商家列表頁面的設計 246

9.5.2 商家列表頁面的實現 247

9.6 商家詳情頁面的設計與實現 250

9.6.1 商家詳情頁面的設計 250

9.6.2 商家信息界面的實現 251

9.6.3 菜單界面的實現 252

9.6.4 購物車界面的實現 255

9.7 提交訂單頁面的設計與實現 256

9.7.1 提交訂單頁面的設計 256

9.7.2 提交訂單頁面的實現 257

9.8 選擇支付方式頁面的設計與實現 261

9.8.1 選擇支付方式頁面的設計 261

9.8.2 選擇支付方式頁面的實現 261

9.9 訂單跟蹤頁面的設計與實現 263

9.9.1 訂單跟蹤頁面的設計 263

9.9.2 訂單跟蹤頁面的實現 264

9.10 註冊和登錄頁面的設計與實現 266

9.10.1 註冊和登錄頁面的設計 266

9.10.2 註冊頁面的實現 267

9.10.3 登錄頁面的實現 269

9.11 項目運行 270

9.12 源碼下載 271

第10 章 星光音樂網 272

——XML + Ajax + Vue.js

10.1 開發背景 272

10.2 系統設計 273

10.2.1 開發環境 273

10.2.2 業務流程 273

10.2.3 功能結構 273

10.3 技術準備 274

10.3.1 技術概覽 274

10.3.2 Vue.js 275

10.4 首頁的設計與實現 277

10.4.1 導航欄 278

10.4.2 歌曲列表 279

10.4.3 輪播圖 281

10.4.4 歌曲排行榜 282

10.4.5 最新音樂資訊 285

10.4.6 新歌首發 287

10.5 分類歌曲列表頁面的設計與實現 290

10.5.1 圖片輪播效果 291

10.5.2 分頁展示分類歌曲列表 291

10.6 歌曲詳情頁面的設計與實現 296

10.7 在線試聽頁面的設計與實現 302

10.8 註冊和登錄頁面的設計與實現 303

10.8.1 用戶註冊頁面 303

10.8.2 用戶登錄頁面 305

10.8.3 判斷用戶是否已登錄 307

10.9 項目運行 308

10.10 源碼下載 308