H5

時間 2019-11-30

標籤 h5 简体版

原文原文鏈接

第三階段：php

AJAX - 8 —— 綜合且容易出錯html

HTML5新特性 - 7 —— 零散神不聚前端

Bootstrap - 5 —— 玩命兒被單詞node

今日目標：mysql

(1)WebStorm的使用 —— 掌握git

(2)H5新特性之一——表單2.0 —— 掌握web

1.經常使用的前端開發軟件面試

(1)小型軟件：小巧啓動快，功能簡單sql

Editplus、Notepad++、VIM、Emacs數據庫

(2)中型軟件：

SublimeText

(3)中型軟件：體積大啓動慢，功能強大

Eclipse-Aptana、IntejIEDA-WebStorm、Dreamweaver

經常使用的Eclipse快捷鍵：

(1)Ctrl+Alt+↓ 複製當前行

(2)Alt+↑/↓ 向上/下移動當前行

(3)Ctrl+D 刪除當前行

(4)Ctrl+/ 註釋/取消註釋當前行

(5)Ctrl+Alt+L 格式化當前文件

(6)Alt+鼠標左鍵進入多行編輯模式，ESC或左鍵退出

2.HTML5新特性 —— 十大新特性

(1)新的語義標籤和屬性

(2)表單新特性

(3)視頻和音頻

(4)Canvas繪圖

(5)SVG繪圖

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

面試題：

HTML5新增了哪些標籤？廢棄了哪些標籤？

HTML5新增了哪些標籤屬性？廢棄了哪些標籤屬性？

3.HTML5表單新特性

(1)新的input type

(2)新的表單標籤

(3)表單標籤的新屬性

4. HTML5表單新特性之——新的input type

HTML5以前已有的input type：

text、password、radio、checkbox、file、submit、reset、button、image、hidden

HTML5新增長的input type：

(1)email：郵件輸入域，在表單提交時提供簡單的郵箱格式驗證，並彈出一個提示窗口(可定製內容不能定製樣式)

(2)url：URL地址輸入域，在表單提交時提供簡單的URL地址格式驗證，並彈出一個提示窗口(可定製內容不能定製樣式)

(3)number：數字輸入域，在表單提交時提供簡單的數字格式驗證，並彈出一個提示窗口(可定製內容不能定製樣式)

(4)tel：電話號碼輸入域，在手機瀏覽器中彈出數字輸入鍵盤

(5)search：搜索輸入域，在手機瀏覽器中右下角呈現搜索按鍵

(6)range：範圍選擇控件，幫助用戶在必定範圍內選擇一個數字

練習：實現一個調色板——11:40

(7)color：顏色選擇控件，瀏覽器並未本身實現顏色選擇框，而是使用操做系統自帶的顏色選擇控件

(8)date：日期選擇控件，FF沒有實現，推薦使用第三方插件代替，如jQueryUI-datepicker、laydate等

(9)month：月份選擇控件，FF沒有實現

(10)week：星期選擇控件，FF沒有實現

複習：

HTML5新特性：

(1)新的語義標籤和屬性

(2)表單新特性

1)新的input type——10個

email、url、number、tel、search、range、color、date、month、week

2)新的表單元素——4個

datalist、progress、meter、output

3)表單元素的新屬性——12個

autocomplete、autofocus、placeholder、multiple、form

required、maxlength、minlength、max、min、step、pattern

(3)視頻和音頻

(4)Canvas繪圖

(5)SVG繪圖

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

今日目標：

(1)視頻和音頻 —— 簡單必須掌握

(2)Canvas繪圖 —— 重點&難點

1.面試題：Flash被HTML5取代在哪些方面？

音頻和視頻 —— <video>和<audio>

繪圖 —— <canvas>

動畫/遊戲 —— <canvas>+定時器

統計圖表 —— <canvas>、<svg>

客戶端數據存儲 —— WebStorage

2.HTML5新特性——視頻播放

HTML5提供了一個新的標籤<video>標籤，用於播放視頻。該標籤默認是一個300*150的inline-block。使用方法：

<video>

</video>

VIDEO元素/對象的屬性：

(1)src：指定要播放的視頻的資源路徑

(2)autoplay：false，是否自動播放

(3)controls：false，是否顯示播放控件，提示：不一樣瀏覽器的播放控件外觀不一樣

