商城购物车代码Word下载.docx
- 文档编号:21360683
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:12
- 大小:91.25KB
商城购物车代码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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 商城 购物 代码