达内2016前端开发知识点总结--HTML5--8天

HTML5 day01

第三阶段:

  AJAX - 8 —— 综合且容易出错

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

  Bootstrap - 5 —— 玩命儿被单词

 

今日目标:

(1)WebStorm的使用 —— 掌握

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

 

 

1.常用的前端开发软件

  (1)小型软件:小巧启动快,功能简单

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:范围选择控件,帮助用户在一定范围内选择一个数字

练习:实现一个调色板

  

  (7)color:颜色选择控件,浏览器并未自己实现颜色选择框,而是使用操作系统自带的颜色选择控件

  (8)date:日期选择控件,FF没有实现,推荐使用第三方插件代替,如jQueryUI-datepicker、laydate等

  (9)month:月份选择控件,FF没有实现

  (10)week:星期选择控件,FF没有实现

 

 

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

  HTML5之前FORM可以有的标签——用于数据提交

   INPUT、TEXTAREA、SELECT/OPTION、BUTTON

  HTML5新增表单元素——用于信息提示,不能用于数据提交

  (1)datalist:数据列表,配合option使用,本身为不可见元素,为普通的input提供输入建议列表

 list="l">

 

  (2)progress:进度条,未指定value属性则显示为“进行中”样式;若指定了value(默认在0~1之间)就可以控制其显示的进度

  练习:使用定时器让进度条不断前进,到100%就要停止

 

  (3)meter:刻度尺/度量衡,用红黄绿三色表示出一个数值所处的范围:不可接受/可以接受/最优范围

最小可能" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值">

  

  (4) output:输出,用于描述表单中的计算结果,语义标签,样式与SPAN无异。

xxx

 

 

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

  HTML5之前表单元素可用的属性:

   id、class、title、style、type、name、value、checked、selected、disabled、readonly

  HTML5之前表单元素新增的属性:

  (1)autocomplete:on/off,自动补全,是否自动记录之前提交的数据,以用于下一次输入建议

  (2)placeholder:站位符,用于在输入框中显示提示性文字,与value不同,不能被提交

提示性文字">

  (3)autofocus:false/true,自动获得输入焦点

  (4)multiple:false/true,是否允许多个输入值,若声明了该属性,输入框中(如email)就允许输入用逗号分隔的多个值

  (5)form:为一个元素指定form属性,值为某个表单的ID,则此输入域可以放到表单的外部

f">

