Web源码学习：购物车功能实现与HTML5新特性概览.pdfVIP

今天学习的内容

1:复习昨天的重点

2:今天的目标

2.1:学子商城--商品详细[添加至购物车按钮]

1:修改表xz_cart添加一列count表示数据

2:app.get(/addcart,(req,res)={

参数:pid,pname,price,count=1

sql:

1:SELECTidFROMxz_cartWHEREuid=?ANDpid=?

result.length==0

2:INSERTINTO(id,pid,uid,pname,price)VALUES

xz_cart(null,?,?,,?,)

3:UPDATExz_cartSETcount=count+1WHEREuid=?ANDpid=?

json

})

2.x:session明天

2.x:vuex后天

2.2:HTML5新特性

#vueui-html5没有关系

-新的语义

-增型表单

-和音频

-绘图canvas(绘制复杂图形/网页游戏)

-绘图svg

-地理定位

-拖放API

-WebWorker

-WebStorage

-WebSocket

2.3:HTML5新特性--增型表单(了解)

-新的inputtypeinputtype=?

h4:text;button;password;submit;reset;checkbox;radio..

h5:number;email;url;color;date;month;week

#建议大家:谨慎使用以上属性兼容性差

-新的元素element

h4:inputselecttextarea..

-datalist建议列表

通常配置input创建建议列表,当用户不清楚要输入

内容建议

datalistid=list3默认情况下datalist不可见

optionxx/option

optionyy/option

/datalist

inputtype=textlist=list3/

-progress进度条

显示一个进度条两种形式

progress/progress左右晃动进度条

progressvalue=0.7/具有指定进度值进度条

练习:使用定时器+进度条实现一个可以动态

前进的进条度.

创建定时器每隔1s修改进度value=value+0.1

value==1定时器停止

-meter刻度尺

metermin=最小值max=最大值

low=下限high=上限

optimum=最佳值value=当前值/meter

随机当前值不同改变不同颜色

当前值离最佳值非常远红

当前值离最佳值比较近黄警告当

前值离最佳值非常近绿正常练

习:使用定时器创建动态进前进度条

value0~100000

建议:100每次

-output输出语义

没有任何外观样式,外观同span

商品单价:￥3.5

商品数量:inputtype=numbervalue=1/

商品小计:output￥3.5/output