商城购物车代码Word下载.docx
《商城购物车代码Word下载.docx》由会员分享，可在线阅读，更多相关《商城购物车代码Word下载.docx（12页珍藏版）》请在冰豆网上搜索。
inputclass="
check-allcheck"
type="
checkbox"
&
nbsp;
全选<
/label>
/th>
商品<
单价<
数量<
小计<
操作<
/tr>
/thead>
tbody>
tdclass="
check-onecheck"
/td>
goods"
imgsrc="
images/1.jpg"
alt="
"
span>
Casio/卡西欧EX-TR350<
/span>
price"
5999.88<
count"
spanclass="
reduce"
count-input"
text"
value="
1"
add"
+<
subtotal"
operation"
delete"
删除<
images/2.jpg"
Canon/佳能PowerShotSX50HS<
3888.50<
images/3.jpg"
Sony/索尼DSC-WX300<
1428.50<
images/4.jpg"
Fujifilm/富士instaxmini25<
640.60<
/tbody>
/table>
foot"
id="
labelclass="
flselect-all"
inputtype="
class="
aclass="
fldelete"
deleteAll"
javascript:
;
/a>
frclosing"
结算<
/div>
frtotal"
合计：
￥<
spanid="
priceTotal"
0.00<
frselected"
selected"
已选商品<
selectedTotal"
0<
件<
arrowup"
︽<
arrowdown"
︾<
selected-view"
divid="
selectedViewList"
clearfix"
div>
取消选择<
arrow"
◆<
/body>
/html>
样式页面Style.css
@charset"
utf-8"
*{margin:
0;
padding:
list-style-type:
none;
}
a{color:
#666;
text-decoration:
table{border-collapse:
collapse;
border-spacing:
border:
body{color:
font:
12px/180%Arial,Helvetica,sans-serif,"
新宋体"
clearfix:
after{content:
."
display:
block;
height:
clear:
both;
visibility:
hidden}
.clearfix{display:
inline-table}
*html.clearfix{height:
1%}
block}
*+html.clearfix{min-height:
.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;
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:
float:
.goodsimg{width:
100px;
80px;
margin-right:
.price{width:
130px;
.count{width:
90px;
.count.add,.countinput,.count.reduce{float:
-1px;
position:
relative;
z-index:
.count.add,.count.reduce{height:
23px;
17px;
1pxsolid#e5e5e5;
background:
#f0f0f0;
line-height:
.count.add:
hover,.count.reduce:
hover{color:
#f50;
3;
border-color:
#f60;
cursor:
pointer;
.countinput{width:
50px;
15px;
1pxsolid#aaa;
#343434;
4px0;
background-color:
#fff;
2;
.subtotal{width:
150px;
red;
font-weight:
bold;
.operationspan:
hover,a:
hover{cursor:
underline;
.foot{margin-top:
48px;
1pxsolid#c8c8c8;
#eaeaea;
background-image:
linear-gradient（RGB（241,241,241）,RGB（226,226,226））;
8;
.footdiv,.foota{line-height:
.foot.select-all{width:
padding-left:
5px;
.foot.closing{border-left:
#000;
RGB（238,238,238）;
.foot.total{margin:
020px;
.foot#priceTotal,.foot#selectedTotal{color:
font-family:
MicrosoftYahei"
.foot.selected{cursor:
.foot.selected.arrow{position:
top:
-3px;
margin-left:
3px;
.foot.selected.down{position:
.show.selected.down{display:
inline;
.show.selected.up{display:
.foot.selected:
hover.arrow{color:
.foot.selected-view{width:
935px;
absolute;
auto;
#ffffff;
9;
bottom:
left:
.show.selected-view{display:
.foot.selected-viewdiv{height:
.foot.selected-view.arrow{font-size:
16px;
#c8c8c8;
right:
330px;
-9px;
.foot.selected-view.arrowspan{color:
0px;
1px;
#selectedViewList{padding:
10px20px10px20px;
#selectedViewListdiv{display:
inline-block;
1pxsolid#ccc;
#selectedViewListdivimg{width:
#selectedViewListdivspan{display:
font-size:
12px;
18px;
#selectedViewListdiv:
hoverspan{display:
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<
len;
i++）{
if（els[i].className.indexOf（cls+'
'
）>
=0||els[i].className.indexOf（'
+cls+'
+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;
if（tr[i].getElementsByTagName（'
input'
）[0].checked）{
tr[i].className='
on'
seleted+=parseInt（tr[i].getElementsByTagName（'
）[1].value）;
price+=parseFloat（tr[i].cells[4].innerHTML）;
HTMLstr+='
+tr[i].getElementsByTagName（'
img'
）[0].src+'
del"
index="
+i+'
}
else{
}
selectedTotal.innerHTML=seleted;
priceTotal.innerHTML=price.toFixed
（2）;
selectedViewList.innerHTML=HTMLstr;
if（seleted==0）{
foot.className='
//计算单行价格
functiongetSubtotal（tr）{
varcells=tr.cells;
varprice=cells[2];
//单价
varsubtotal=cells[4];
//小计td
varcountInput=tr.getElementsByTagName（'
）[1];
//数目input
varspan=tr.getElementsByTagName（'
span'
//-号
//写入HTML
subtotal.innerHTML=（parseInt（countInput.value）*parseFloat（price.innerHTML））.toFixed
（2）;
//如果数目只有一个，把-号去掉
if（countInput.value==1）{
span.innerHTML='
}else{
-'
//点击选择框
for（vari=0;
selectInputs.length;
i++）{
selectInputs[i].onclick=function（）{
if（this.className.indexOf（'
=0）{//如果是全选，则吧所有的选择框选中
for（varj=0;
j<
j++）{
selectInputs[j].checked=this.checked;
this.checked）{//只要有一个未勾选，则取消全选框的选中状态
for（vari=0;
checkAllInputs.length;
checkAllInputs[i].checked=false;
getTotal（）;
//选完更新总计
//显示已选商品弹层
selected.onclick=function（）{
if（selectedTotal.innerHTML!
=0）{
foot.className=（foot.className=='
?
footshow'
:
//已选商品弹层中的取消选择按钮
selectedViewList.onclick=function（e）{
vare=e||window.event;
varel=e.srcElement;
if（el.className=='
del'
）{
varinput=tr[el.getAttribute（'
index'
）].getElementsByTagName（'
）[0]
input.checked=fal
升级会员 