form="f">

  ========上述五个属性是新的通用属性===========

  =======上述六个属性是输入验证相关属性========

  (6)required:false/true,必需的/必填项,在表单提交时会验证是否有输入,没有输入则弹出提示消息

  (7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数

  (8)minlength:最小长度,在有输入的情况下,限定输入域中字符的个数,不是HTML5标准属性,仅部分浏览器支持(如Chrome)

  (9)min:限定输入的数字的最小值

  (10)max:限定输入的数字的最大值

  (11)step:限定输入的数字的步长,与min属性连用

  (12)pattern:指定一个正则表达式,对输入进行验证

注意:上述正则表达式可以省略^和$

 

 

7.总结:HTML5表单新特性:

(1)新的input type——10个

  emailurlnumber、tel、search、range、color、date、month、week

(2)新的表单元素——4个

  datalist、progress、meter、output

(3)表单元素的新属性——12个

  autocomplete、autofocus、placeholder、multiple、form

  requiredmaxlengthminlengthminmaxsteppattern

 

注意:加粗的是当前项目中立即可用的!红色的特性可能弹出错误消息。

 

 

8.如何定制表单2.0中的错误提示消息内容——难点&掌握

  HTML5为每个标签对应的JS对象添加了新属性,以标识用户输入的有效性:

  input.validity {  

badInput:false,无效的输入,如email输入无效

typeMismatch:false,类型不匹配,如number中出现字符

valueMissing:false,值缺失,如required验证失败

tooLong:false,输入的内容超过maxlength限制

tooShort:false,输入的内容不满足minlength限制

rangeOverflow:false,输入的数字超过max

rangeUnderflow:false,输入的数字不满足min

stepMismatch:false,步长不匹配

patternMismatch:false,正则表达式不匹配

customError:false,是否存在自定义错误

valid:true,输入值是否有效

  }

  注意:

  (1)最后的validity.valid属性,只有其它属性都为false(没有任何错误),valid值为true;否则只要任何一个其它属性为true(说明有某方面的错误),valild值为false。

  (2)上述属性的值会随着输入域中值的改变而立即改变,无需等到表单提交。

  (3)使用input.setCustomValidity('XXX')可以生成一个自定义错误消息,使得validity.customError属性变为true;若执行input.setCustomValidity('')可以删除自定义错误消息,使得validity.customError属性变为false

  (4)自定义错误消息的优先级高于任何系统自带的错误消息优先级。

 

 

课后练习:

在输入域失去焦点时,使用其validity属性的各个布尔类型的值,验证用户的输入是否合法。下面的效果图可以放大。

  

   

 

 

 

 

 

 

 

 

 

HTML5 day02

 

复习:

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取代在哪些方面?

  音频和视频 ——

  绘图 ——

  动画/游戏 —— +定时器

  统计图表 ——

  客户端数据存储 —— WebStorage

 

2.HTML5新特性——视频播放

  HTML5提供了一个新的标签

  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的背景并自动播放?

 

 

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

  HTML5提供了一个新的标签

  AUDIO元素/对象的属性:

  (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:当前是否处于暂停状态

  (12)preload:指定视频预加载方案,可取值:

auto:默认值,自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长

metadata:元数据,只预加载视频的宽高、时长、第一帧内容

none:不预加载任何内容

  AUDIO对象的方法:

  play():开始播放

  pause():暂停播放

  AUDIO对象的事件:

  onplay:视频开始播放(可能多种原因引起)

  onpause:视频开始暂停(可能多种原因引起)

  onplaying:

 

练习:为网页添加自动播放的背景音乐,用户可选暂停或继续

  

可以使用定时器修改audio.volume属性实现音量淡入和淡出。

 

提示:

(1)bgsound="x.mp3">属性是老IE的专有属性,也可以用于播放背景音乐,但音量、静音、暂停、停止都无法精准的控制。其它浏览器不支持此属性。

(2)当前iOS中的Safari浏览器默认不支持audio标签!只能使用video标签代替。

 

 

4.Web前端中可用的绘图技术

  在网页中绘图可以使用的功能:

  (1)实时走势图

  (2)统计图表

  (3)随机内容的图片

  (4)在线画图板

  (5)HTML5游戏——2D/3D

  

  可用的绘图技术:

  (1)Canvas技术 —— 专用于绘制2D图形/图像

  (2)SVG技术 —— 专用于绘制矢量图

  (3)WebGL技术 —— 目前不是HTML5标准技术,功能最强大,3D图形/图像

 

5.Canvas绘图技术 —— 最重要&难点

难点: (1)小学/中学数学知识   (2)单词记忆

  HTML5引入了标签用于绘图,默认是一个300*150的inline-block。使用width/height属性指定尺寸,但不能使用CSS样式指定宽和高

   

您的浏览器不支持Canvas标签!

  

往“画布”上绘图需要使用其对应的“画笔”对象:

  var ctx = c.getContext('2d');  //绘图上下文——“画笔”

接下来所有的绘图任务都由画笔实现。

Content:内容

Context:上下文

 

绘图上下文对象的常用属性——console.log(ctx):

  fillStyle:'#000'填充样式

  strokeStyle:'#000'描边/轮廓样式

  lineWidth:1,描边/轮廓的宽度

  font:'10px sans-serif'绘制文本所用的字号/字体

  textBaseline:'alphabetic',文本对齐的基线

  showdowOffsetX:0,阴影水平偏移量

  showdowOffsetY:0,阴影竖直偏移量

  showdowColor:'rgba(0,0,0,0)',阴影颜色

  showdowBlur0,阴影模糊半径

 

 

 

6.使用Canvas绘制矩形

  提示:矩形的定位点在自己左上角

  ctx.fillStyle = '#000' 填充颜色

  ctx.strokeStyle = '#000'描边颜色

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

  ctx.strokeRect(x,y,w,h) 描边一个矩形

  ctx.clearRect(x,y,w,h) 清除一个矩形范围内的所有内容

 

练习:在600*400的画布上绘图 —— 16:10

(1)左上角填充一个矩形100*80,默认颜色

(2)右上角描边一个矩形100*80,默认颜色

(3)左下角填充一个矩形100*80,红色

(4)右下角描边一个矩形100*80,青色

(5)正中央填充+描边一个矩形100*80,注意是什么颜色

(6)重新创建一个画布,使用定时器,绘制一个可以不断向右移动的矩形

(7)绘制一个斜向30度角移动的矩形

 

课下挑战性任务:绘制一个绕圆形路径移动的矩形

 

 

 

7.使用Canvas绘制文本

  提示:文字的定位点默认在文本基线的起点(左侧)

  ctx.textBaseline = 'alphabetic'   文本基线,可取为top/bottom/middle/alphabetic

  ctx.fillText(txt, x, y) 填充文本

  ctx.strokeText(txt, x, y) 描边文本

  ctx.measureText(txt).width 测量,根据当前指定的字号和字体计算指定文本的宽度

 

练习:绘制文本

(1)在左下角绘制一行文本

(2)在右下角描边一行文本

(3)在画布中央绘制一个可以向右移动的文本,向户外LED招牌一样

课下挑战性任务:绘制可以画布上左右移动的文字

 

8.使用Canvas绘制路径

  下次课内容

9.使用Canvas绘制图像

  下次课内容

 

10.为图形文字添加阴影

    ctx.shadowColor = '#666'; //阴影颜色

    ctx.shadowOffsetX = 8;    //阴影偏移量

    ctx.shadowOffsetY = 8;

    ctx.shadowBlur = 10;      //阴影模糊半径

 

11.在绘图时使用渐变色

    //创建渐变对象

    var g = ctx.createLinearGradient(50,100, 550,100);

    g.addColorStop(0, '#f00');  //添加颜色点

    g.addColorStop(1, '#0f0');  //添加颜色点

//使用渐变对象

   ctx.fillStyle = g;

ctx.strokeStyle = g;

 

课后练习:

(1)使用视频做DIV元素的背景

 

  提示:Video自动播放、循环播放、静音,绝对定位到目标元素下面,z-index为负值即可

 

 

(2)使用AJAX从服务器端的PHP页面获取如下的JSON数据:

 [

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

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

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

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

{"label": "部门5", "value":550},

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

]

根据这些数据,绘制出如下图所示的统计图:

  

  提示:为简化起见,可以把value值看做每个柱的高度。

 

挑战性需求:柱子初次显示时,高度有动画效果。

 

 

 

 

 

HTML5 day03

 

复习:

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()

 

 

2.使用Canvas绘制图像

  提示:图片的定位点在图片的左上角。客户端JS必须等待图片加载完成才能开始绘制。

  var img = new Image();

  img.src = 'x.jpg';

  img.onload = function(){

  //图片已经加载完成了

  ctx.drawImage(img, x, y)   //使用默认的宽高

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

  }

练习:

(1)在画布的四个角各绘制一个小飞机

(2)在画布的中央绘制一个2倍标准大小的飞机

(3)*绘制一个可以随着鼠标而移动的小飞机,提示需要使用mousemove

   注意:Canvas绘图中,只有一个HTML元素——canvas!!其它图形图像都不是元素,不能绑定事件函数!!

(4)*绘制一个可以左右移动的小飞机

(5)**绘制一个可以在画布范围内走斜线移动的小飞机——碰到画布的任何一个边缘,立即反弹

 

 

小结:Canvas绘图可以绘制的内容:

(1)矩形: ctx.fillRect()   ctx.strokeRect()   ctx.clearRect()

(2)文本: ctx.fillText()   ctx.strokeText()   ctx.measureText()

(3)路径 - 描边/填充/裁剪

   ctx.beginPath()   ctx.closePath()

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

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

(4)图像:  ctx.drawImage()

(5)

 

3.绘图上下文的状态改变和恢复 —— 难点&晦涩

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

  //可以将绘图上下文对象(即画笔对象)进行变形(transform)——与对Canvas施加CSS Transform样式不同,绘图上下文的变形只影响当前绘制的图形图像内容

  ctx.translate(x,y) //坐标轴原点平移到指定点,所有点的坐标都发生改变

  ctx.rotate(deg) //画笔旋转,则内容旋转,轴点在坐标轴原点

  ctx.scale() //画笔缩放

  ====================

  ctx.save() //保存绘图上下文(画笔)当前的变形数据

  ctx.restore() //恢复最近一次保存的画笔的变形相关的状态

 

 

练习:***有点坑——绘制四个小飞机,各在画布的一个角在绕着自己的中心在旋转。

 

 

项目中Canvas技术的主要用途:

(1)绘制统计图

(2)小游戏

(3)绘图板

(4)动态的背景(带交互带动画)

 

4.使用第三方统计图绘制工具——Chart.js——重点在于自学过程

  提示:第三方的绘图工具非常多!直接百度“JS绘图工具”!

  第三方工具的使用步骤:

  (1)打开官网,看工具介绍

http://www.chartjs.org/

Simple yet flexible JavaScript charting for designers & developers。一款开源的、提供了8中图表的、基于Canvas、响应式图表绘制工具库。

  (2)参考DEMO,编写示例程序

new Chart(canvasId, {

   type: 'bar',//图表的类型,共8中

data: {  },//图表必需的数据

options: {  }//可选项

});

  (3)查看API Document,实现自己的项目需求

参考手册中的示例代码

 

 

 

课后练习:

1) 使用Canvas绘制一个随机改变的验证码图片

 

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串长度间的随机数 ];  

 要求:

  画布背景颜色随机(浅色)  ctx.fillRect()

