Web源码笔记：商品详情显示与HTML5多媒体特性.pdfVIP

今天学习的内容

1:复习昨天的内容

2:作业学子商城--商品详细信息

2.1:商品详细信息显示

-表:xz_laptop商品信息[lid;title;price;lname]

-app.js

参数:lid商品编号

sql:SELECTlid,title,price,lnameFROMxz_laptop

WHERElid=?

json{code:1,msg:[]}

-GoodInfo.vue

发送ajax获取商品信息显示

-创建空组件GoodInfo.vue指定路径/GoodInfo

-添加mui卡片布局

-发送ajax请求获取数据并且显示内容

2.2:session[会话]

session会话:操作过程

-当用户打开某个的第一个网页开始(会话开始)

-中间用户可以打开任意数量网页(会话中)

-当用户关闭浏览器(会话结束)

session对象:在服务器端(node.js)保存数据对象

session对象保存数据在会话中(开始,中)生效,一旦会

话结束

session对象也随之失效,其中保存数据丢失了

3:今天的目标

3.1:html5新特性--/音频--特殊

-canythrough当加载结束可以触发

duration:获取到总长度

-ended结束

-timeupdate正在[触发多次]

#currentTime当前时间

3.2:html5新特性--/音频--特殊css属性

元素样式object-fit

fill:填充默认值将拉伸操作填满空间

contain:包含保持原有尺寸比例，容器空白

cover:覆盖保持原有尺寸比例,宽度或者高度

至少一个可以与父元素一致[裁切]

3.3:html5新特性--音频

音频格式:x.mp3x.wavx.ogg

audiosrc=x.mp3/audio

属性方法和与相同

练习:创建复选框控制背景音乐

当复选框选中背景音乐y()

当复选框清除背景音乐暂停pause()

cb.onchangecb.checked==true

3.4:html5新特性--绘图(重点)

在网页中绘制图形:走势,销售统计图,网页特效

,网页游戏..

网页中绘图技术三种

-svg:2D矢量图

-canvas:2D位图

-webgl:3D位图,尚未纳入H5

#2D矢量图:使用线条绘制图形，可以无限放大图形或者

缩小不失真.

#2D位图:使用像素点组件，颜色非常清晰，不能放大

放大失真

3.4:html5新特性--绘图难点[坐标系,单词多]

3.4:html5新特性绘制矩形(理解长方形)

-通过创建画布

canvasid=c3width=500height=400/canvas

注意事项:画布宽度和高度只能使用js或者属性

来赋值，不能使用css赋值

:css赋值图形变形...

-通过js程序获取画布

varc3=document.getElementById(c3);

-通过js程序获取画布上对