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

第1章 幸運大抽獎 1
——運算符 循環(huán)控制 函數(shù) Math 對象
1.1 開發(fā)背景 1
1.2 系統(tǒng)設(shè)計 2
1.2.1 開發(fā)環(huán)境 2
1.2.2 業(yè)務(wù)流程 2
1.2.3 功能結(jié)構(gòu) 2
1.3 技術(shù)準備 3
1.4 功能設(shè)計 7
1.4.1 抽獎界面設(shè)計 7
1.4.2 初始化單元格的位置 10
1.4.3 抽獎功能的實現(xiàn) 11
1.4.4 獲取抽獎結(jié)果 12
1.5 項目運行 12
1.6 源碼下載 13
第2章 精美萬年歷設(shè)計 14
——字符串操作 條件判斷 數(shù)組操作 Date 對象
2.1 開發(fā)背景 14
2.2 系統(tǒng)設(shè)計 15
2.2.1 開發(fā)環(huán)境 15
2.2.2 業(yè)務(wù)流程 15
2.2.3 功能結(jié)構(gòu) 15
2.3 技術(shù)準備 16
2.4 功能設(shè)計 21
2.4.1 萬年歷界面設(shè)計 21
2.4.2 生成公歷日期和農(nóng)歷日期 25
2.4.3 選擇年月和切換年月的實現(xiàn) 30
2.4.4 查看假期安排 32
2.4.5 快速返回當(dāng)前日期 33
2.5 項目運行 34
2.6 源碼下載 34
第3章 別踩白塊兒小游戲 35
——構(gòu)造函數(shù) 原型 Event 對象 Document 對象
3.1 開發(fā)背景 35
3.2 系統(tǒng)設(shè)計 36
3.2.1 開發(fā)環(huán)境 36
3.2.2 業(yè)務(wù)流程 36
3.2.3 功能結(jié)構(gòu) 36
3.3 技術(shù)準備 37
3.4 功能設(shè)計 42
3.4.1 游戲初始界面設(shè)計 42
3.4.2 選擇游戲模式界面設(shè)計 45
3.4.3 選擇塊兒數(shù)界面設(shè)計 45
3.4.4 經(jīng)典模式游戲設(shè)計 46
3.4.5 街機模式游戲設(shè)計 49
3.4.6 游戲結(jié)束界面設(shè)計 52
3.5 項目運行 53
3.6 源碼下載 54
第4章 五子棋小游戲 55
——對象 事件處理 DOM 文檔對象模型 二維數(shù)組
4.1 開發(fā)背景 55
4.2 系統(tǒng)設(shè)計 56
4.2.1 開發(fā)環(huán)境 56
4.2.2 業(yè)務(wù)流程 56
4.2.3 功能結(jié)構(gòu) 57
4.3 技術(shù)準備 57
4.3.1 技術(shù)概覽 57
4.3.2 二維數(shù)組 59
4.4 游戲初始界面設(shè)計 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 棋子權(quán)重的判斷 70
4.6 顯示游戲結(jié)果 73
4.7 項目運行 76
4.8 源碼下載 77
第5章 明日在線教育網(wǎng)站 78
——圖像處理 Form 對象 Window對象 localStorage
5.1 開發(fā)背景 78
5.2 系統(tǒng)設(shè)計 79
5.2.1 開發(fā)環(huán)境 79
5.2.2 業(yè)務(wù)流程 79
5.2.3 功能結(jié)構(gòu) 79
5.3 技術(shù)準備 80
5.3.1 技術(shù)概覽 80
5.3.2 localStorage 83
5.4 首頁設(shè)計 84
5.4.1 輪播圖設(shè)計 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 課程列表頁面設(shè)計 92
5.6 課程詳情頁面設(shè)計 96
5.6.1 構(gòu)建頁面 98
5.6.2 觀看視頻頁面設(shè)計 100
5.7 登錄和注冊頁面設(shè)計 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)設(shè)計 109
6.2.1 開發(fā)環(huán)境 109
6.2.2 業(yè)務(wù)流程 109
6.2.3 功能結(jié)構(gòu) 110
6.3 技術(shù)準備 110
6.4 公共文件設(shè)計 114
6.4.1 頁面頭部文件設(shè)計 114
6.4.2 頁面底部文件設(shè)計 115
6.5 首頁設(shè)計 116
6.6 熱門景點頁面設(shè)計 120
6.6.1 景點列表頁面設(shè)計 121
6.6.2 景點詳情頁面設(shè)計 123
6.7 酒店住宿頁面設(shè)計 128
6.7.1 酒店列表頁面設(shè)計 128
6.7.2 酒店搜索結(jié)果頁面設(shè)計 133
6.7.3 酒店詳情頁面設(shè)計 135
6.8 門票預(yù)訂頁面設(shè)計 140
6.9 游客服務(wù)頁面設(shè)計 144
6.10 用戶中心頁面設(shè)計 147
6.10.1 用戶注冊頁面設(shè)計 148
6.10.2 用戶登錄頁面設(shè)計 150
6.11 項目運行 152
6.12 源碼下載 152
第7章 花瓣電影評分網(wǎng) 153
——DOM 操作 設(shè)置超時 Style 對象
7.1 開發(fā)背景 153
7.2 系統(tǒng)設(shè)計 154
7.2.1 開發(fā)環(huán)境 154
7.2.2 業(yè)務(wù)流程 154
7.2.3 功能結(jié)構(gòu) 154
7.3 技術(shù)準備 155
7.3.1 技術(shù)概覽 155
7.3.2 querySelector()方法 155
7.3.3 querySelectorAll()方法 156
7.3.4 classList 屬性 156
7.4 公共文件設(shè)計 157
7.4.1 頁面頭部文件設(shè)計 157
7.4.2 頁面底部文件設(shè)計 158
7.5 主頁設(shè)計 158
7.5.1 “正在熱映”版塊的實現(xiàn) 159
7.5.2 “最近熱門的電影”版塊的實現(xiàn) 164
7.5.3 “一周口碑榜”版塊的實現(xiàn) 167
7.6 電影信息頁面設(shè)計 168
7.6.1 “電影基本信息和評分”版塊的設(shè)計 168
7.6.2 “劇情簡介”版塊的實現(xiàn) 171
7.6.3 “類似電影推薦”版塊的實現(xiàn) 171
7.7 注冊和登錄功能設(shè)計 172
7.7.1 用戶注冊頁面設(shè)計 173
7.7.2 用戶登錄頁面設(shè)計 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)設(shè)計 189
8.2.1 開發(fā)環(huán)境 189
8.2.2 業(yè)務(wù)流程 189
8.2.3 功能結(jié)構(gòu) 189
8.3 技術(shù)準備 190
8.3.1 技術(shù)概覽 190
8.3.2 sessionStorage 191
8.3.3 insertAdjacentHTML()方法 192
8.4 主頁的設(shè)計與實現(xiàn) 192
8.4.1 主頁的設(shè)計 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 商品列表頁面的設(shè)計與實現(xiàn) 202
8.5.1 商品列表頁面的設(shè)計 202
8.5.2 分類選項功能的實現(xiàn) 202
8.5.3 商品列表區(qū)的實現(xiàn) 205
8.6 商品詳情頁面的設(shè)計與實現(xiàn) 208
8.6.1 商品詳情頁面的設(shè)計 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 購物車頁面的設(shè)計與實現(xiàn) 219
8.7.1 購物車頁面的設(shè)計 219
8.7.2 購物車頁面的實現(xiàn) 220
8.8 付款頁面的設(shè)計與實現(xiàn) 223
8.8.1 付款頁面的設(shè)計 223
8.8.2 付款頁面的實現(xiàn) 224
8.9 注冊和登錄頁面的設(shè)計與實現(xiàn) 227
8.9.1 注冊和登錄頁面的設(shè)計 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)設(shè)計 234
9.2.1 開發(fā)環(huán)境 234
9.2.2 業(yè)務(wù)流程 234
9.2.3 功能結(jié)構(gòu) 235
9.3 技術(shù)準備 235
9.3.1 技術(shù)概覽 235
9.3.2 Bootstrap 237
9.4 主頁的設(shè)計與實現(xiàn) 240
9.4.1 主頁的設(shè)計 240
9.4.2 頁面頭部和頁面尾部的實現(xiàn) 241
9.4.3 導(dǎo)航和輪播圖的實現(xiàn) 242
9.4.4 商家分類展示的實現(xiàn) 243
9.5 商家列表頁面的設(shè)計與實現(xiàn) 246
9.5.1 商家列表頁面的設(shè)計 246
9.5.2 商家列表頁面的實現(xiàn) 247
9.6 商家詳情頁面的設(shè)計與實現(xiàn) 250
9.6.1 商家詳情頁面的設(shè)計 250
9.6.2 商家信息界面的實現(xiàn) 251
9.6.3 菜單界面的實現(xiàn) 252
9.6.4 購物車界面的實現(xiàn) 255
9.7 提交訂單頁面的設(shè)計與實現(xiàn) 256
9.7.1 提交訂單頁面的設(shè)計 256
9.7.2 提交訂單頁面的實現(xiàn) 257
9.8 選擇支付方式頁面的設(shè)計與實現(xiàn) 261
9.8.1 選擇支付方式頁面的設(shè)計 261
9.8.2 選擇支付方式頁面的實現(xiàn) 261
9.9 訂單跟蹤頁面的設(shè)計與實現(xiàn) 263
9.9.1 訂單跟蹤頁面的設(shè)計 263
9.9.2 訂單跟蹤頁面的實現(xiàn) 264
9.10 注冊和登錄頁面的設(shè)計與實現(xiàn) 266
9.10.1 注冊和登錄頁面的設(shè)計 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)設(shè)計 273
10.2.1 開發(fā)環(huán)境 273
10.2.2 業(yè)務(wù)流程 273
10.2.3 功能結(jié)構(gòu) 273
10.3 技術(shù)準備 274
10.3.1 技術(shù)概覽 274
10.3.2 Vue.js 275
10.4 首頁的設(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 分類歌曲列表頁面的設(shè)計與實現(xiàn) 290
10.5.1 圖片輪播效果 291
10.5.2 分頁展示分類歌曲列表 291
10.6 歌曲詳情頁面的設(shè)計與實現(xiàn) 296
10.7 在線試聽頁面的設(shè)計與實現(xiàn) 302
10.8 注冊和登錄頁面的設(shè)計與實現(xiàn) 303
10.8.1 用戶注冊頁面 303
10.8.2 用戶登錄頁面 305
10.8.3 判斷用戶是否已登錄 307
10.9 項目運行 308
10.10 源碼下載 308