文字内容随机、大小随机,颜色随机(深色)、旋转角度随机。

  5条随机干扰线(深色),处于文字上方。

  100个杂色点(半径为1为圆),处于文字上方。

 

2.仿网易云音乐的播放界面

  

  点击播放按钮,碟片开始旋转,背景音乐开始播放;

再次点击播放按钮,碟片停止旋转,背景音乐停止播放。

 

 

 

 

 

 

 

 

HTML5 day04

复习:

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相关标签即可

  默认为300*150的inline-block

 

练习:

(1)使用SVG矩形绘制一个国际象棋的棋盘——使用HTML中的rect标签

(2)使用SVG矩形绘制一个国际象棋的棋盘——使用JS动态创建rect标签

 

4.使用SVG绘制矩形

   width="" height="" x="" y="" fill="" fill-opacity="" stroke="" stroke-width="" stroke-opacity="">

  注意:

  (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绘制椭圆

   rx="" ry="" cx="" cy="">

 

7.使用SVG绘制直线

   x1="" y1="" x2="" y2="" stroke="">

  注意:所有的SVG图形默认只有填充色,没有描边色。

 

  练习:使用line创建如下的图标:

 

  提示:可以把多个元素放在一个小组中,可以自动继承小组的公共属性

 

 

8.使用SVG绘制折线

   points="x1,y1  x2,y2  x3,y3  ....."  stroke="" fill-opacity="0">

 

  练习:使用折线绘制如下的图标

 

 

9.使用SVG绘制多边形 17:25

   points="x1,y1  x2,y2  ....">

 练习:使用多边形绘制如下的图标:

  

 

10.使用SVG绘制文本

  提示:传统的标签不能置于SVG内部!同理,SVG的标签也不能放在其它元素内部!

   x="" y="" font-size="" alignment-baseline="before-edge">文本内容

 

11 .使用SVG绘制图像

  提示:在SVG中绘制图像使用image元素,引入位图后,此SVG图片放大后会失真。

  

 

12.如何使用渐变效果

  

  

     id="g1" x1="0" y1="0" x2="100%" y2="0">

      

      

    

  

 

  "url(#g1)">

 

 

 

 

 

课后练习:

1) 假设前端页面获取到后台返回了如下的JSON数据:

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

