JS实现购物车商品 加、减、单选、全选、删除、手动输入、价格更新等功能，供大家参考，具体内容如下
Javascript代码
$(function(){
$("#footer").hover(function(){
$("#footer").css({"border":"#e00"})
},)
var inputs=document.getElementsByName("good-id");
var all=document.getElementsByName("all")[0];
all.onclick=function(){
for(var i=0;i1){
counts.value=--count;
}
sumprice();
}
}
//增加
var plus=document.getElementsByName("plus");
for(var i=0;i
CSS代码
@charset "utf-8";
#main{
padding: 30px 0px;
}
#cart{
background: #FFFFFF;
padding: 40px;
}
#cart h1{
line-height: 40px;
padding: 0px 0px 10px 0px;
}
table.form{
border-collapse: collapse;
empty-cells: show;
margin: 20px 0px;
padding: 0px;
table-layout: fixed;
width: 100%;
}
table.form th,
table.form td{
border-bottom: 1px solid #DDDDDD;
padding: 15px 10px;
text-align: left;
}
table.form{
border-top: 3px solid #DDDDDD;
}
.goods .goods-image img{
border: 1px solid #DDDDDD;
float: left;
height: 100px;
margin: 0px 20px 0px 0px;
}
.goods .goods-information{
float: left;
}
.goods .goods-information ul{
color: #666666;
font-size: 12px;
line-height: 20px;
margin:10px 0px 0px 0px;
}
.price,
.amount,
#total-amount{
color: #E00000;
}
#total-amount{
font-size: 22px;
}
.price em,
.amount em,
#total-amount em{
font-style: normal;
}
.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus{
background: #FFFFFF;
border: 1px solid #DDDDDD;
color: #333333;
float: left;
font-weight: bold;
margin: 0px;
outline: none;
text-align: center;
}
.combo .combo-minus,
.combo .combo-plus{
font-size: 16px;
height: 26px;
line-height: 26px;
padding: 0px;
width: 24px;
}
.combo .combo-value{
border-left: none;
border-right: none;
height: 20px;
line-height: 20px;
padding: 2px;
width: 40px;
}
#cart-delete{
margin-left: 20px;
}
#settlement{
background: #E00000;
border: none;
color: #FFFFFF;
float: right;
font-size: 16px;
height: 40px;
line-height: 40px;
margin: 0px;
outline: none;
padding: 0px;
width: 160px;
}
HTML代码
商城
北京
-
登录
- |
-
免费注册
- |
-
我的订单
- |
-
收藏夹
- |
-
帮助中心
LOGO
-
热搜：
-
笔记本
- |
-
平板
- |
-
手机
- |
-
墨盒
高级搜索
购物车
0
全部商品分类
- 美容彩妆
-
护肤
|
面膜
|
防晒
|
彩妆
|
香水
- 服饰箱包
-
大牌
|
服饰
|
箱包
|
配饰
|
鞋履
- 数码家电
-
手机
|
生活
|
厨房
|
数码
|
办公
- 家居个护
-
洗护
|
居家
|
女性
|
宠物
|
家纺
- 运动户外
-
运动服饰
|
运动鞋
|
户外服饰
|
户外鞋靴
|
户外装备
- 环球美食
-
饮品
|
零食
|
粮油
|
糕点
-
促销
-
秒杀
-
优惠券
购物车
- 100%正品
- 正品保障 假一赔十
- 无忧退货
- 国内退货 售后无忧
- 低价保障
- 缩减环节 确保低价
- 海外发货
- 海外直邮 闪电发货
购物指南
-
购物流程
-
发票制度
-
账户管理
-
会员优惠
支付方式
-
货到付款
-
网上支付
-
礼 品 卡
-
银行转账
订单服务
-
配送查询
-
状态说明
-
取消订单
-
修改订单
配送方式
-
配送范围
-
免邮标准
-
订单自提
-
验货签收
售后服务
-
售后政策
-
价格保护
-
退款说明
-
退 换 货
-
关于我们
- |
-
服务条款
- |
-
隐私保护
- |
-
联系我们
- |
-
帮助中心
Copyright © 2016 XXX. All Rights Reserved.
注：CSS样式代码由于太多上面没有给全，只给了主要代码。小伙伴们可以根据实际情况修改样式。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
