html5高級

時間 2019-11-19

標籤 html5 html 高級欄目 HTML5 简体版

原文原文鏈接

Html5高級php

項目回顧css

Day 01html

第三階段知識體系：前端

(1)AJAX異步請求 git

數據庫、PHP、HTTP、原生AJAX、jQuery中的AJAXweb

(2)HTML5高級特性面試

九大新特性正則表達式

(3)Boostrap框架算法

五部分sql

1.前端開發經常使用的工具軟件

(1)輕量級(>3MB)：小巧快速，但功能簡單

Editplus、Notepad++、VIM

(2)中量級(xxMB)：功能相對豐富

SublimeText

(3)重量級(xxxMB)：啓動速度慢，但功能豐富

IDE(Integrated Development Environment)

IDE = 編輯器(代碼提示) + 調試器 + 文件管理 + 項目管理 + 文件轉換程序

Dreamweaver

ApatanaStudio(基於Eclipse)

WebStorm(基於IntelJ IDEA)

經常使用快捷鍵：

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

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

(3)Ctrl+D 刪除當前行

(4)Ctrl+/ 快速（取消）註釋當前行

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

WebStorm的多行編輯模式：

開始多行編輯：按住Alt，點擊鼠標左鍵

退出多行編輯：ESC或點擊鼠標左鍵

今日目標：

1)HTML5高級新特性

面試題：HTML5中添加了哪些新的標籤？廢棄了哪些標籤？

面試題：HTML5中添加了哪些新的標籤屬性？廢棄了哪些標籤屬性？

2.HTML5高級新特性——九大新特性

1)表單新特性(表單2.0)

2)視頻和音頻

3)Canvas繪圖

4)SVG繪圖

5)地理定位

6)拖放API

7)WebWorker

8)WebStorage

9)WebSocket

提示：上述特性彼此沒有關聯！學習過程當中有些凌亂！

normalize.css：用於統一瀏覽器中標籤的默認樣式值——CSS Reset（重置）

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

已經學過的input type：

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

HTML5新添的input type：

(1)number：顯示一個數字輸入框

(2)email：顯示一個郵件地址輸入框，提交時會進行格式驗證，中間一個@符號，先後至少一個字符

(3)url：顯示一個URL地址輸入框，提交時會進行格式驗證，冒號前存在任意字符

(4)tel：顯示一個電話號碼輸入框，沒有格式驗證，僅在手機瀏覽器中彈出數字輸入鍵盤

(5)search：顯示搜索輸入框，PC中Chrome下有X號；手機中彈出鍵盤右下角按鈕顯示文字「搜索」

(6)range：顯示一個範圍選擇滑塊，讓用戶在特定範圍內選擇一個整數值

練習：實現一個調色板，修改某個滑塊的位置，能夠改變背景顏色

(7)color：顯示一個顏色選擇窗口，瀏覽器會調用操做系統提供顏色選擇窗口，提交的是顏色值

(8)date：顯示一個日期選擇窗口，瀏覽器彈出一個日期選擇窗口，不是DIV，不能定製樣式

(9)month：顯示一個月份選擇器

(10)week：顯示一個「星期/周」選擇器

4.HTML5新特性之表單新特性——新的表單元素

HTML5以前已有的表單元素——可與用戶交互並提交：

input、select/option、textarea、button

HTML5中新增的表單元素——不能與用戶交互，不能提交，僅用於信息展現：

(1)datalist：數據列表，爲某個輸入框提供輸入建議

</datalist>

(2)progress：進度條，顯示前進的進度提示條

練習：使用定時器，修改progress的進度，實現不斷前進的效果

(3)meter：度量衡，刻度尺，使用不一樣的顏色標示出數據所處的區間

最優值在上下限：黃 - 綠 - 黃

最優值小於下限：綠 - 黃 - 紅

最優值大於上限：紅 - 黃 - 綠

(4)output：輸出值，用於表示數據的計算結果，是一個語義標籤

5.HTML5新特性之表單新特性——表單元素新的屬性——重點

HTML5以前表單標籤的經常使用屬性：

name、value、readonly、disabled、checked、for

HTML5中表單標籤的新屬性：

(1)placeholder：佔位消息，爲輸入框中添加提示消息，注意：佔位消息僅用做提示，與value屬性根本不一樣，不能被提交

(2)autofocus：自動得到焦點，標識了該屬性的輸入框會自動的得到輸入焦點

(3)multiple：多項，用於email和file輸入框，容許其中輸入多個值，用逗號分隔

(4)autocomplete：自動完成，可取值on/off，指定輸入域是否記錄上一次提交的輸入，下次輸入時給予提示

(5)form：表單，指定當前輸入域所屬的表單的ID，能夠將聲明了form的輸入框放到表單元素的外面，仍然能夠一同被提交

=========與輸入驗證相關新屬性========

(6)required：必填項，若沒有輸入則沒法提交

<input required> 提交時纔會驗證

(7)min：最小值，若輸入值小於該值則沒法提交

(8)max：最大值，若輸入值大於該值則沒法提交

(9)minlength：最小長度，若輸入的字符串長度小於該值沒法提交，此屬性不是H5標準屬性，FF不支持，Chrome支持

(10)maxlength：最大長度，若輸入的字符串長度大於該值沒法提交

(11)pattern：正則表達式樣式，若輸入的字符串不符合指定的正則表達式則沒法提交

概括總結練習——表單新特性：

(1)新的input type——10個

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

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

datalist、progress、meter、output

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

placeholder、autofocus、autocomplete、multiple、form

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

required、min、max、minlength、maxlength、pattern

提示：上述紅色的特性可能在提交表單時彈出錯誤提示。

6.如何自定義表單錯誤提示消息

HTML5爲每一個表單輸入域添加了一個屬性：validity（有效性）

ValidityState {

valid : true

badInput : false 無效的輸入，number

customError : false 自定義錯誤，setCustomValidity('')參數字符串有內容，curstomError就變爲true；參數值是空字符串，customError變爲false

patternMismatch : false 樣式不匹配，pattern

rangeOverflow : false 範圍上溢出，max

rangeUnderflow : false 範圍下溢出，min

stepMismatch : false 步長不匹配，step

tooLong : false 字符串太長，maxlength

tooShort : false 字符串過短，minlength

typeMismatch : false 類型不匹配，email/url

valueMissing : false 值缺失，required

}