根据这段JSON字符串,绘制下图:

 

 

3)自学two.js工具的使用,理解其作用,仿写官方示例代码,学会使用方法,实现如下效果,月亮绕着地球转,地球绕着太阳转:

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML5 day05

 

复习:

HTML5新特性

1.新的语义标签

2.表单2.0

3.视频和音频

4.Canvas绘图

5.SVG绘图

6.地理定位

7.拖放API

8.WebWorker

9.WebStorage

10.WebSocket

 

SVG的使用:

  绘制矩形

  

  绘制圆形

  

  绘制椭圆

  

  绘制直线

  

  绘制折线

  

  绘制多边形

    

  绘制文本

  文本

  绘制图像

  

  贝塞尔路径

  

  特效对象

  

  

 

 

今日目标:

(1)补充:SVG相关小知识点

(2)地理定位——掌握

(3)拖放API——重点&小难点

 

1.SVG中定义特效对象——渐变特效

 

2.SVG中定义特效对象——滤镜(filter)——高斯模糊路径

  

 

  

   filter="url(#f1)">

 

  更多滤镜效果及使用方法:

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

  

 

  //创建地图实例    

  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 day06

 

复习:

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主线程。

  碰到如下的代码,就有问题了:

  

  

  

根本解决之道:

  创建一个新的线程,去执行耗时的JS任务——与UI主线程并发执行。new Thread('x.js') —— 其它语言中的类似代码。

 

