JavaScript項(xiàng)目開發(fā)全程實(shí)錄

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