！声明文档类型

超文本标记语言

头

meta charset='UTF-8 '

标题原生射流研究…实现购物车结算功能/title

style type='text/css '

@ charset ' utf-8 '；

* { margin :0 padd :0 list-style-type : none；}

a { color : # 666 text-decoration : none；}

表格{ border-collapse : collapse；边框间距：0;border:0}

body { color : # 666 ' font :12 px/180% Arial，Helvetica，无衬线'新宋体；}

{content:'后的clearfix:after .显示： block height :0 clear : both可视性：隐藏}。清除修复{ display : inline-table }

*html .clearfix{height:1%}。clearfix{display:block}

* html .clearfix{min-height:1%}。fl { float:left}。fr { float:right}。catbox { width :940 pxmargin :100 px auto }。catbox表格{ text-align : center宽度：;}。catbox表th .catbox table TD { border :1 px solid # CADEFF；}。catbox table th { background : # e2f 2ff；边框-顶部：3 px实心# a7 cbff。高度：30px}。catbox table TD { padd :10 pcolor : # 444 }。catbox table t body tr :悬停{ background : RGb(238，246，255)；}。复选框{ width:60px}。check-all { vertical-align : middle；}。货物{ width:300px}。货物跨度{ width :180 pxmargin-top :20 px；向左文本对齐：float:left}。货物img { width :100 pxhire :80 pxmargin-right :10 px；float:left}。价格{ width:130px}。计数{ width:90px}。数数。添加，计数输入，数数。减少{ float : leftmargin-right :-1px；位置：相对；z指数：0;}。数数。添加，数数。降低{ height :23 pxwidth :17 pxborder :1 px固体# e5e5e5背景技术： # f0f 0；文本对齐：中心；线高：23 px颜色： # 444}。数到：数数。减少：悬停{ color : # f50z-索引：3;边框颜色： # f60光标：指针指针；}。计数输入{ width :50 pxh weight :15 px线高：15 pxborder:1px实心# AAA color : # 343434 text-align : center；padd :4 px 0；背景-color : # fff；z-索引：2;}。小计{ width :150 pxcolor : red font-weight : bold；}。操作span:hover，一个： hover { cursor :color : red text-decoration :下划线；}。英尺{ margin-top :0 px；color : # 666 h8 :48 pxborder :1 px固体# c8 c8 c8 border-top :0；背景-color : # eaea；背景-图像：线性-梯度(RGB(241，241，241)，RGB(226，226，226))；位置：相对；z索引：8；}。foot div .foot a { line-height :48 px高度：48px}。脚全选{ width :80 px高度：48像素行高：48 pxcolor : # 666 text-align : center；}。脚。删除{ padding-left :10 px；}。脚。关闭{ border-left :1 px solid # c8 c8；横向：103外部-中心对齐：color : # 666 font-weight : bold；光标：指针指针；背景-图像：线性-梯度(RGB(241，241，241)，RGB(226，226，226))；}。脚。关闭：悬停{背景-图像：线-渐变(RGB(226，226，226)，RGB(241，241，241))；颜色： # 333}。脚。总计{ margin:0 20pxcursor:pointer指针指针；}。英尺#价格总计，脚#选中总{ color : red' font-family: '微软雅黑；font-weight : bold；}。脚。选定的{光标：指针}。脚。选中箭头{ position : relativetop :-3px；边距-左：3 px}。脚。选中向下{ position : relativetop :3 pxdisplay : none }。表演。选中向下{ display:inline}。表演。选中向上{ display:none}。foot .selected:hover .箭头{ color:red}。脚选定视图{ width :938 pxborder:1px固体# c8c8c8position:absolute值；height : autobackground : # ffffffz-index :9；bottom :48 pxleft :-1px；display:none}。表演选定视图{显示：块；}。脚选定视图div { height : auto}。脚。选定视图arrow { font-size :16 px线高：;color : # c8 c8 c8 position : absolute值；right :330 pxbottom :-9px；}。脚。选定视图箭头span { color : # ffffposition : absolute值；left:0pxbottom:1px}

# Selected view list { padd :10 px 20px 10px 20px；}

#选定视图列表分区{显示：内嵌块；位置：相对；宽度宽度：100像素宽度：80像素边框：1像素实心# cccmargin :10 pxfloat : left }

#选定视图列表div img { width :100 pxheight :80 pxmargin-right :10 px；float:left}

# selected view list div span { display : none；color : # fffffont-size :12 px；位置：值；top:0pxright:0px宽度：60 px高度：18像素行高：18 px文本对齐：中心；背景： # 000;光标：指针指针；}

#选定视图列表div :悬停跨度{显示：块；}

/style

/head

身体

div class='catbox '

表id='cartTable '

四羟乙基己二酰胺

tr

thlabel

input class=' check-all check ' type=' checkbox '/nbsp .nbsp .全选/label/th

泰国(泰国)商品/th

泰国(泰国)单价/th

泰国(泰国)数量/th

泰国(泰国)小计/th

泰国(泰国)操作/th

/tr

/thead

在需要分行下载处加上

tr

TD class=' checkbox '输入class=' check-one check '类型=' checkbox '/TD

td class='goods'spanCasio/卡西欧EX-TR350/span/td

td class='price'5999.88/td

TD class=' count ' span class=' reduce '/span

input class=' count-input ' type=' text ' value=' 1 '/

span class='add' /span/td

td class='subtotal'5999.88/td

TD class=' operation ' span class=' delete '删除/span/td

/tr

tr

TD class=' checkbox '输入class=' check-one check '类型=' checkbox '/TD

td class='goods'spanCanon/佳能PowerShot SX50 HS/span/td

td class='price'3888.50/td

TD class=' count ' span class=' reduce '/span

input class=' count-input ' type=' text ' value=' 1 '/

span class='add' /span/td

td class='subtotal'3888.50/td

TD class=' operation ' span class=' delete '删除/span/td

/tr

tr

TD class=' checkbox '输入class=' check-one check '类型=' checkbox '/TD

td class='goods'spanSony/索尼DSC-WX300/span/td

td class='price'1428.50/td

TD class=' count ' span class=' reduce '/span

input class=' count-input ' type=' text ' value=' 1 '/

span class='add' /span/td

td class='subtotal'1428.50/td

TD class=' operation ' span class=' delete '删除/span/td

/tr

tr

TD class=' checkbox '输入class=' check-one check '类型=' checkbox '/TD

td class='goods'spanFujifilm/富士instax mini 25/span/td

td class='price'640.60/td

TD class=' count ' span class=' reduce '/span

input class=' count-input ' type=' text ' value=' 1 '/

span class='add' /span/td

td class='subtotal'640.60/td

TD class=' operation ' span class=' delete '删除/span/td

/tr

/tbody

/table

div class='foot' id='foot '

label class=' fl select-all ' input type=' checkbox ' class=' check-all check '/nbsp .nbsp .全选/label

a class=' fl delete ' id=' delete ALl ' href=' JAVAScript :'删除/a

div class='fr closing '结算/div

输入类型='隐藏id='cartTotalPrice' /

div class='fr total '合计：span id=' PriceTotal ' 0.00/span/div

div class=' fr selected ' id=' selected '已选商品span id='selectedTotal'0/span件阿罗up'︽/spanspan阿罗down'︾/span/div

div class='selected-view '

div id='选定视图列表' class='清除修复'

divig src=' images/1。jpg ' span取消选择/span/div

/div

span class=' arrow 'span/span/span/div

/div

/div

/body

/html

脚本类型='text/javascript '

/**

* 购物车

*/

window.onload=function () {

//兼容getElementsByClassName()方法

if(！文件。getelementsbyclassname){

文件。getelementsbyclassname=function(cls){

var ret=[]；

var els=文档。getelementsbytagname(' * ')；

for (var i=0，len=els . len ii leni){

//如果存在" cls "或" cls "或" cls "以上三种形式的一种则放入浸水使柔软数组

if(els[I]。CLaSS名称。(cls ' ')=0 | | els[I]的索引。CLaSS名称。(' cls ' ')=0 | | els[I]的索引。CLaSS名称。的索引(' cls '=0){

ret。推送(els[I])；

}

}

浸水使柔软返回；

}

}

//获取数字正射影像图节点

var table=文档。GetElementbyID(' cart table ')；//购物车表格

var selectionputs=document。getelementsbyclassname(' check ')；//所有勾选框

var checkAllInputs=document。getelementsbyclassname(' check-all ')//全选框

var tr=table.children[1].行；//行

var selected total=文档。getelementbyid('选定的总数')；//已选商品数目容器

var price total=文档。getelementbyid(' price total ')；//总计

var delete all=文档。getelementbyid(' delete all ')；//删除全部按钮

var选定视图列表=文档。GetElementbyID('选定的视图列表')；//浮层已选商品列表容器

var selected=文档。GetElementbyID('选定')；//已选商品

var foot=文档。getelementbyid(' foot ')；

//更新总数和总价格，已选浮层

函数getTotal() {

var selected=0；//用于存放已选商品的个数

var price=0；//用于存放已选商品的总价格

var HTMLstr=

for (var i=0，len=tr . lenti leni){//遍历查找每个tr中被选中的多选按钮

if (tr[i]).getElementsByTagName(' input ')[0].选中){

tr[i].className=' on//给当前选中的tr添加标记

selected=ParSeint(tr[I]).getElementsByTagName(' input ')[1].值);//获取当前商品的个数，并累加

price=parseFloat(tr[i]).单元格[4]。innerHTML)；//获取当前tr下的第五个单元格里保存的价格值，并累加

//拼接带有正确数据的超文本标记语言标签（弹框图片)

html STr=' div span class=' del ' index=' I ' '取消选择/span/div '

}

else {

//如果没有选中，则取消标记

tr[i].className=

}

}

//呈现数据

选定总计。InnerHTML=选中；

总价。innerhtml=price。to fixed(2)；

选定的视图列表。innerHTMl=HTMl字符串；

if(select==0){

foot.className=' foot

}

}

//计算单行价格

函数getSubtotal(tr) {

可变单元格=tr.cells

var price=cells[2]；//获取当前商品的单价信息

var subtotal=cells[4]；//获取当前商品的小计（商品的单价*个数)信息

var计数输入=tr。GetElementsBytagName(' input ')[1]；//获取当前商品被选中了几个

var span=tr。GetElementsBytagName(' span ')[1]；//获取'-'号按钮

//写入超文本标记语言

小计。InnerHTMl=(Parseint(CountInput。值)* ParseFloat(价格。InnerHTMl).toFixed(2)；

//如果数目只有一个，把-号去掉

if (countInput.value==1) {

span.innerHTML=

}else{

跨度。innerHTMl='-'；

}

}

//点击全选按钮所触发的事件

for(var I=0；我选择输出。长度；i ){

//给每个全选按钮添加点击事件

选择输出[i].onclick=function () {

if(this。类名。的索引(' check-all ')=0){//如果是全选，则吧所有的选择框选中

for(var j=0；j选择输出长度；j ) {

选择输出[j]9 .checked=this.checked

}

}

if(！this.checked) { //只要有一个未勾选，则取消全选框的选中状态

for(var I=0；我检查所有的输入i ) {

所有看跌期权.选中=假

}

}

getTotal()；//选完更新总计

}

}

//显示已选商品弹层

selected.onclick=function () {

if (selectedTotal.innerHTML！=0) {

脚。CLaSS name=(英尺。CLaSS name==' foot '？英尺显示' : '英尺');

}

}

//已选商品弹层中的取消选择按钮

选定的视图列表。onclick=function(e){

var e=e | | window.event

var El=e.srcElement//获取触发了点击事件的数字正射影像图节点（跨度取消选择/span)

if (el.className=='del') {

//获取与该跨度对应的投入标签

var输入=tr[El。GetAttribute(' index ')].getElementsByTagName(' input ')[0]

//设置为不选中

input.checked=false

//刷新页面的信息

输入。onclick()；

}

}

//为每行元素添加事件

for(var I=0；i tr.lengthi ) {

//将点击事件绑定到tr元素

tr[i].onclick=function (e) {

var e=e | | window.event

var El=e . target | | e . srcelement//通过事件对象的目标属性获取触发元素

var cls=el.className//触发元素的班级

var countInout=this。GetElementsBytagName(' input ')[1]；//数目投入

var value=Parsent(countinout。值)；//数目

//通过判断触发元素的班级确定用户点击了哪个元素

开关(cls) {

case 'add': //点击了加号

countinout。值=值1；

getSubtotal(this)；

打破；

case 'reduce': //点击了减号

if(值1) {

countinout。value=value-1；

getSubtotal(this)；

}

打破；

case 'delete': //点击了删除

var conf=confirm('确定删除此商品吗？');

if (conf) {

这个。ParentNode。移除子(this)；

}

打破；

}

getTotal()；

}

//给数目输入框绑定键盘事件

tr[i].getElementsByTagName(' input ')[1].onkeyup=function () {

var val=ParSeint(这。值)；

if (isNaN(val) || val=0) {

val=1；

}

if (this.value！=val) {

this.value=val

}

getSubtotal(这个。父节点。父节点)；//更新小计

getTotal()；//更新总数

}

}

//点击全部删除

deleteAll.onclick=function () {

if (selectedTotal.innerHTML！=0) {

var con=确认('确定删除所选商品吗？');//弹出确认框

if (con) {

for(var I=0；i tr.lengthi ) {

//如果被选中，就删除相应的行

if (tr[i]).getElementsByTagName(' input ')[0].选中){

tr[I]。父节点。移除子项(tr[I])；//删除相应节点

我-；//回退下标位置

}

}

}

} else {

" alert("请选择商品！');

}

getTotal()；//更新总数

}

//默认全选

检查所有输入[0]。选中=真

检查所有输入[0]。onclick()；

}

/script