(4)currentTime：0，當前播放的時間點（s）

(5)duration：60，影片總時長（s）

(6)ended：false，是否播放到結尾

(7)loop：false，是否循環播放

(8)muted：false，是否靜音

(9)volume：1，音量設置（0~1），對象屬性，不用於標籤

(10)paused：當前是否處於暫停狀態

(11)poster：''，指定視頻第一幀播放前的電影海報

(12)preload：指定視頻預加載方案，可取值：

auto：默認值，自動預加載視頻的寬高、時長、第一幀內容、並緩衝了必定的時長

metadata：元數據，只預加載視頻的寬高、時長、第一幀內容

none：不預加載任何內容

VIDEO對象的方法：

play()：開始播放

pause()：暫停播放

VIDEO對象的事件：

onplay：視頻開始播放（可能多種緣由引發）

onpause：視頻開始暫停（可能多種緣由引發）

onplaying:

練習：

(1)不使用video默認的播放控件，使用自定義的按鈕，控制視頻的播放和暫停

(2)不論何種緣由，影片一暫停即顯示出廣告圖片；一播放廣告圖片就隱藏；提示：不能使用poster屬性（影片海報只能在第一次播放以前顯示一次）

午間思考：如何將video做爲DIV的背景並自動播放？

複習：

HTML5新特性：

(1)新的語義標籤和屬性

(2)表單2.0

(3)視頻和音頻

(4)Canvas繪圖 —— 重點

(5)SVG繪圖

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

JS繪圖技術：

var ctx = c.getContext('2d');

//經常使用屬性

ctx.fillStyle = 顏色/漸變對象

ctx.strokeStyle =顏色/漸變對象

ctx.lineWidth = 1

ctx.font = '10px sans-serif'

ctx.textBaseline = 'alphabetic'

ctx.shadowColor = 'rgba(0,0,0,0)'

ctx.shadowOffsetX = 0

ctx.shadowOffsetY = 0

ctx.shadowBlur = 0

//經常使用方法

(1)繪製矩形

ctx.fillRect(x, y, w, h)

ctx.strokeRect(x, y, w, h)

ctx.clearRect(x, y, w, h)

(2)繪製文本

ctx.fillText(txt, x, y)

ctx.strokeText(txt, x, y)

ctx.measureText(txt).width

(3)繪製路徑

(4)繪製圖像

今日目標：

(1)使用Canvas繪製路徑和圖像 —— 重點&難點

(2)使用第三方繪圖工具 —— Chart.js，掌握

1.使用Canvas繪製路徑(Path)

提示：Canvas中的路徑概念與Photoshop中鋼筆工具相似的。路徑自己是不可見的，有三個用途：描邊、填充(閉合)、裁剪(閉合)

Canavs中與路徑繪製相關方法：

ctx.beginPath() //開始一條新路徑

ctx.closePath() //閉合路徑，讓最後一個錨點自動鏈接到第一個錨點

ctx.moveTo(x, y) //移動到指定點

ctx.lineTo(x,y) //從當前點到指定點繪製直線路徑

ctx.arc() //繪製拱形路徑

ctx.ellipse() //繪製橢圓路徑

ctx.bezierCurveTo() //繪製貝塞爾曲線路徑

----------------------------------------------

ctx.stroke()

ctx.fill()

ctx.clip()

練習：

(1)使用直線路徑繪製座標軸

(2)使用圓拱+定時器繪製能夠前進的進度條

(3)建立一個函數：openMouth()，在畫布上繪製以下的圖形：

(4)建立一個函數：closeMouth()，在畫布上繪製以下的圖形：

(5)使用定時器，不停的調用openMouth()和closeMouth()

複習：

HTML5新特性：

1.新的語義標籤和屬性

2.表單2.0

3.視頻和音頻

4.Canvas繪圖

5.SVG繪圖

6.地理定位

7.拖放API

8.WebWorker

9.WebStorage

10.WebSocket

Canvas繪圖使用方法：

var ctx = c.getContext('2d');

//繪製矩形

ctx.fillRect() ctx.strokeRect() ctx.clearRect()

//繪製文本

ctx.fillText() ctx.strokeText() ctx.measureText()

//繪製路徑

ctx.beginPath() ctx.closePath()

ctx.moveTo() ctx.lineTo() ctx.arc()

ctx.stroke() ctx.fill() ctx.clip()

