商城购物车代码.docx

样式页面Style.css

@charset"utf-8";

*{margin:

0;padding:

0;list-style-type:

none;}

a{color:

#666;text-decoration:

none;}

table{border-collapse:

collapse;border-spacing:

0;border:

0;}

body{color:

#666;font:

12px/180%Arial,Helvetica,sans-serif,"新宋体";}

clearfix:

after{content:

".";display:

block;height:

0;clear:

both;visibility:

hidden}

.clearfix{display:

inline-table}

*html.clearfix{height:

1%}

.clearfix{display:

block}

*+html.clearfix{min-height:

1%}

.fl{float:

left;}

.fr{float:

right;}

.catbox{width:

940px;margin:

0auto;}

.catboxtable{text-align:

center;width:

100%;}

.catboxtableth,.catboxtabletd{border:

1pxsolid#CADEFF;}

.catboxtableth{background:

#e2f2ff;border-top:

1pxsolid#a7cbff;height:

30px;}

.catboxtabletd{padding:

10px;color:

#444;}

.catboxtabletbodytr:

hover{background:

RGB（238,246,255）;}

.checkbox{width:

60px;}

.goods{width:

300px;}

.goodsspan{width:

180px;margin-top:

20px;text-align:

left;float:

left;}

.goodsimg{width:

100px;height:

80px;margin-right:

10px;float:

left;}

.price{width:

130px;}

.count{width:

90px;}

.count.add,.countinput,.count.reduce{float:

left;margin-right:

-1px;position:

relative;z-index:

0;}

.count.add,.count.reduce{height:

23px;width:

17px;border:

1pxsolid#e5e5e5;background:

#f0f0f0;text-align:

center;line-height:

23px;color:

#444;}

.count.add:

hover,.count.reduce:

hover{color:

#f50;z-index:

3;border-color:

#f60;cursor:

pointer;}

.countinput{width:

50px;height:

15px;line-height:

15px;border:

1pxsolid#aaa;color:

#343434;text-align:

center;padding:

4px0;background-color:

#fff;z-index:

2;}

.subtotal{width:

150px;color:

red;font-weight:

bold;}

.operationspan:

hover,a:

hover{cursor:

pointer;color:

red;text-decoration:

underline;}

.foot{margin-top:

10px;color:

#666;height:

48px;border:

1pxsolid#c8c8c8;background-color:

#eaeaea;background-image:

linear-gradient（RGB（241,241,241）,RGB（226,226,226））;position:

relative;z-index:

8;}

.footdiv,.foota{line-height:

48px;height:

48px;}

.foot.select-all{width:

100px;height:

48px;line-height:

48px;padding-left:

5px;color:

#666;}

.foot.closing{border-left:

1pxsolid#c8c8c8;width:

100px;text-align:

center;color:

#000;font-weight:

bold;background:

RGB（238,238,238）;cursor:

pointer;}

.foot.total{margin:

020px;cursor:

pointer;}

.foot#priceTotal,.foot#selectedTotal{color:

red;font-family:

"MicrosoftYahei";font-weight:

bold;}

.foot.selected{cursor:

pointer;}

.foot.selected.arrow{position:

relative;top:

-3px;margin-left:

3px;}

.foot.selected.down{position:

relative;top:

3px;display:

none;}

.show.selected.down{display:

inline;}

.show.selected.up{display:

none;}

.foot.selected:

hover.arrow{color:

red;}

.foot.selected-view{width:

935px;border:

1pxsolid#c8c8c8;position:

absolute;height:

auto;background:

#ffffff;z-index:

9;bottom:

48px;left:

-1px;display:

none;}

.show.selected-view{display:

block;}

.foot.selected-viewdiv{height:

auto;}

.foot.selected-view.arrow{font-size:

16px;line-height:

100%;color:

#c8c8c8;position:

absolute;right:

330px;bottom:

-9px;}

.foot.selected-view.arrowspan{color:

#ffffff;position:

absolute;left:

0px;bottom:

1px;}

#selectedViewList{padding:

10px20px10px20px;}

#selectedViewListdiv{display:

inline-block;position:

relative;width:

100px;height:

80px;border:

1pxsolid#ccc;margin:

10px;float:

left;}

#selectedViewListdivimg{width:

100px;height:

80px;margin-right:

10px;float:

left;}