該對象中的屬性值隨着輸入域中值的改變而當即改變，不會等到表單提交。其中只有valid爲true時，表示輸入域中的值是有效的，才能被提交；只要其它的某個屬性值爲true，valid屬性值就會變爲false。

注意：只要自定義了錯誤消息，瀏覽器默認的錯誤消息就再也不顯示。

晚間練習：

在輸入域失去焦點時，使用其validity屬性的各個布爾類型的值，驗證用戶的輸入是否合法。下面的效果圖能夠放大。

*******************************************************************************

Day 02

複習：

第三階段課程

(1)AJAX：數據庫、PHP、HTTP、AJAX、jQuery-AJAX

(2)HTML5：

表單新特性

視頻和音頻

Canvas繪圖

SVG繪圖

地理定位

拖放API

WebWorker

WebStorage

WebSocket

(3)Boostrap框架

表單新特性：

(1)新的input type——10個

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

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

datalist、progress、meter、output

(3)表單元素新的屬性——11個——重點

placeholder、autofocus、autocomplete、multiple、form

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

required、min、max、minlength、maxlength、pattern

修改錯誤提示消息的彈出時間、修改錯誤提示的內容

input.validity {

valid : true,

customError: false, //setCustomValidity('XX')

valueMissing: false,

rangeOverflow: false,

rangeUnderflow: false,

tooLong: false,

tooShort: false,

typeMismatch: false,

.....

}

做業回顧

今日目標：

(1)視頻和音頻 —— 小重點

(2)Canvas繪圖 —— 最重點

1.HTML5取代Flash體如今哪些方面

Flash-繪圖、動畫、遊戲 —— HTML5 - Canvas & SVG

Flash-視頻、音頻 —— HTML5 - Video & Audio

Flash-客戶端存儲 —— HTML5 - WebStorage

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

<video src=""></video>在HTML5中專用於播放視頻。

VIDEO標籤默認是一個300*150的inline-block；

Video標籤/對象經常使用的成員：

成員屬性：

autoplay: false，是否自動播放

controls: false，是否顯示播放控件

currentTime: 1.4901，當前播放到的時間

duration: 60.1012，總時長

defaultMuted: false, 默認是否靜音

loop: false，是否自動循環播放

muted: false，當前是否靜音

paused: false，當前是否處於暫停狀態

poster：''，僅在影片開始播放以前顯示的「電影海報」

volumn：1, 當前播放音量

preload: 'auto'，如何預加載影片內容，可取值有三個：

auto：自動預加載影片元數據，並緩衝必定的長度

metadata：僅預加載影片元數據（寬高、時長）

none：不預加載影片的任何數據

成員方法：

play() 讓影片開始播放，paused屬性變爲false

pause() 讓影片開始暫停，paused屬性變爲true

成員事件：

onplay：fn 當調用了v.play()方法時觸發

onpause: fn 當調用了v.pause()方法時觸發

練習：禁用Video的默認播放控件，自定義播放和暫停按鈕，懸停在影片的正上方，點擊則播放，再點擊則暫停——仿優酷的效果

<div>

</div>

練習：不使用Video的海報(poster)屬性，自定義一個廣告圖片，當影片播放時候，廣告要隱藏；影片暫停時，顯示廣告。

v.onplay = function(){}

v.onpause = function(){}

3.HTML5高級新特性——音頻播放

<audio src=""></audio>在HTML5中專用於播放聲音。

AUDIO標籤默認是一個300*30的inline-block；若不顯示播放控件則display爲none。

AUDIO標籤/對象經常使用的成員：

成員屬性：

autoplay: false，是否自動播放

controls: false，是否顯示播放控件

currentTime: 1.4901，當前播放到的時間

duration: 60.1012，總時長

defaultMuted: false, 默認是否靜音

loop: false，是否自動循環播放

muted: false，當前是否靜音

paused: false，當前是否處於暫停狀態

volumn：1, 當前播放音量

preload: 'auto'，如何預加載音頻內容，可取值有三個：

auto：自動預加載音頻元數據，並緩衝必定的長度

metadata：僅預加載音頻元數據（寬高、時長）

none：不預加載音頻的任何數據

成員方法：

play() 讓音頻開始播放，paused屬性變爲false

pause() 讓音頻開始暫停，paused屬性變爲true

成員事件：

onplay：fn 當調用了v.play()方法時觸發

onpause: fn 當調用了v.pause()方法時觸發

練習：根據複選框是否勾選，暫停/播放背景音樂 14:27

說明：

(1)早期的IE瀏覽器中，可使用body的bgsound屬性控制背景，但此屬性不是HTML標準屬性，且沒法精確的控制播放和暫停：

(2)iOS系統自帶的Safari瀏覽器目前不支持AUDIO標籤，只能使用隱藏的VIDEO標籤來代替。

4.前端技術中能夠實現繪圖的技術

(1)WebGL技術 —— 當前尚未歸入HTML5標準

(2)Canvas技術 —— 在HTML5標準中提出的技術

(3)SVG技術 —— 早就存在的技術，歸入了HTML5標準

5.Canvas繪圖技術 —— 比較難

提示：有兩個難點

(1)屬性/方法比較多，很差記憶

(2)小學數學計算(座標軸，座標點的位置計算)

Canvas：畫布，在HTML5中默認是一個300*150的inline-block。設定畫布的寬和高不能使用CSS Style，只能使用width和height屬性。

您的瀏覽器不支持Canvas標籤！

</canvas>

畫布自己不能繪製內容，只用於承載被繪製的內容——使用畫筆來往畫布繪製內容。得到畫筆使用原生JS：

var ctx = canvas.getContext('2d'); //繪圖上下文對象

畫布上全部內容的繪製都要依靠「繪圖上下文」對象。

Context對象經常使用的屬性和方法：

經常使用屬性：

fillStyle:"#000000" 填充樣式

strokeStyle:"#000000" 描邊/輪廓樣式

font:"10px sans-serif"

textAlign:"start"

textBaseline:"alphabetic" 文本基線

globalAlpha:1 全局不透明度

lineWidth:1 線/描邊的寬度

shadowOffsetX:0 陰影在X軸上的偏移量

shadowOffsetY:0

shadowColor:"rgba(0, 0, 0, 0)"

shadowBlur:0 陰影模糊半徑

經常使用方法：

arc() 繪製一個拱形/圓形

beginPath() 開始繪製一條路徑——PS:鋼筆工具

closePath() 閉合一條路徑——PS

fill() 對路徑進行填充

stroke() 對路徑進行描邊