//繪製圖像

ctx.drawImage()

//圖形圖像變形

ctx.translate() ctx.rotate() ctx.scale()

ctx.save() ctx.restore()

今日目標：

(1)補充：Canvas小知識點

(2)SVG繪圖技術 —— 重點

(3)第三方2D繪圖工具 —— Two.js —— 瞭解

1.如何等待全部圖片加載完成後，纔開始繪圖？

多張圖片繪製須要按照特定的順序，而加載完成順序是徹底沒法預測，只能等待全部圖片加載完成，才能開始繪製。

/***************************

//典型的錯誤代碼

var img1 = new Image();

img1.src = "";

img1.onload = function(){

ctx.drawImage(img1, x, y);

}

var img2 = new Image();

img2.src = "";

img2.onload = function(){

ctx.drawImage(img2, x, y);

}

******************************/

var progress = 0; //加載進度 0~100

var img1 = new Image();

img1.src = "";

img1.onload = function(){

progress += 80;

if(progress===100){

startDraw();

}

var img2 = new Image();

img2.src = "";

img2.onload = function(){

progress += 20;

if(progress===100){

startDraw();

}

2.如何爲Canvas上的圖形/圖像綁定事件監聽？——難點

網頁只能爲DOM元素綁定監聽函數，Canvas繪圖技術中只要一個Canvas元素，其它圖形圖像都不是元素——沒法進行事件綁定！——

解決辦法：爲Canvas綁定監聽函數，獲取事件發生的座標，是否處於目標圖形/圖像所在範圍內——只能爲規則的圖形「綁定」監聽

Adobe Photoshop：處理位圖——每幅圖像由點(rgb)組成，善於描述顏色的細節變化，可用於照片等領域——放大後會出現馬賽克失真。

Adobe Illustrator：處理矢量圖——每幅圖像由線條(須要指定方向、值)，能夠無限縮放而不失真——不善於描述顏色的細節變化。

3.HTML5新特性之五——SVG繪圖

	Canvas繪圖	SVG繪圖
繪圖類型	位圖	矢量圖
縮放	失真	不失真
顏色細節	豐富	不夠豐富
應用領域	照片、遊戲	統計圖、圖標、地圖
內容	JS繪製	每一個圖形都是標籤
事件綁定	不方便	方便

Scalable Vector Graphiph，可縮放的矢量圖，此技術在2000年就已經存在了，獨立於網頁的一門技術；HTML5以後，歸入了HTML5標準標籤庫，並進行了必定的瘦身。

SVG技術的使用方法：

(1)HTML5以前的使用方法：

SVG標籤不屬於HTML4或XHTML標籤，只能編寫在獨立的XML文件中，首先編寫一個SVG文件（本質是一個XML文件），而後在HTML中使用IMG/IFRAME/OBJECT/EMBED等標籤引入.svg文件

(2)HTML5以後的使用方法——H5已經把SVG標籤採納：

在HTML文件中直接使用SVG相關標籤便可

練習：

(1)使用SVG矩形繪製一個國際象棋的棋盤——使用HTML中的rect標籤

(2)使用SVG矩形繪製一個國際象棋的棋盤——使用JS動態建立rect標籤

4.使用SVG繪製矩形

注意：

(1)SVG圖形的樣式能夠用HTML屬性賦值，也可使用CSS形式，但不接受普通的CSS屬性！只能使用SVG元素的專有樣式屬性。

(2)SVG圖形的屬性不屬於HTMLDOM標準，只能使用核心DOM方法操做其屬性： rect.setAttribute('','')

(3)使用JS動態建立SVG元素，1)用svg.innerHTML ='' 2)用document.createElementNS('', '')，不能使用document.createElement()

(4)SVG元素的nodeName都是純小寫形式！與普通的HTML元素不一樣！

練習：

(1)在SVG畫布上繪製一個矩形，從左移動到右，同時填充顏色還在不停的隨機改變

(2)根據以下的JSON數據，繪製柱狀統計圖——有坑！！

[

{"label": "1月", "value": 350},

{"label": "2月", "value": 300},

{"label": "3月", "value": 450},

{"label": "4月", "value": 380}

]

5.使用SVG繪製圓形

練習：

(1)建立30個大小隨機、顏色隨機、透明度隨機的圓形