3.HTML5新特性之八——Web Worker

  HTML5提供了一种类似创建新线程的机制:

new Worker('x.js');   //工人线程,与UI主线程并发执行

 

 注意:Worker线程天然缺陷!!

 浏览器禁止Worker线程操作任何的BOM和DOM对象!!!——浏览器只允许UI主线程进行页面内容的渲染!——不能使用Worker加载类似jquery.js文件!! 项目中,必需用到Worker的场景不多,比如有非常复杂耗时的且与DOM无关的运算时。

 

UI主线程可以给Worker线程传递数据——发消息:

  UI线程:

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

w.postMessage('StringMsg');

  Worker线程:

onmessage = function(e){  //e.data  //UI主线程发来的消息数据  }

Worker线程可以给UI主线程传递数据——发消息:

  UI主线程:

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

w.onmessage = function(e){  //e.data //Worker线程发来的消息数据}

  Worker线程:

.....

postMessage('StringMsg');

练习:在主界面中有一个输入框+按钮(“开始质数计算”),点击后创建一个新的Worker线程,把用户的输入传递给该线程,进行质数判定;.... 计算结果再反传给UI主线程,在一个DIV元素中显示出运算结果。

 

总结:Worker本质是一个线程,在UI主线程之外并发执行的线程;用于执行耗时的JS任务;缺陷:不能操作BOM和DOM,只能和UI主线程发消息。

 

 

 

4.数据存储方案

  Web项目中需要存储多种数据,大体上有两种存储方法:

  (1)服务器端存储:

1)数据库技术:存储项目中的核心数据

2)Session技术:存储当前用户的信息

  (2)客户端存储:不太紧要的与客户端有关的数据,如浏览记录、内容定制、样式定制

1)Cookie技术使用比较繁琐、大小不能超过4KB

2)Flash技术:逐渐被淘汰

    3)HTML5WebStorage技术:使用简单,大小不超过8MB

4)IndexedDB技术:客户端直接存储对象,目前还不是HTML标准技术

 

 

Web会话:指客户端浏览器从连接到某个Web服务器开始,一系列的请求-响应过程。直到客户端关闭浏览器,会话结束。

 

5.HTML5新特性之九——WebStorage

  HTML5的WebStorage技术,提供了两个对象,用于在浏览器中存储客户端的访问数据:

  window.sessionStorage——会话级存储:

在浏览器的内存中存储的与某个服务器间的一系列请求-响应过程中产生的数据——都是Key-Value对形式。当会话结束时(用户关闭了浏览器),会话级数据即消失。

sessionStorage['key'] = 'value';//存储一个数据

var v = sessionStorage['key'];//读取一个数据

sessionStorage.length//获取数据的个数

sessionStorage.setItem('key', 'value') //存储一个数据

var v = sessionStorage.getItem('key') //读取一个数据

sessionStorage.removeItem('key') //删除一个数据

sessionStorage.clear()//清除所有的数据

  window.localStorage——本地/跨会话级存储

在客户端文件系统/硬盘中存储客户端与服务器间的访问数据——都是Key-Value对形式。即使关闭浏览器,甚至关闭计算机仍然存在,否则会永久存在。

localStorage['key'] = 'value';//存储一个数据

var v = localStorage ['key'];//读取一个数据

localStorage.length//获取数据的个数

localStorage.setItem('key', 'value') //存储一个数据

var v = localStorage.getItem('key') //读取一个数据

localStorage.removeItem('key') //删除一个数据

localStorage.clear()//清除所有的数据

 

 

练习:

(1)创建index.html,右上角有一个超链接“登录”,点击此链接跳转到login.html,用户在表单中输入登录信息,点击“提交按钮”,假设用户名和密码都正确,弹出提示“登录成功”,3秒钟跳转回首页,右上角显示出“欢迎回来:xxx  退出登录”;此时若用户在地址栏强行输入login.html,直接跳转到index.html;用户若点击了index.html上的退出登录超链接,则跳转到logout.html,提示出“您已退出登录”,3秒钟跳回index.html,继续显示“登录”超链接

setTimeout(function(){

location.href="";

},3000)

(2)实现一个页面主题的永久定制 17:55

  创建index.html,指定3个class