#selectedViewListdivspan{display:

none;color:

#ffffff;font-size:

12px;position:

absolute;top:

0px;right:

0px;width:

60px;height:

18px;line-height:

18px;text-align:

center;background:

#000;cursor:

pointer;}

#selectedViewListdiv:

hoverspan{display:

block;}

Js页面demo.js

/**

*Createdbyan.hanon13-12-17.

*/

window.onload=function（）{

if（!

document.getElementsByClassName）{

document.getElementsByClassName=function（cls）{

varret=[];

varels=document.getElementsByTagName（'*'）;

for（vari=0,len=els.length;i

if（els[i].className.indexOf（cls+''）>=0||els[i].className.indexOf（''+cls+''）>=0||els[i].className.indexOf（''+cls）>=0）{

ret.push（els[i]）;

}

}

returnret;

}

}

vartable=document.getElementById（'cartTable'）;//购物车表格

varselectInputs=document.getElementsByClassName（'check'）;//所有勾选框

varcheckAllInputs=document.getElementsByClassName（'check-all'）//全选框

vartr=table.children[1].rows;//行

varselectedTotal=document.getElementById（'selectedTotal'）;//已选商品数目容器

varpriceTotal=document.getElementById（'priceTotal'）;//总计

vardeleteAll=document.getElementById（'deleteAll'）;//删除全部按钮

varselectedViewList=document.getElementById（'selectedViewList'）;//浮层已选商品列表容器

varselected=document.getElementById（'selected'）;//已选商品

varfoot=document.getElementById（'foot'）;

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

functiongetTotal（）{

varseleted=0;

varprice=0;

varHTMLstr='';

for（vari=0,len=tr.length;i

if（tr[i].getElementsByTagName（'input'）[0].checked）{

tr[i].className='on';

seleted+=parseInt（tr[i].getElementsByTagName（'input'）[1].value）;

price+=parseFloat（tr[i].cells[4].innerHTML）;

HTMLstr+='

}

else{

tr[i].className='';

}

}

selectedTotal.innerHTML=seleted;

priceTotal.innerHTML=price.toFixed

（2）;

selectedViewList.innerHTML=HTMLstr;

if（seleted==0）{

foot.className='foot';

}

}

//计算单行价格

functiongetSubtotal（tr）{

varcells=tr.cells;

varprice=cells[2];//单价

varsubtotal=cells[4];//小计td

varcountInput=tr.getElementsByTagName（'input'）[1];//数目input

varspan=tr.getElementsByTagName（'span'）[1];//-号

//写入HTML

subtotal.innerHTML=（parseInt（countInput.value）*parseFloat（price.innerHTML））.toFixed

（2）;

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

if（countInput.value==1）{

span.innerHTML='';

}else{

span.innerHTML='-';

}

}

//点击选择框

for（vari=0;i

selectInputs[i].onclick=function（）{

if（this.className.indexOf（'check-all'）>=0）{//如果是全选，则吧所有的选择框选中

for（varj=0;j

selectInputs[j].checked=this.checked;

}

}

if（!

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

for（vari=0;i

checkAllInputs[i].checked=false;

}

}

getTotal（）;//选完更新总计

}

}

//显示已选商品弹层

selected.onclick=function（）{

if（selectedTotal.innerHTML!

=0）{

foot.className=（foot.className=='foot'?

'footshow':

'foot'）;

}

}

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

selectedViewList.onclick=function（e）{

vare=e||window.event;

varel=e.srcElement;

if（el.className=='del'）{

varinput=tr[el.getAttribute（'index'）].getElementsByTagName（'input'）[0]

input.checked=fal

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

商城 购物 代码

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。