moveTo() 移動到某一點

lineTo() 到另外一個點繪製一條直線

fillRect() 填充一個矩形

strokeRect() 描邊一個矩形

clearRect() 清空一個矩形範圍內全部內容

fillText() 填充一個字符串

strokeText() 描邊一個字符串

drawImage() 繪製圖像

Content Context

6.使用繪圖上下文——繪製矩形(rectangle)

提示：矩形的定位點在本身的左上角

ctx.fillStyle = '#000'/漸變對象填充樣式

ctx.strokeStyle="#000"/漸變對象描邊樣式

ctx.lineWidth = 2; 描邊的寬度

ctx.fillRect(x, y, w, h) 填充一個矩形

ctx.strokeRect(x,y,w,h) 描邊一個矩形

ctx.clearRect(x,y,w,h) 清除一個矩形範圍內的內容

建立一個線性漸變對象：

var g = ctx.createLinearGradient(x1,y1, x2, y2);

g.addColorStop(offset1, color1);

g.addColorStop(offset2, color2);

練習1：畫布500*400，左上角填充一個紅色的矩形100*80；右上角描邊一個綠色的矩形100*80；描邊+填充一個矩形100*80；右下角描邊+填充另外一個顏色的矩形100*80；正中央描邊+填充與右下角徹底同樣的矩形。

練習2：繪製以下的圖形

練習3：繪製一個能夠在畫布上左右晃動的矩形——最基礎的動畫模型

練習4：繪製一個上下晃動的矩形

練習5：練習一個斜向右下角30度晃動的矩形

7.使用繪圖上下文——繪製文本(text)

提示：文本的定位點在整個字符串的文本基線的最左邊

ctx.textBaseline = 'alphabetic'; //文本基線，可取值爲top/middle/alphabetic/bottom

ctx.font = "10px sans-serif";

ctx.fillText( txt, x, y )

ctx.strokeText( txt, x, y )

ctx.measureText( txt ).width //測量文本的寬度

課後練習：

(1)使用視頻作元素的背景

提示：Video自動播放、循環播放、靜音，絕對定位到目標元素下面，z-index爲負值便可

(2)假設使用AJAX從服務器端獲取到以下的數據：

[

{"label": "部門1", "value":300},

{"label": "部門2", "value":500},

{"label": "部門3", "value":150},

{"label": "部門4", "value":400},

{"label": "部門5", "value":600},

{"label": "部門6", "value":250}

]

根據這樣的數據，繪製出以下圖所示的統計圖：

*****************************************************************************************************

Day 03

複習：

HTML5新特性

(1)表單新特性

新的input type 10

新的標籤 4

標籤的新屬性 11

(2)視頻和音頻

video audio

(3)Canvas繪圖

(4)SVG繪圖

(5)地理定位

(6)拖放API

(7)WebWorker

(8)WebStorage

(9)WebSocket

使用Canvas繪圖——JS繪圖

c1.width = 500;

c1.height = 400;

提示：Canvas的尺寸不能使用CSS來設置

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

經常使用屬性：

ctx.fillStyle = '#f00'/gradient;

ctx.strokeStyle = '#f00'/gradient;

ctx.lineWidth = 1;

ctx.font = '10px sanse-sarfi';

ctx.textBaseline = 'alphabetic';

ctx.shadowBlur = '';

經常使用方法：

繪製矩形

ctx.fillRect()

ctx.strokeRect()

ctx.clearRect()

繪製文本

ctx.fillText()

ctx.strokeText()

ctx.measureText(txt).width

繪製路徑

繪製圖像

今日目標：

(1)繪製路徑 —— 麻煩

(2)繪製圖像 —— 抽象

(3)Chart.js —— 掌握

1.使用Canvas進行繪圖——繪製路徑

路徑：Path，相似於Photoshop中的鋼筆工具，能夠繪製直線、各類曲線；但路徑自己是不可見的，有三種用途：

(1)建立選區(clip)，對畫布內容進行裁剪

(2)進行描邊(stroke)，繪製任意形狀的折線

(3)進行填充(fill)，填充出任意形狀的圖形

相關函數：

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

ctx.arc() 繪製一條圓形/橢圓/拱形路徑

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

ctx.lineTo(x,y) 從上一點到指定點繪製直線

ctx.busierCurve() 繪製貝塞爾曲線

ctx.closePath() 閉合路徑

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

ctx.clip() 基於當前路徑進行裁切

ctx.stroke() 基於當前路徑進行描邊

ctx.fill() 基於當前路徑進行填充

練習：

(1)使用路徑繪製一個座標軸

(2)使用定時器配合路徑實現一個圓環狀進度條

(3)建立兩個函數，openMouth()和closeMouth()，分別繪製以下的兩幅圖形

2.使用Canvas繪圖——繪製圖像

提示：圖像的定位點在本身的左上角

ctx.drawImage( img, x, y ) //原始大小繪製

ctx.drawImage( img, x, y, w, h ) //使用指定的寬高繪製圖像——可能進行圖像大小縮放

注意：繪製圖像時，必須等待圖片異步加載完成

var img = new Image();

img.src = "xx.png"; //向服務器異步請求圖片

img.onload = function(){ //圖片加載完成

ctx.drawImage( img, x, y )

}

練習：

(1)在畫布的左上角、右上角、左下角、右下角繪製小星星；正中央繪製一個2倍大小的星星

(2)在畫布上隨機繪製大大小小隨機出現的20個星星

(3)在畫布上繪製一個從左上角到右下角移動的小星星

(4)在畫布上原地旋轉的小星星

圖像的旋轉問題：

(1)Canvas中的旋轉不是畫布旋轉！而是「繪圖上下文（畫筆）」旋轉。

ctx.rotate(deg)

(2)旋轉必須有一個軸點——默認是座標軸的原點；若想以某個固定的點旋轉，就必須平移畫布的座標原點：

ctx.translate(x, y) //指定新的座標軸原點

練習(比較難)1：繪製四個小飛機，各在一個角落以本身爲軸點原地旋轉

提示：繪製每一個小飛機都要平移一次座標軸原點，平移後再恢復到原來的位置供下一次使用。

練習(比較好玩)2：繪製一個能夠隨着鼠標移動的飛機

3.總結：Canvas繪圖技術相關屬性和方法——重點 17:18

ctx.fillStyle = 顏色/漸變色/樣式;

ctx.strokeStyle =顏色/漸變色/樣式;

ctx.font = "10px sanse-sarif";