.blue {  background: #ccf; color: #339;  }

  .pink {  background: #f3b; color: #916;  }

  .dark {  background: #111; color: #eee;  }

  提供一个下拉选择框,“—请选择您喜欢的页面主题—”,“湛蓝天空”、“芭比公主”、“杀马特”,选择某项之后,当前页面的body就使用对应的className。

  跳转到usercenter.html,默认也呈现出index.html中选中的页面主题,即使重启浏览器,仍可以呈现出之前选中的主题色。提示:即使重新打开index.html,也要显示出之前选中的主题色。

 

 

课后练习:  单词测试系统

(1)用户可以在save.html中不停的录入新单词;

(2)进入test.html开始测试,需要对之前录入过的所有单词进行测试;

(3)提交答案后,在result.html中显示出测试成绩。

提示:录入的单词需要永久保存;而此次测试结果只需要在当前会话中保存。

 

  //遍历客户端存储的数据

for(var i=0; i

var key = localStorage.key(i) //获取第i个key

var value = localStorage[key]; //获取第i个value

}

 

 

 

 

 

 

HTML5 day07

 

复习:

见思维导图

 

 

今日目标:

(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,根据登录信息,异步请求当前登录用户购物车中的内容,显示在“下单页面”中

 -----------------文华老师的进度线----------------------

 (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,把所有的用户输入/选择全放在,点击“提交订单”后,异步提交给服务器,获取到订单编号,跳转到addorder_succ.html,提示下单成功

 

 

 

 

HTML5 day08

 

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,把所有的用户输入/选择全放在,点击“提交订单”后,异步提交给服务器,获取到订单编号,跳转到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待页面加载完成,异步请求当前用户所有的订单,显示TABLE中

  (15)创建PHP,buy_stat.php,根据客户端提交的用户编号,统计出该用户过去12个月里每个月的消费总金额,以JSON形式 —— 使用伪造数据

  (16)修改HTML,usercenter.html,异步请求消费统计数据,使用FusionCharts工具绘制消费统计图表

 -------------------文华老师的进度线----------17:20------------

 (17)修改SQL,添加表jd_lottery( lid, userId, lotteryTime, grade ),插入如下三行数据:

1 10 1401234567890   2

2 10 1411234567890   4

3 10 1421234567890   4

  (18)创建PHP,lottery_stat.php,接收客户端提交用户编号,返回该用户的抽奖统计信息,形如:{"uid":10, "total":21, "used": 3}

SQL1:计算指定用户的订单总额

SELECT SUM(price) FROM jd_order WHERE userId=?

SQL2:计算指定用户已经抽奖的次数

SELECT COUNT(*) FROM jd_lottery WHERE userId=?

  (19)修改HTML,usercenter.html,“幸运抽奖”界面中有个统计按钮,待页面加载完成,异步请求抽奖信息,若用户还有剩余抽奖次数,按钮可用,使用Canvas绘制出抽奖的圆盘和指针

  (20)点击“开始抽奖”,则圆盘开始旋转,而指针保持正直不动

提示:旋转deg度,绘制圆盘,再逆向旋转deg度,绘制指针

 

 

 

 

 

2.面试题:如何实现特定布局:父容器宽度不定,左侧定宽210px,右侧占剩余全部

  .parent {   }

  .left {

   float: left;

width: 210px;

  }

  .right {

margin-left: 210px;

  }

 

 

3.常用的第三方图表绘制工具

  (1)Chart.js,基于Canvas,开源,提供了8图表

  (2)EChart.js,百度提供的,开源的,手册简单易懂

  (3)FusionChart.js,收费的,提供了90+种图表还有几千张地图

 

 第三方图表绘制工具FusionChart.js的使用:

  (1)找官网,看说明

http://www.fusioncharts.com/

收费的图表绘制工具,根据底层浏览器的兼容性选择不同的技术实现,如SVG、Flash等。提供了90+种图表还有几千张地图,同时实现了响应式应用。

  (2)找Demo,仿写示例

1. Installing FusionCharts Suite XT for your application

2. Converting your data to a JSON or XML format

3. Including the FusionCharts Suite XT JavaScript library in your HTML page

4. Creating a container 

 for the chart

5. Using the new FusionCharts() constructor to create the chart instance, and then calling the render()method

  (3)看API Document,实现项目案例

   var c = new FusionCharts({     

      type: 'column2d',

      renderAt: 'container-buy-stat-svg',

      width: '90%',

      height: '500',

      dataSource: {

        data: list

      }

    });

    c.render();

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(HTML5新特性)