提示：使用createElementNS()建立元素,setAttribute()修改屬性

(2)點擊某個圓形，其慢慢變大、變淡...... 直至消失，從DOM樹上刪除該元素

(3)實現「走馬觀花」效果，點擊svg畫布的某處，即在此處生成一個圓形，當即變大、變淡...直至消失

6.使用SVG繪製橢圓

7.使用SVG繪製直線

注意：全部的SVG圖形默認只有填充色，沒有描邊色。

練習：使用line建立以下的圖標：

提示：能夠把多個元素放在一個<g></g>小組中，能夠自動繼承小組的公共屬性

8.使用SVG繪製折線

練習：使用折線繪製以下的圖標

9.使用SVG繪製多邊形 17:25

練習：使用多邊形繪製以下的圖標：

10.使用SVG繪製文本

提示：傳統的標籤不能置於SVG內部！同理，SVG的標籤也不能放在其它元素內部！

11 .使用SVG繪製圖像

提示：在SVG中繪製圖像使用image元素，引入位圖後，此SVG圖片放大後會失真。

12.如何使用漸變效果

<defs>

</linearGradient>

</defs>

</svg>

課後練習：

1) 假設前端頁面獲取到後臺返回了以下的JSON數據：

'[{"label":"HTML",value:3}, {"label":"CSS",value:5},....]'

根據這段JSON字符串，繪製下圖：

3)自學two.js工具的使用，理解其做用，仿寫官方示例代碼，學會使用方法，實現以下效果，月亮繞着地球轉，地球繞着太陽轉：

複習：

HTML5新特性

1.新的語義標籤

2.表單2.0

3.視頻和音頻

4.Canvas繪圖

5.SVG繪圖

6.地理定位

7.拖放API

8.WebWorker

9.WebStorage

10.WebSocket

SVG的使用：

繪製矩形

繪製圓形

繪製橢圓

繪製直線

繪製折線

繪製多邊形

繪製文本

繪製圖像

貝塞爾路徑

特效對象

<defs>

</linearGradient>

</defs>

</svg>

今日目標：

(1)補充：SVG相關小知識點

(2)地理定位——掌握

(3)拖放API——重點&小難點

1.SVG中定義特效對象——漸變特效

2.SVG中定義特效對象——濾鏡(filter)——高斯模糊路徑

<defs>

</filter>

</defs>

更多濾鏡效果及使用方法：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

前端領域中可用的繪圖技術：

(1)Canvas —— 2D位圖

(2)SVG —— 2D矢量圖

(3)WebGL —— 2D/3D圖

繪製統計圖，能夠選用上述任意一種！但三種技術可供調用的代碼不同！

3.第三方繪圖工具庫——Two.js —— 瞭解&重點在自學過程

(1)看官網，找介紹

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

提供了一套統一的接口，可用於在svg、canvas、webgl中實現常見圖形的繪製，如矩形、三角形、圓形.....

不足：爲了兼容三種技術，必須捨棄某個技術所專有的效果；效率上有待提升。

(2)找示例，寫Demo

(3)查API Document，在項目中加以應用

4.HTML5新特性之六——地理定位

地理定位：使用JS獲取瀏覽器當前所在的地理座標，實現LBS（Location Based Service，基於定位的服務），具體數據包括：

經度：longitude

緯度：latitude

海拔：altitude

速度：speed

技術上如何獲取瀏覽器所在的定位信息：

(1)手機中的瀏覽器

靠手機內置的GPS芯片數據，精度在「米」級

靠手機與之通信基站數據，精度在「千米」級

(2)PC中的瀏覽器

靠IP地址反向解析，精度在「千米」級

HTML5新增了用於獲取瀏覽器所在定位的對象：

window.navigator.geolocation {

getCurrentPosition: fn 用於獲取當前定位信息

watchPosition: fn 不停的監視定位信息的改變

clearWatch: fn 清除監視

}

------------------------------------

navigator.geolocation.getCurrentPosition(

funcntion(pos){

console.log('定位成功');

}, function(err){

console.log('定位失敗');

}

)

5.如何在頁面中使用百度地圖 —— 擴展小知識

從map.baidu.com下點擊「地圖開放平臺」：

目前官網： http://lbsyun.baidu.com/

JS-API使用手冊： http://lbsyun.baidu.com/index.php?title=jspopular

第三方工具的學習步驟：