ctx.textBaseline = '';

ctx.lineWidth = 1;

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

(1)繪製矩形

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

(2)繪製文本

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

(3)繪製路徑

ctx.beginPath()

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

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

(4)繪製圖像

ctx.drawImage(img,x,y,[w],[h])

ctx.rotate( deg )

ctx.translate( x, y )

4.基於Canvas的圖表繪製框架/工具庫

(1)Chart.js —— 免費開源，有九類圖表可供使用

(2)Echart.js —— 免費的，百度提供，中文手冊易上手

(3)FusionCharts.js —— 收費的，功能強大

5.第三方圖表繪製工具——Chart.js的使用

(1)尋找官網：http://www.chartjs.org

(2)看官網介紹：

Simple yet flexible JavaScript charting for developers

(3)看官網提供的使用文檔(API Document)

http://www.chartjs.org/docs/

(4)根據官網上的實例編寫代碼：

new Chart(c2, {

type: 'bar', //圖表類型

data: { }, //圖表數據

options: { } //可選參數

});

</script>

課後練習：

1) 使用Canvas繪製一個隨機改變的驗證碼圖片——注意：真正項目中驗證碼圖片都是由後臺程序，如PHP生成的，此例子僅僅是爲了練習Canvas的使用。

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串長度間的隨機數 ];

要求：

畫布背景顏色隨機(淺色) ctx.fillRect()

文字內容隨機、大小隨機，顏色隨機(深色)、旋轉角度隨機。

5條隨機干擾線（每一個顏色隨機深色），處於文字上方。

100個雜色點（半徑爲1爲圓），處於文字上方。

2.使用Canvas仿寫網易雲音樂的播放界面

點擊播放按鈕，碟片開始旋轉，背景音樂開始播放；

再次點擊播放按鈕，碟片中止旋轉，背景音樂中止播放。

*****************************************************************************************************Day 04

複習：

HTML5新特性

(1)表單新特性 —— 重點

新的input type、新標籤、標籤的新屬性

(2)視頻和音頻 —— 重點

video、audio

(3)Canvas繪圖 —— 最重點

繪製矩形、文本、路徑(裁剪/描邊/填充)、圖像

(4)SVG繪圖 —— 最重點

(5)地理定位

(6)拖放API —— 次重點

(7)WebWorker —— 次重點

(8)WebStorage —— 重點

(9)WebSocket —— 次重點

Canvas繪圖使用方法：

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

ctx.fillStyle = 顏色/漸變/樣式;

ctx.strokeStyle =顏色/漸變/樣式;

ctx.lineWidth = 1;

ctx.font = '10px sans-serif';

ctx.textBaseline = 'alphabetic';

ctx.showdowXxx =

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

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

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

ctx.beginPath()

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

ctx.closePath

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

ctx.drawImage()

ctx.rotate() ctx.translate()

1.補充知識點：

若Canvas繪圖中須要繪製多張圖片，必須等待全部圖片加載完成才能開始繪製；而每張圖片的加載都是異步請求，彼此沒有前後順序，哪一張先加載完成徹底沒法預測。

var progress = 0; //全局加載進度

var img = new Image();

img.src = 'xx.jpg';

img.onload = function(){

progress += 10; //該圖片權重

if(progress===100){

startDraw();

}

2.補充知識點：如何爲Canvas中的某個圖形/圖像添加事件監聽

HTML中，只有標籤/元素才能添加事件監聽。

Canvas繪圖技術，只有一個標籤——Canvas。

爲某個部分中的圖形/圖像添加事件監聽，只能委託給Canvas，獲取事件發生的座標，是否處於目標圖像/圖形範圍內。

結論：爲Canvas的某個圖形/圖像添加事件監聽很是麻煩！

今日目標：

(1)SVG繪圖 —— 重點

(2)Two.js第三方繪圖工具庫

1.SVG繪圖概述

矢量圖： Flash/AI，每一個線條/色塊有獨立的顏色，能夠無限縮放，不善於描述顏色細節。—— SVG

位圖： PS 每一個點都是一個獨立的顏色，善於表現豐富的顏色細節，放大後會失真。—— Canvas

SVG：Scalable Vector Graphics，可縮放的矢量圖

SVG和Canvas的比較

SVG	Canvas
繪製的是矢量圖	繪製的是位圖
每一個圖形/圖像都是獨立的標籤	只有畫布是標籤
容易爲每一個圖形添加事件監聽	不能爲每一個圖形添加獨立的事件監聽
能夠無限縮放，適合地圖	不能無限放大，適合表現顏色細節，例如遊戲

2.SVG的使用方法

SVG標準誕生於2001年，遠早於HTML5，後來歸入H5標準，去除了一些原有的特性。

SVG圖形的使用方法

(1)HTML5以前：

把SVG標籤寫在獨立的XML文檔中；

在HTML文檔中使用IMG、IFRAME、EMBED、OBJECT等標籤引入svg文件

(2)HTML5以後(SVG標籤直接歸入H5標籤庫)：

能夠直接在HTML文檔中使用SVG標籤——HTML解釋器已經能夠直接解析SVG標籤了。

3.使用SVG繪圖——繪製矩形

注意：SVG圖形的屬性可使用HTML標籤屬性來聲明，也可使用相似CSS的形式來聲明——SVG標籤專用樣式；但這兩種方式本質不同。

可用屬性：

width 矩形的寬

height 矩形的高

x 定位點的X座標

y 定位點的Y座標

fill 填充顏色

fill-opacity 填充顏色透明度

stroke 描邊顏色

stroke-width 描邊寬度

提示：上述屬性不屬於HTMLDOM範疇，不能直接rect.x讀寫。但可使用核心DOM的setAttribute()方法來操做。

練習：

(1)點擊一個矩形，它就隱藏

(2)一個矩形，從左向右移動

(3)隨機生成20個大大小小的矩形

結論：使用JS建立新SVG元素有兩種方法：

1)svg.innerHTML = '<rect></rect>';

2)document.createElementNS('http://www.w3.org/2000/svg', 'rect');

4.使用SVG繪圖——繪製圓形

可用屬性：

r 半徑

cx 圓心的X座標

cy 圓心的Y座標

fill 填充顏色，默認爲#000

fill-opacity 填充顏色透明度

stroke 描邊顏色，默認爲transparent

stroke-width 描邊寬度

練習：

(1)使用HTML在SVG四個角各建立一個圓形

