html5高级

Html5高级

项目回顾

 

Day 01

第三阶段知识体系:

(1)AJAX异步请求 

数据库PHP、HTTP、原生AJAX、jQuery中的AJAX

(2)HTML5高级特性

九大新特性

(3)Boostrap框架

五部分

 

 

 

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/optiontextareabutton

  HTML5中新增的表单元素——不能与用户交互,不能提交,仅用于信息展示

(1)datalist:数据列表,为某个输入框提供输入建议

    

    

  

  

(2)progress:进度条,显示前进的进度提示条

练习:使用定时器,修改progress的进度,实现不断前进的效果

(3)meter:度量衡,刻度尺,使用不同的颜色标示出数据所处的区间

最优值在上下限:  - 绿 - 黄

最优值小于下限: 绿 - 黄 - 红

最优值大于上限:  - 黄 - 绿

(4)output:输出值,用于表示数据的计算结果,是一个语义标签

 

 

5.HTML5新特性之表单新特性——表单元素新的属性——重点

  HTML5之前表单标签常用属性:

name、value、readonly、disabled、checkedfor

  HTML5表单标签的新属性:

(1)placeholder:占位消息,为输入框中添加提示消息,注意:占位消息仅用作提示,与value属性根本不同,不能被提交

文字">

(2)autofocus:自动获得焦点,标识了该属性的输入框会自动的获得输入焦点

(3)multiple:多项,用于email和file输入框,允许其中输入多个值,用逗号分隔

(4)autocomplete:自动完成,可取值on/off,指定输入域是否记录上一次提交的输入,下次输入时给予提示

(5)form:表单,指定当前输入域所属的表单ID,可以将声明form的输入框放到表单元素的外面,仍然可以一同被提交

=========与输入验证相关新属性========

(6)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、telsearch、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高级新特性——视频播放

  在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的默认播放控件,自定义播放和暂停按钮,悬停在影片的正上方,点击则播放,再点击则暂停——仿优酷的效果

练习:不使用Video的海报(poster)属性,自定义一个广告图片,当影片播放时候,广告要隐藏;影片暂停时,显示广告。

v.onplay = function(){}

v.onpause = function(){}

 

3.HTML5高级新特性——音频播放

  在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浏览器中,可以使用bodybgsound属性控制背景,但此属性不是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标签!

  

 画布本身不能绘制内容,只用于承载被绘制的内容——使用画笔来往画布绘制内容。获得画笔使用原生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)根据官网上的实例编写代码:

 

 

 

 

课后练习:

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 = '';

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元素实现下述小图标

 

  提示:可以使“元素组”把多个元素包含起来,这样每个组员可以共享元素声明的属性。 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绘图——绘制文本

  文本内容

 可用属性:

x

y

font-size

font-family

fill 填充颜色,默认#000

fill-opacity 填充颜色透明

stroke 描边颜色,默认为transparent

stroke-width 描边宽度

 

 

10.使用SVG绘图——绘制图像

  提示:若绘制了位图在SVG上,这个SVG图放大也会产生失真。

  

 可用属性:

x

y

xlink:href 指定图片的URL

width 图片的宽,默认为0,不显示

height 图片的高,默认为0,不显示

 

 

矩形、圆形、椭圆、直线、折线、多边形、文本、图像

 

 

11.在绘制图形时使用渐变色

  渐变对象是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     

方法2:  

绘制矩形:

  

绘制圆形:

绘制椭圆:

绘制直线:

绘制折线:

绘制多边形:

绘制文本:

  XXXX

绘制图像:

  

使用渐变:

  

 

  

 

 

今日目标:

(1)补充:SVG中使用滤镜

(2)Two.js第三方工具

(3)地理定位

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

 

1.SVG补充知识点

  SVG中使用滤镜(filter)——对图像图像进行像素化处理。使用方法:

  

  

 

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)下绘制图形

  使用方法:

 

 

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

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...."}

  (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)修改之前的productlist.html和shoppingcart.html,把登录后的用户名保存在sessionStorage

  (8)创建HTML,addorder.html,根据当前购物车中的内容,生成订单,点击“下单购买”异步提交给服务器,进行订单生成,成功后在一个新的页面(addorder_result.html)中显示出订单编号——sessionStorage

  (9)创建HTML,usercenter.html,页头和页尾异步加载,主体内容分为左侧的“附加导航”“右侧主体”形式的布局——使用CSS实现该布局

  (10)创建JS,usercenter.js,随着附加导航的切换,右侧主体的内容会随之改变——类似“标签页签”效果

  (11)创建PHPorder_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.项目实现步骤:

(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统计图——注意:所有图形都要使用动态变量创建

(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轴是旋转角度:

  

 

课后练习:

继续完善幸运抽奖,把抽奖结果异步提交给服务器,可以继续下一次抽奖;并让旋转先加速再减速。

 

转载于:https://www.cnblogs.com/hanshuang27/p/6210230.html

你可能感兴趣的:(php,ui,json)