(1)打開官網，找定義，功能說明

http://lbsyun.baidu.com/

能夠基於百度地圖進行Android、iOS、Web應用開發

http://lbsyun.baidu.com/index.php?title=jspopular

(2)找示例程序

(3)找API文檔，編寫本身的應用

使用百度地圖API步驟：

(1)註冊百度開發者帳號

(2)使用開發者帳號申請建立一個Web應用帳號，獲取一個訪問百度地圖的密鑰（AccessKey）

http://lbsyun.baidu.com/apiconsole/key

(3)編寫HTML網頁，出示當前網站的訪問密鑰，調用百度地圖API

</script>

//建立地圖實例

var map = new BMap.Map("container");

//建立一個指定的點 —— 文博大廈

var p = new BMap.Point(116.300982,39.915907);

//以指定點爲中心顯示地圖

map.centerAndZoom(p, 17);

6.HTML5新特性之七 —— 拖放API —— 重點&小難點

Drag：拖動

Drop：釋放

在HTML5以前只能使用鼠標事件模擬出「拖放」效果；HTML5專門爲拖放提供了7個事件句柄。

(1)拖動的源對象(source)能夠觸發的事件：

dragstart：拖動開始

drag：拖動進行中

dragend：拖動結束

源對象的拖動過程：dragstart x 1 + drag x n + dragend x 1

練習：實現一個能夠隨着鼠標拖動而移動的小飛機

(2)拖動的目標對象(target)能夠觸發的事件：

dragenter：拖動着進入

dragover：拖動着在目標對象上方

dragleave：拖動着離開

drop：鬆手/釋放/鬆開

目標對象的進入/離開過程：

dragenter x 1 + dragover x n + dragleave x 1

目標對象的進入/釋放過程：

dragenter x 1 + dragover x n + drop x 1

注意：必須阻止dragover的默認行爲！不然drop事件沒法觸發！

練習：

(1)垃圾桶初始時半透明；拖動小飛機進入垃圾桶變爲不透明，離開後從新半透明，在垃圾桶上方鬆手也變爲半透明。

提示：須要用到目標對象的四個事件