(2)使用JS建立20個隨機大小、位置、顏色隨機的圓形，點擊某一個變大變淡，直至消失，從DOM上刪除它

(3)點擊SVG的某處，生成一個圓形，變大變大直至消失

5.使用SVG繪圖——繪製橢圓

可用屬性：

rx 橫向半徑

ry 縱向半徑

cx 圓心的X座標

cy 圓心的Y座標

fill 填充顏色，默認爲#000

fill-opacity 填充顏色透明度

stroke 描邊顏色，默認爲transparent

stroke-width 描邊寬度

6.使用SVG繪圖——繪製直線

可用屬性：

x1 起點的橫座標

y1 起點的縱座標

x2 終點的橫座標

y2 終點的縱座標

stroke 描邊顏色，默認爲transparent，必須進行修改

stroke-width 描邊寬度

練習：使用line元素實現下述小圖標

提示：可使用「元素組」<g></g>把多個元素包含起來，這樣每一個組員能夠共享<g>元素聲明的屬性。 16:21

7.使用SVG繪圖——繪製折線

可用屬性：

points 折線上的點，值形如："0,0 10,0 50,100 ..."

fill 填充顏色，默認爲#000

fill-opacity 填充顏色透明度，必須設置爲0，不然會自動填充

stroke 描邊顏色，默認爲transparent，必須設置

stroke-width 描邊寬度

練習：根據下列數據，繪製折線圖，鼠標懸停時，線條的顏色改變

var data = [ [ 260, 180, 280, 150, 270 ], [130,180,220,210, 260] ];

8.使用SVG繪圖——繪製多邊形

可用屬性：

points 多邊形上的點，值形如："0,0 10,0 50,100 ..."

fill 填充顏色，默認爲#000

fill-opacity 填充顏色透明度

stroke 描邊顏色，默認爲transparent

stroke-width 描邊寬度

練習：使用polygon繪製下述圖標

提示：真正項目中，若是須要這樣的SVG圖標，可使用AI進行手繪，再使用插件導出爲svg文件便可。

9.使用SVG繪圖——繪製文本

可用屬性：

font-size

font-family

fill 填充顏色，默認爲#000

fill-opacity 填充顏色透明度

stroke 描邊顏色，默認爲transparent

stroke-width 描邊寬度

10.使用SVG繪圖——繪製圖像

提示：若繪製了位圖在SVG上，這個SVG圖放大也會產生失真。

可用屬性：

xlink:href 指定圖片的URL

width 圖片的寬，默認爲0，不顯示

height 圖片的高，默認爲0，不顯示

矩形、圓形、橢圓、直線、折線、多邊形、文本、圖像

11.在繪製圖形時使用漸變色

漸變對象是SVG中的特效對象——特效對象都必須定義在<defs></defs>標籤內：

</linearGradient>

</defs>

</svg>

課後練習：

1) 用折線繪製五角星

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

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

根據這段JSON字符串，繪製出以下的統計圖，要求每一個柱在鼠標懸停時都會加粗顯示邊框：

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

*****************************************************************************************************

Day 05

複習：

HTML5新特性

(1)表單新特性

(2)視頻和音頻

(3)Canvas繪圖

(4)SVG繪圖

(5)地理定位

(6)拖放API

(7)WebWorker

(8)WebStorage

(9)WebSocket

SVG繪圖：

方法1： 1.svg <img src="1.svg">

方法2： <body><svg></svg></body>

繪製矩形：

繪製圓形：

繪製橢圓：

繪製直線：

繪製折線：

繪製多邊形：

繪製文本：

繪製圖像：

使用漸變：

<svg>

<defs>

</linearGradient>

</defs>

</svg>

今日目標：

(1)補充：SVG中使用濾鏡

(2)Two.js第三方工具

(3)地理定位

(4)拖放API —— 比較重要

1.SVG補充知識點

在SVG中使用濾鏡(filter)——對圖像圖像進行像素化處理。使用方法：

<defs>

</feGaussianBlur>

</filter>

</defs>

2.三種繪圖技術

(1)WebGL —— 3D渲染

(2)Canvas —— 2D動畫遊戲

(3)SVG —— 矢量圖無限縮放

上述三個技術均可以用於繪製統計圖——線、柱、圓...。

各自的使用方法不一樣，增長學習和使用難度。

two.js 2D繪圖函數庫

three.js 3D繪圖函數庫

3.第三方繪圖工具庫——Two.js

官網：https://two.js.org/

官方介紹：

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.

一個2D繪圖函數庫，可使用徹底同樣的API實如今不一樣的環境(svg/canvas/webgl)下繪製圖形

使用方法：

var two = new Two({}).appendTo(container);

two.makeCircle(.....);

two.makeRectangle(....);

//two.update();

//two.play();

</script>

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

window.navigator.geolocation：獲取當前瀏覽器所在的地理位置，如

經度 longitude

緯度 latitude

海拔 altitude

速度 speed

瀏覽器如何定位：

(1)手機瀏覽器：使用內置GPS模塊或經過信號基站

(2)PC瀏覽器：使用IP地址反向解析出對應的地址

瀏覽器地理定位涉及到我的隱私，因此瀏覽器都會詢問用戶，是否給予某個網頁讀取的權限。

navigator.geolocation {

getCurrentPosition: fn, //一次性的獲取定位信息

watchPosition: fn, //週期性的監視定位信息

clearWatch: fn //清除定位監視器

}

使用方法：

