JavaScript項目開發(fā)全程實錄

第1章 幸運大抽獎 1
——運算符 循環(huán)控制 函數(shù) Math 對象
1.1 開發(fā)背景 1
1.2 系統(tǒng)設計 2
1.2.1 開發(fā)環(huán)境 2
1.2.2 業(yè)務流程 2
1.2.3 功能結構 2
1.3 技術準備 3
1.4 功能設計 7
1.4.1 抽獎界面設計 7
1.4.2 初始化單元格的位置 10
1.4.3 抽獎功能的實現(xiàn) 11
1.4.4 獲取抽獎結果 12
1.5 項目運行 12
1.6 源碼下載 13
第2章 精美萬年歷設計 14
——字符串操作 條件判斷 數(shù)組操作 Date 對象
2.1 開發(fā)背景 14
2.2 系統(tǒng)設計 15
2.2.1 開發(fā)環(huán)境 15
2.2.2 業(yè)務流程 15
2.2.3 功能結構 15
2.3 技術準備 16
2.4 功能設計 21
2.4.1 萬年歷界面設計 21
2.4.2 生成公歷日期和農(nóng)歷日期 25
2.4.3 選擇年月和切換年月的實現(xiàn) 30
2.4.4 查看假期安排 32
2.4.5 快速返回當前日期 33
2.5 項目運行 34
2.6 源碼下載 34
第3章 別踩白塊兒小游戲 35
——構造函數(shù) 原型 Event 對象 Document 對象
3.1 開發(fā)背景 35
3.2 系統(tǒng)設計 36
3.2.1 開發(fā)環(huán)境 36
3.2.2 業(yè)務流程 36
3.2.3 功能結構 36
3.3 技術準備 37
3.4 功能設計 42
3.4.1 游戲初始界面設計 42
3.4.2 選擇游戲模式界面設計 45
3.4.3 選擇塊兒數(shù)界面設計 45
3.4.4 經(jīng)典模式游戲設計 46
3.4.5 街機模式游戲設計 49
3.4.6 游戲結束界面設計 52
3.5 項目運行 53
3.6 源碼下載 54
第4章 五子棋小游戲 55
——對象 事件處理 DOM 文檔對象模型 二維數(shù)組
4.1 開發(fā)背景 55
4.2 系統(tǒng)設計 56
4.2.1 開發(fā)環(huán)境 56
4.2.2 業(yè)務流程 56
4.2.3 功能結構 57
4.3 技術準備 57
4.3.1 技術概覽 57
4.3.2 二維數(shù)組 59
4.4 游戲初始界面設計 60
4.4.1 創(chuàng)建主頁 60
4.4.2 游戲初始化 62
4.5 實現(xiàn)人機對弈 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章 明日在線教育網(wǎng)站 78
——圖像處理 Form 對象 Window對象 localStorage
5.1 開發(fā)背景 78
5.2 系統(tǒng)設計 79
5.2.1 開發(fā)環(huán)境 79
5.2.2 業(yè)務流程 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 實戰(zhàn)課程展示 86
5.4.3 實現(xiàn)最新動態(tài)的向上間斷滾動效果 89
5.4.4 實現(xiàn)圖片的不間斷滾動 90
5.4.5 實現(xiàn)浮動窗口 91
5.5 課程列表頁面設計 92
5.6 課程詳情頁面設計 96
5.6.1 構建頁面 98
5.6.2 觀看視頻頁面設計 100
5.7 登錄和注冊頁面設計 101
5.7.1 登錄功能的實現(xiàn) 101
5.7.2 注冊功能的實現(xiàn) 104
5.8 項目運行 107
5.9 源碼下載 107
第6章 飛馬城市旅游信息網(wǎng) 108
——模塊 JSON BOM 瀏覽器對象模型
6.1 開發(fā)背景 108
6.2 系統(tǒng)設計 109
6.2.1 開發(fā)環(huán)境 109
6.2.2 業(yè)務流程 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章 花瓣電影評分網(wǎng) 153
——DOM 操作 設置超時 Style 對象
7.1 開發(fā)背景 153
7.2 系統(tǒng)設計 154
7.2.1 開發(fā)環(huán)境 154
7.2.2 業(yè)務流程 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 “正在熱映”版塊的實現(xiàn) 159
7.5.2 “最近熱門的電影”版塊的實現(xiàn) 164
7.5.3 “一周口碑榜”版塊的實現(xiàn) 167
7.6 電影信息頁面設計 168
7.6.1 “電影基本信息和評分”版塊的設計 168
7.6.2 “劇情簡介”版塊的實現(xiàn) 171
7.6.3 “類似電影推薦”版塊的實現(xiàn) 171
7.7 注冊和登錄功能設計 172
7.7.1 用戶注冊頁面設計 173
7.7.2 用戶登錄頁面設計 175
7.7.3 判斷用戶是否已登錄 177
7.8 電影評價功能的實現(xiàn) 178
7.8.1 記錄想看的電影 178
7.8.2 評價看過的電影 183
7.8.3 刪除記錄 185
7.9 項目運行 186
7.10 源碼下載 187
第8章 明日書店網(wǎng)上商城 188
——sessionStorage 正則表達式 insertAdjacentHTML()方法
8.1 開發(fā)背景 188
8.2 系統(tǒng)設計 189
8.2.1 開發(fā)環(huán)境 189
8.2.2 業(yè)務流程 189
8.2.3 功能結構 189
8.3 技術準備 190
8.3.1 技術概覽 190
8.3.2 sessionStorage 191
8.3.3 insertAdjacentHTML()方法 192
8.4 主頁的設計與實現(xiàn) 192
8.4.1 主頁的設計 192
8.4.2 頂部區(qū)和底部區(qū)功能的實現(xiàn) 194
8.4.3 輪播圖功能的實現(xiàn) 196
8.4.4 新書熱賣榜功能的實現(xiàn) 197
8.4.5 商品推薦功能的實現(xiàn) 198
8.5 商品列表頁面的設計與實現(xiàn) 202
8.5.1 商品列表頁面的設計 202
8.5.2 分類選項功能的實現(xiàn) 202
8.5.3 商品列表區(qū)的實現(xiàn) 205
8.6 商品詳情頁面的設計與實現(xiàn) 208
8.6.1 商品詳情頁面的設計 208
8.6.2 圖片放大鏡效果的實現(xiàn) 209
8.6.3 商品概要功能的實現(xiàn) 211
8.6.4 商品評價功能的實現(xiàn) 215
8.6.5 猜你喜歡功能的實現(xiàn) 216
8.6.6 選項卡切換效果的實現(xiàn) 218
8.7 購物車頁面的設計與實現(xiàn) 219
8.7.1 購物車頁面的設計 219
8.7.2 購物車頁面的實現(xiàn) 220
8.8 付款頁面的設計與實現(xiàn) 223
8.8.1 付款頁面的設計 223
8.8.2 付款頁面的實現(xiàn) 224
8.9 注冊和登錄頁面的設計與實現(xiàn) 227
8.9.1 注冊和登錄頁面的設計 227
8.9.2 注冊頁面的實現(xiàn) 228
8.9.3 登錄頁面的實現(xiàn) 230
8.10 項目運行 231
8.11 源碼下載 232
第9章 吃了么外賣網(wǎng) 233
——JSON Ajax Bootstrap
9.1 開發(fā)背景 233
9.2 系統(tǒng)設計 234
9.2.1 開發(fā)環(huán)境 234
9.2.2 業(yè)務流程 234
9.2.3 功能結構 235
9.3 技術準備 235
9.3.1 技術概覽 235
9.3.2 Bootstrap 237
9.4 主頁的設計與實現(xiàn) 240
9.4.1 主頁的設計 240
9.4.2 頁面頭部和頁面尾部的實現(xiàn) 241
9.4.3 導航和輪播圖的實現(xiàn) 242
9.4.4 商家分類展示的實現(xiàn) 243
9.5 商家列表頁面的設計與實現(xiàn) 246
9.5.1 商家列表頁面的設計 246
9.5.2 商家列表頁面的實現(xiàn) 247
9.6 商家詳情頁面的設計與實現(xiàn) 250
9.6.1 商家詳情頁面的設計 250
9.6.2 商家信息界面的實現(xiàn) 251
9.6.3 菜單界面的實現(xiàn) 252
9.6.4 購物車界面的實現(xiàn) 255
9.7 提交訂單頁面的設計與實現(xiàn) 256
9.7.1 提交訂單頁面的設計 256
9.7.2 提交訂單頁面的實現(xiàn) 257
9.8 選擇支付方式頁面的設計與實現(xiàn) 261
9.8.1 選擇支付方式頁面的設計 261
9.8.2 選擇支付方式頁面的實現(xiàn) 261
9.9 訂單跟蹤頁面的設計與實現(xiàn) 263
9.9.1 訂單跟蹤頁面的設計 263
9.9.2 訂單跟蹤頁面的實現(xiàn) 264
9.10 注冊和登錄頁面的設計與實現(xiàn) 266
9.10.1 注冊和登錄頁面的設計 266
9.10.2 注冊頁面的實現(xiàn) 267
9.10.3 登錄頁面的實現(xiàn) 269
9.11 項目運行 270
9.12 源碼下載 271
第10 章 星光音樂網(wǎng) 272
——XML Ajax Vue.js
10.1 開發(fā)背景 272
10.2 系統(tǒng)設計 273
10.2.1 開發(fā)環(huán)境 273
10.2.2 業(yè)務流程 273
10.2.3 功能結構 273
10.3 技術準備 274
10.3.1 技術概覽 274
10.3.2 Vue.js 275
10.4 首頁的設計與實現(xiàn) 277
10.4.1 導航欄 278
10.4.2 歌曲列表 279
10.4.3 輪播圖 281
10.4.4 歌曲排行榜 282
10.4.5 最新音樂資訊 285
10.4.6 新歌首發(fā) 287
10.5 分類歌曲列表頁面的設計與實現(xiàn) 290
10.5.1 圖片輪播效果 291
10.5.2 分頁展示分類歌曲列表 291
10.6 歌曲詳情頁面的設計與實現(xiàn) 296
10.7 在線試聽頁面的設計與實現(xiàn) 302
10.8 注冊和登錄頁面的設計與實現(xiàn) 303
10.8.1 用戶注冊頁面 303
10.8.2 用戶登錄頁面 305
10.8.3 判斷用戶是否已登錄 307
10.9 項目運行 308
10.10 源碼下載 308