(2)一個垃圾桶，下方有一個容器(div#container)，其中有三個小飛機，拖動某個小飛機到垃圾桶上方，則容器中刪除此小飛機

提示：須要用到源對象和目標對象的多個事件

7.如何在拖動的源對象和目標對象間傳遞數據

如何在7個事件間傳遞數據？

源對象事件——3個：

目標對象事件——4個：

(1)方法一：使用全局變量 —— 全局對象污染

(2)方法二：使用拖放事件對象的dataTransfer屬性

說明：dataTransfer，用做數據傳遞/轉移，看做「拖拉機」

源對象觸發事件時保存k-v數據：

src.onxxx = function(e){

e.dataTransfer.setData( 'key', 'value' );

}

目標對象觸發事件時獲取k-v數據：

target.onxxx = function(e){

var value = e.dataTransfer.getData( 'key' )

}

課後練習：英雄選擇

要求：

拖動某架飛機到目標區域，則在上方顯示出該飛機；下方該飛機圖消失；替換選中區域已有的飛機。

拖動另外一架飛機到目標區域，則顯示出該飛機，以前選中的飛機變爲從新回到待選區域。

複習：

HTML5新特性重要程度(10)

1.新的語義標籤 10

2.表單2.0 7

3.視頻和音頻 8

4.Canvas繪圖 9

5.SVG繪圖 9

6.地理定位 1

7.拖放API 4

8.WebWorker 4

9.WebStorage 9

10.WebSocket 2

拖放API——七個事件：

源對象能夠觸發的事件：

dragstart：

drag：

dragend：

目標對象能夠觸發的事件：

dragenter：

dragover： —— e.preventDefault()

dragleave：

drop：

今日目標：

(1)擴展：如何在網頁中拖拽顯示客戶端的圖片

(2)WebWorker

(3)WebStorage

1.面試題：如何在服務器端下載的網頁中顯示客戶端圖片？

通常狀況下，網頁只能顯示服務器上的圖片；

HTML5中，能夠實現用戶拖拽一張本地的圖片顯示在服務器端下載的網頁中。

container.ondrop = function(e){

var f0 = e.dataTransfer.files[0];

var reader = new FileReader();

reader.readAsDataURL(f0);

reader.onload = function(){

///讀取完成，數據在reader.result中

}

HTML5中提供的用於文件輸入輸出(I/O)的對象：

File：表明一個文件/目錄對象

FileList：表明一個文件列表（類數組對象）

FileReader：用於從文件中讀取內容

FileWriter：用於向向文件寫出內容

2.面試題：Chrome瀏覽器的線程模型是怎樣的？

程序：計算機能夠執行的代碼，存在於磁盤中——靜止的

進程：把程序調入到內存中，等待被CPU執行——活動的

線程：是CPU執行進程代碼的基本單位——生產任務

面試題：進程和線程間的關係？

進程是操做系統分配內存的基本單位。

線程處於進程內部，是CPU執行代碼的基本單位。

一個進程中至少有一個線程，也能夠有多個。

多個線程間併發執行——宏觀上看是「同時」執行，微觀上看是「輪流」執行。

Chrome中的線程模型：

(1)Chrome中發起HTTP請求最多可使用6個併發的線程；

(2)Chrome中負責向頁面中執行繪製任務(執行HTML/CSS/JS代碼)的只有1個線程——UI主線程。

複習：

見思惟導圖

今日目標：

(1)補充小知識點：localStorage的事件

(2)HTML5新特性之十——WebSocket

(3)HTML5階段項目 —— 目前全部知識的大綜合演練

1.如何得知localStorage中數據的修改？

localStorage中任何數據的修改，都會觸發一個事件：

window.onstorage = function(){ }

2. HTML5新特性之十——WebSocket

提示：重在概念的理解

HTTP協議：是基於「請求-響應」模型的協議，客戶端發起一個請求，服務器就要返回一個響應，請求消息和響應消息是一一對應的！沒有請求就沒有響應！在一些特別的應用場景下（如實時走勢圖，在線聊天室），只能使用「定時器+AJAX」不停的向服務器發起請求以得到最新的數據——「心跳請求」，解決方案並不完美：心跳過快服務器壓力過大，過慢致使數據實時性差。

WebSocket協議：是基於「廣播-收聽」模型的協議，只要客戶端鏈接到服務器上，就再也不斷開，一方能夠發送多條消息，對方只接收而不發送，能夠解決上述應用中的問題。這個協議自己的問題：客戶端與服務器是「永久鏈接」，致使服務器能夠同時鏈接的客戶端數是有限的！

基於WebSocket協議的應用必需兩套程序：

(1)服務器端程序：

可以使用PHP、Java、Node.js等語言編寫

注意：PHP編寫的WebSocket服務器獨立運行的，無需依賴Apache！

c:/xampp/php/php.exe e:/socket_server.php

記得修改php.ini文件的907行！去掉開頭的分號

extension=php_sockets.dll

(2)客戶端程序：

可以使用PHP、Java、HTML5/JavaScript等語言編寫

使用HTML5提供的WebSocket對象建立WS客戶端：

var wsClient = new WebSocket('ws://地址:端口');

wsClient.onopen = function(){ //鏈接成功

ws.send('msg'); //發送消息

ws.onmessage = function(e){ //接收消息

//e.data

}

WebSocket是一種新的通信協議，與HTTP協議不一樣，是基於「廣播-收聽」模型的協議，適用於一些特殊的應用場合，如聊天室、實時走勢獲取

3.「京東商城項目」已經實現的功能點

(1)首頁

(2)產品列表頁

(3)產品詳情頁

(4)登陸頁

(5)註冊頁

(6)購物車頁

(7)訂單生成頁

(8)用戶中心頁

4.HTML5階段項目——京東用戶中心

須要實現的功能點：

(1)用戶註冊

(2)查看購物車後肯定下單，生成訂單

(3)進入用戶中心查看本身的全部訂單

(4)進入用戶中心查看本身的消費統計

(5)進入用戶中心參與幸運抽獎

須要使用到的技術：

MySQL、PHP、AJAX、Video、表單2.0、WebStorage、Canvas繪圖、SVG繪圖

實現步驟： SQL -> PHP -> HTML/JS

(1)編寫PHP，user_add.php，接收客戶端提交的uname和upwd，添加到數據庫中，返回{"code":1,"userId": 3}

(2)編寫HTML，register.html，實現異步的用戶註冊，成功後跳轉到產品列表頁

-----------------文華老師的進度線----------------------

(3)修改HTML，productlist.html，用戶登陸成功後把用戶名和編號保存到sessionStorage中

(4)修改HTML，shoppingcart.html，從sessionStorage中讀取登陸用戶的信息，若沒有，則跳轉到productlist.html讓用戶登陸；如有則顯示出「歡迎回來：XXX」。點擊「肯定下單」按鈕後跳轉到addorder.html

(5)建立HTML，addorder.html，異步請求頁頭和頁尾，若沒有用戶登陸信息，則跳轉到productlist.html讓用戶登陸

(6)修改HTML，addorder.html，根據登陸信息，異步請求當前登陸用戶購物車中的內容，顯示在「下單頁面」中

1. HTML5階段項目——京東用戶中心

須要實現的功能點：

(1)用戶註冊

(2)查看購物車後肯定下單，生成訂單

(3)進入用戶中心查看本身的全部訂單

(4)進入用戶中心查看本身的消費統計

(5)進入用戶中心參與幸運抽獎

須要使用到的技術：

MySQL、PHP、AJAX、Video、表單2.0、WebStorage、Canvas繪圖、SVG繪圖

實現步驟： SQL -> PHP -> HTML/JS

(1)編寫PHP，user_add.php，接收客戶端提交的uname和upwd，添加到數據庫中，返回{"code":1,"userId": 3}

(2)編寫HTML，register.html，實現異步的用戶註冊，成功後跳轉到產品列表頁

(3)修改HTML，productlist.html，用戶登陸成功後把用戶名和編號保存到sessionStorage中

(4)修改HTML，shoppingcart.html，從sessionStorage中讀取登陸用戶的信息，若沒有，則跳轉到productlist.html讓用戶登陸；如有則顯示出「歡迎回來：XXX」。點擊「去結算」按鈕後跳轉到addorder.html

(5)建立HTML，addorder.html，異步請求頁頭和頁尾，若沒有用戶登陸信息，則跳轉到productlist.html讓用戶登陸

(6)修改HTML，addorder.html，根據登陸信息，異步請求當前登陸用戶購物車中的內容，顯示在「下單頁面」中

(7)編寫SQL，添加新的表

建立訂單信息表：jd_order( oid, rcvName, addr, price, payment(付款方式1/2/3/4)，orderTime, status(訂單狀態1/2/3/4/5/6)，userId )

建立訂單詳情表：jd_order_detail ( did, orderId, productId, count )

(8)編寫PHP，order_add.php，接收客戶端的rcvName, addr, price, payment(付款方式1/2/3/4)，userId，執行以下的SQL:

SQL1：向jd_order表中插入一行記錄，獲得oid

SQL2：讀取當前用戶購物車中的條目，

SQL3：（循環）針對每一個購物車項執行INSERT，插入到jd_order_detail

SQL4：刪除當前用戶購物車中的條目

返回：{"code":1, "orderId": 9234234134}

(9)修改HTML，addorder.html，把全部的用戶輸入/選擇全放在<input type="hidden">，點擊「提交訂單」後，異步提交給服務器，獲取到訂單編號，跳轉到addorder_succ.html，提示下單成功

-------------------文華老師的進度線----------------------

(10)建立HTML，usercenter.html，異步請求頁頭和頁尾

(11)修改HTML，usercenter.html，主體部分實現佈局：「父容器寬度不定，左側定寬210px，右側佔剩餘所有」—— 面試題

(12)修改HTML，usercenter.html，點擊左側的附加導航(affix)，實現右側內容的切換

(13)建立PHP，my_order.php，接收客戶端提交的用戶編號，獲取該用戶對應的全部訂單，以JSON格式返回：[{},{}...] —— 難點

SQL1： SELECT * FROM jd_order WHERE userId=?

foreach($list as $order){

SQL2：SELECT * FROM jd_product WHERE pid IN (SELECT productId FROM jd_order_detail WHERE orderId=?)

$order['productList'] = mysqli_fetch_all($result);

}

(14)修改HTML，usercenter.html，待頁面加載完成，異步請求當前用戶全部的訂單，顯示TABLE中

2.面試題：如何實現特定佈局：父容器寬度不定，左側定寬210px，右側佔剩餘所有

.parent { }

.left {

float: left;

width: 210px;

}

.right {

margin-left: 210px;

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。