navigator.geolocation.getCurrentPosition(

function(pos){ //獲取成功

console.log(pos.coords.longtude); 經度

console.log(pos.coords.latitude); 緯度

console.log(pos.coords.altitue); 海拔

console.log(pos.coords.speed); 速度

function(err){ //獲取失敗

console.log(err.code);

console.log(err.message);

}

);

5.擴展知識點：如何在網頁中使用百度地圖

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

http://lbsyun.baidu.com/

(2)登陸百度帳號

(3)查看使用JS調用百度地圖說明文檔：

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

(4)申請使用密鑰

(5)建立HTML頁面，調用百度地圖API

查看使用手冊——很是通俗易懂。 16:10

6.HTML5新特性——拖放API——今日重點

Drag & Drop：HTML5爲拖放事件定義了7個事件

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

(1)ondragstart 拖動開始

(2)ondrag 拖動中

(3)ondragend 拖動結束

能夠拖動着進入上方並鬆手的對象——目標對象(target)能夠觸發的事件：

(1)ondragenter 拖動着進入上方

(2)ondragover 拖動着在上方懸停

(3)ondrop 鬆開

(4)ondragleave 拖動着離開

提示：ondragover事件後續的默認行爲是ondragleave，即ondragover後默認必然觸發ondragleave，必須阻止瀏覽器此事件默認行爲！！

練習：

(1)建立一個能夠隨着拖動而移動的飛機圖片

提示：IMG必須定位！拖動過程當中讀取事件發生的座標，及時修改IMG的left和top。

(2)垃圾箱默認是半透明，拖動小飛機到垃圾箱上方時瀏覽器徹底不透明；拖動着離開瀏覽器繼續變爲半透明；

若飛機在垃圾箱上方釋放，則從DOM樹上刪除飛機；垃圾箱繼續變爲半透明

(3) 把練習1 和練習2 組合在一塊兒

課後練習：英雄選擇

要求：

(1)拖動某架飛機到目標區域(隨鼠標移動)，則在上方顯示出該飛機；下方沒有改飛機了；

(2)拖動另外一架飛機到目標區域，則顯示出該飛機，以前選中的飛機重回待選區域；

(3)從目標區域將某架飛機拖走，則該飛機重回待選區域；目標區域變回？飛機。

*****************************************************************************************************

Day 06

複習：

HTML5新特性

(1)表單新特性

(2)視頻和音頻

(3)Canvas繪圖

(4)SVG繪圖

(5)地理定位

navigator.geolocation.getCurrentPosition

(6)拖放API——7個事件

源對象：

ondragstart

ondrag

ondragend

目標對象：

ondragenter

ondragover - e.preventDefault()

ondragleave

ondrop

(7)WebWorker

(8)WebStorage

(9)WebSocket

今日目標：

(1)補充拖放API：dataTransfer

(2)擴展拖放API應用 —— 掌握

(3)WebWorker

(4)WebStorage —— 重點

1.拖放API補充知識點

如何在源對象的事件和目標對象的事件間傳遞數據？

方法1：建立一個全局變量——污染全局對象

var 全局變量 = null;

src.ondragstart = function(){

全局變量 = 數據值;

}

target.ondrop = function(){

console.log(全局變量);

}

方法2：使用H5拖放API提供的dataTransfer對象

提示：源對象事件的dataTransfer與目標對象事件的dataTransfer不是同一個對象！但兩者之間能夠傳遞數據。

src.ondragstart = function(e){

//利用數據傳遞對象保存數據

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

}

target.ondrop = function(e){

//讀取數據傳遞對象中的獲得的數據

var data = e.dataTransfer.getData('key');

}

提示：H5標準中dataTransfer對象能夠保存的數據必須有key，key只能叫 'text/html'、' text/uri-list'、'Files'三者之一。但通過實測，該key名稱能夠爲任意名稱。

2.擴展知識點：如何拖放客戶端本地的圖片到網頁中顯示

通常來說，網頁中的圖片都應該來自於服務器；通常狀況下，網頁中不能使用客戶端的圖片。

能夠使用拖放的方式把客戶端的圖片在網頁中顯示出來：

客戶端的圖片文件是拖放事件的源對象；

網頁中的元素是拖放事件的目標對象；

container.ondrop = function(e){

var f0 = e.dataTransfer.files[0]; //File對象

var fr = new FileReader(); //讀取文件中的內容

fr.readAsDataURL(f0); //把圖片做爲dataURL來讀取

fr.onload = function(){ //文件讀取完成

var img = new Image(); //建立IMAGE元素

img.src = fr.result; //dataURL

container.appendChild(img);

}

HTML5新增的文件讀取相關的對象：

File 表明一個文件

FileList 表明一個文件列表

FileReader 用於讀取一個文件中的內容

FileWriter 用於向一個文件中寫出內容

3.面試題：請描述一下瀏覽器中的線程模型。

Program：程序，編寫好的代碼通過處理，能夠在計算機上執行，放在文件系統(磁盤)上

Process：進程/任務，程序從磁盤中調入內存，分配必須可執行代碼空間、數據空間，隨時準備被CPU執行

Thread：線程，是進程內部執行代碼的基本單位

進程和線程的關係：

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

線程是執行代碼(JS/HTML/CSS)的基本單位；

線程處於進程內部，一個進程內部必須至少有一個線程，也能夠有多個線程，這些線程間彼此能夠沒有影響——併發執行（宏觀上看是同時執行，微觀上看是在CPU上交替執行）

Chrome.exe進程中至少有6個線程，能夠併發的向Web服務器發起請求（有的請求HTML、有的請求CSS、有的請求JS）。可是最終負責內容渲染(HTML解析/JS執行)的只有1個線程——UI主線程。

4.HTML5新特性——Web Worker

因爲瀏覽器中負責渲染/監聽只有一個UI主線程，全部的HTML/CSS/JS的執行都在這一個線程內，若頁面中加載了很是耗時（算法複雜）的JS操做，會阻塞後續的HTML/CSS/JS的渲染和事件監聽。

如何解決？—— 建立一個新的併發線程來執行這樣的耗時操做。

JS中沒有建立新線程的方法，替代方案——Web Worker

var w = new Work( 'xx.js' );

含義：在當前UI主線程中建立並啓動一個新的併發的工做線程，該線程執行耗時操做，可能阻塞；但不會對當前UI主線程產生影響。

注意：Worker線程的致命問題——不能執行任何DOM操做，不能使用任何DOM&BOM元素——瀏覽器中只容許UI主線程修改DOM樹。jQuery之類的JS文件決不能使用Worker來執行！！

(1)如何讓UI主線程給Worker線程傳遞數據：

UI主線程：

var w = new Work('xx.js');

w.postMessage('data');

Worker線程：

onmessage = function(event){

var data = event.data;

}

(2)如何讓Worker線程把運算結果傳遞給UI主線程：

Worker線程：

postMessage('data');

UI主線程：

var w = new Worker('xx.js');

w.onmessage = function(event){

var data = event.data;

}

練習：UI主線程中讀取用戶輸入，發送給Worker線程；Worker線程開始運算，完畢後，把運算結果發送回給UI主線程，顯示在DIV元素中。

總結：Worker用於執行耗時的JS任務，在一個獨立的線程中，能夠避免UI主線程的阻塞問題。

5.HTML5新特性——WebStorage——重點

項目中的數據如何保存？

方式1：保存在服務器端——商品信息、用戶信息、帖子

方式2：保存在客戶端——瀏覽記錄、登陸信息、內容定製

Web的客戶端端存儲技術有哪些？

(1)Cookie

優點：兼容性好

不足：操做繁瑣，數據長度有限制（如4KB）

(2)Flash

優點：大小沒有限制

不足：依賴於Flash容許環境

(3)Web Storage

優點：大小可達到8MB，操做簡單

不足：HTML5新特性

(4)IndexedDB —— 課下自學

優點：大小沒有限制，使用JS操做的一種客戶端的數據庫

不足：操做稍顯複雜

HTML5中的Web Storage技術涉及兩個新對象：

window.sessionStorage——會話級存儲，其中的數據能夠在一次會話中的多個頁面中共享——數據存儲在瀏覽器進程內存中。

sessionStorage.setItem(key, value)

var value = sessionStorage.getItem(key)

sessionStorage.removeItem(key)

sessionStorage.clear()

sessionStorage.key(i)

sessionStorage.length

window.localStorage——跨會話級存儲/本地存儲，其中的數據即便關閉瀏覽器/電腦，下次仍然能夠訪問——數據存儲在文件系統的磁盤文件中。

localStorage.setItem(key, value)

var value = localStorage.getItem(key)

localStorage.removeItem(key)

localStorage.clear()

localStorage.key(i)

localStorage.length

注意：若是localStorage中的數據發生了改變，全部已打開的當前網站的瀏覽器窗口，都會自動觸發window.onstorage事件，從而能夠獲得本地存儲的數據已被修改。

Session：一個會話，指客戶端鏈接到服務器後，在一段時間內的前後發起的多個請求，即一個會話中可能包含多個頁面內容。只要瀏覽器不關閉，這次會話就一直存在；反之瀏覽器一關閉，會話就結束了。

練習：

(1)建立productlist.html頁面，顯示登陸輸入框，登陸成功後能夠點擊「查看購物車」跳轉到shoppingcart.html，此頁面中顯示出「歡迎回來：xxx」。還有一個超連接「退出登陸」，刪除登陸的用戶名。

(2)建立index.html頁面，包含一個下拉列表，讓用戶選擇本身喜歡網頁風格，如：蔚藍天空、芭比公主、殺馬特等；接下來跳轉到usercenter.html，該頁面也呈現上一頁面所選的風格；即便重啓瀏覽器，再訪問這些頁面仍然是用戶以前所選的風格。

提示：在客戶端存儲選中的主題的className

課後練習：單詞測試系統

(1)用戶能夠在save.html中不停的錄入新單詞；

(2)進入test.html開始測試，須要對以前錄入過的全部單詞進行測試；

(3)提交答案後，在result.html中顯示出測試成績。

提示：錄入的單詞須要永久保存；而這次測試結果只須要在當前會話中保存。

//遍歷客戶端存儲的數據

for(var i=0; i<localStorage.length; i++){

var key = localStorage.key(i) //獲取第i個key

}

課下任務：

(1)挑戰性任務：不使用傳統的表單，使用AJAX+拖放API實現文件上傳。

*****************************************************************************************************

Day 07

複習：

見思惟導圖

今日目標：

(1)HTML5新特性——WebSocket——瞭解

(2)HTML5階段項目

1.HTML5新特性——WebSocket

HTTP協議的不足：基於「請求-響應」模型，只有客戶端發了請求，服務器纔會給響應，即沒有請求就沒有響應；一次請求也只能獲得一次響應。在特殊應用場景有不足：

使用HTTP協議的解決方案： setInterval+AJAX => 心跳請求

注意：心跳過於頻繁服務器壓力太大；不頻繁客戶端獲取消息有延遲。

最佳解決方案：——改用其它協議：

WebSocket協議：基於「廣播-收聽」模型，客戶端鏈接到服務器上就再也不斷開，服務器有了消息能夠隨時發送給客戶端，同時客戶端也能夠不停的給服務器發消息，服務器能夠沒有一次應答。即一方能夠連續發多個消息，對方不停的接收。不足：客戶端和服務器是永久鏈接——服務器端能夠同時容納的鏈接數有限制的。適用於「聊天室」、「實時走勢圖」等應用場景。

WebSocket應用須要服務器端和客戶端都要使用WebSocket協議。傳統的ApacheWeb再也不適用。能夠使用PHP或Node.js編寫這樣的服務器。

運行PHP編寫的Socket服務端程序：

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

2.HTML5階段項目

所用技術：

MySQLDB + PHP + AJAX + HTML5-Video + HTML5-Canvas + HTML5-SVG + HTML5-WebStorage

實現功能：

(1)用戶註冊

(2)肯定下單

(3)用戶中心 - 個人訂單

(4)用戶中心 - 消費統計

(5)用戶中心 - 幸運抽獎

實現步驟：

(1)修改SQL，爲jd_user表添加新的字段：

uid,uname,upwd,email,homepage,age,birthday(bigint)

(2)建立PHP，user_add.php，接收客戶端提交的註冊信息，保存入數據庫，返回 {"msg": "succ", "uid": 3} 或 {"msg":"err", "sql":"INSERT...."}

(3)建立HTML，register.html（須要編寫register.css），使用視頻作背景，全部的輸入域都要有輸入驗證，點擊「註冊」，使用AJAX異步提交註冊信息，成功則跳轉到產品列表頁面（productlist.html）

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

(4)修改SQL，添加jd_order（訂單信息表），包含字段：oid, orderNum, shopName, rcvName, price, payment(付款方式，INT), orderTime(下單時間,BIGINT), status(訂單狀態,INT), userId(下單用戶的ID號)

(5)修改SQL，添加jd_order_detail（訂單詳情表），包含字段： did, orderId, productId, count(購買數量)

(6)建立PHP，order_add.php，接收客戶端提交的訂單信息，添加到訂單表和訂單詳情表，返回{"msg":"succ","oid",12, "orderNum": 1234567890 } 或 {"msg":"err", "sql":"INSERT ...."}

SQL1: INSERT INTO jd_order VALUES... 得到oid

SQL2: INSERT INTO jd_order_detail VALUES... 循環執行

(7)建立HTML，addorder.html，根據當前購物車中的內容，生成訂單，點擊「下單購買」異步提交給服務器，進行訂單生成，成功後在一個新的頁面(addorder_result.html)中顯示出訂單編號——sessionStorage

(8)建立HTML，usercenter.html，頁頭和頁尾異步加載，主體內容分爲左側的「附加導航」和「右側主體」

*****************************************************************************************************

Day 08

1.HTML5階段項目

所用技術：

MySQL + PHP + AJAX + HTML5-Form + HTML5-Video + HTML5-Canvas + HTML5-SVG + HTML5-WebStorage

實現功能：

(1)用戶註冊

(2)用戶登陸

(3)瀏覽商品列表

(4)查看商品詳情

(5)添加到購物車

(6)修改購物車

(7)肯定下單難點

(8)用戶中心 - 個人訂單難點

(9)用戶中心 - 消費統計

(10)用戶中心 - 幸運抽獎

實現步驟：

(1)修改SQL，爲jd_user表添加新的字段：

uid,uname,upwd,email,homepage,age,birthday(bigint)

(2)建立PHP，user_add.php，接收客戶端提交的註冊信息，保存入數據庫，返回 {"msg": "succ", "uid": 3} 或 {"msg":"err", "sql":"INSERT...."}

訂單表 <=多對多=> 產品表

(5)修改SQL，添加jd_order_detail（訂單詳情表），包含字段： did, orderId, productId, count(購買數量)

SQL1: INSERT INTO jd_order VALUES... 得到oid

SQL2: INSERT INTO jd_order_detail VALUES... 循環執行

(7)修改以前的productlist.html和shoppingcart.html，把登陸後的用戶名保存在sessionStorage

(8)建立HTML，addorder.html，根據當前購物車中的內容，生成訂單，點擊「下單購買」異步提交給服務器，進行訂單生成，成功後在一個新的頁面(addorder_result.html)中顯示出訂單編號——sessionStorage

(9)建立HTML，usercenter.html，頁頭和頁尾異步加載，主體內容分爲左側的「附加導航」和「右側主體」形式的佈局——使用CSS實現該佈局

(10)建立JS，usercenter.js，隨着附加導航的切換，右側主體的內容會隨之改變——相似「標籤頁籤」效果

(11)建立PHP，order_select.php，接收客戶端提交的用戶名，查詢出該用戶全部的訂單，以JSON格式返回給客戶端——難點

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

(12)修改HTML，usercenter.html，頁面加載完成後，異步請求當前登陸用戶的訂單信息，追加在TABLE中

(13)選作：實現「個人訂單」分頁顯示

(14)建立PHP，buy_stat.php(消費統計)，根據客戶端提交的用戶名，模擬建立過去12個月中的消費總金額（無需訪問數據庫，直接僞造出JSON數據便可），返回數據形如：[{"label":"10月","value":3500}, {"label":"11月","value":3000}...]

(15)修改JS，usercenter.js，待頁面加載完成後，異步請求當前登陸用戶的消費統計信息，根據這些信息繪製Canvas統計圖——注意：全部圖形都要使用動態變量建立

(16)修改JS，usercenter.js，待頁面加載完成後，異步請求當前登陸用戶的消費統計信息，根據這些信息繪製SVG統計圖——注意：全部圖形都要使用動態變量建立

2.擴展JSON字符串在項目中的應用

PHP服務器給客戶端JS發送JSON響應數據：

PHP： $arr = [ ... ]; echo json_encode($arr);

JS： var obj = JSON.parse( str )

客戶端JS給發送PHP服務器JSON響應數據：

JS： var arr = [ ... ]; var str = JSON.stringify(arr);

PHP： $arr = json_decode( $_REQUEST['str']);

提示：JSON中的{}會被PHP解析爲Object,使用->符號讀取對象的成員

3.面試題：使用純CSS實現以下的佈局

.main { }

.left {

width: 210px;

float: left;

}

.right-body {

margin-left: 210px;

}

3.如何根據訂單編號查詢出其對應的產品信息

須要的數據都在產品表中，不是跨表查詢；

SELECT pid,pname,pic FROM jd_product

WHERE pid = 10 OR pid=15 OR pid=18;

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

SELECT pid,pname,pic FROM jd_product

WHERE pid IN (10, 15, 18);

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

SELECT pid,pname,pic FROM jd_product

WHERE pid IN (SELECT productId FROM jd_order_detail WHERE orderId=101);

此處根據訂單編號，查詢出多個產品編號，再根據這些產品編號查詢產品信息——查詢中嵌套另外一個查詢——子查詢

*****************************************************************************************************

Day 09

複習：

需求 -> PSD -> HTML -> PHP ->數據庫

京東用戶中心項目設計技術：

jQuery + AJAX + PHP/MySQL + Form + Video + Canvas + SVG + WebStorage

今日目標：

(1)京東用戶中心——消費統計（Canvas版本）

(2)京東用戶中心——消費統計（SVG版本）

(3)京東用戶中心——幸運抽獎

1.項目實現步驟：

(17)建立SQL，添加jd_lottery表，保存用戶的抽獎記錄，包含以下列：(lid, uid,lotteryTime, level(INT,所中獎項))，添加三行測試數據

(18)建立PHP，lottery_stat.php，接收客戶端提交的用戶名，返回該用戶的抽獎統計狀況，形如：{"uname":"qiangdong", "uid":1, "totalCount":39, "usedCount": 3, "leftCount":36}

總抽獎次數根據訂單總金額來計算，每有1000元消費，就自動有一次抽獎機會

SELECT SUM(price) FROM 訂單表 WHERE userId=?

SELECT COUNT(*) FROM 抽獎表 WHERE userId=?

(19)修改HTML，待頁面加載完成，異步請求當前登陸用戶的抽獎統計狀況，顯示在「開始抽獎」按鈕上。剩餘抽獎次數爲0，則按鈕保持禁用狀態，不然按鈕顯示爲可用狀態。

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

2.第三方繪圖工具庫

使用原生的Canvas或SVG實現統計圖表的繪製比較麻煩。

許多第三方統計圖表繪圖工具產生：

(1)Chart.js：免費，小巧，八種圖形

(2)EChart.js：百度提供的，免費，容易上手

(3)FreeChart：免費開源

(4)FusionCharts：收費的，功能強大，90+種圖形

FC使用步驟：

(1)登陸官網，查看介紹

(2)找示例程序，使用手冊(API Document)

(3)上手編寫簡易程序

var c = new FusionCharts( {....} );

c.render('divId');

3.如何讓旋轉先加速再減速

本質是一個二次函數，X軸爲旋轉的持續時間，Y軸是旋轉角度：

課後練習：

繼續完善幸運抽獎，把抽獎結果異步提交給服務器，能夠繼續下一次抽獎；並讓旋轉先加速再減速。

相關標籤/搜索

每日一句

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