Js实现购物车加减，价格计算等功能
需求说明：
1、单击“半闭”按钮时，关闭当前页面购物车页面
2、单击“移入收藏”弹出收藏提示
3、单击“删除”弹出确认删除提示
4、单击“结算”按钮，弹出结算信息页面窗口
5、自动计算商品总计
6、单击“删除”按钮，使用parentNode访问当前节点的父亲节点等，使用removeChild( )删除当前商品
效果图：
文章图片
代码：
完善当当购物车页面 body,ul,li,div,p,h1,h2,ol{margin: 0;
padding: 0;
}
ul,li,ol{list-style: none;
}
.content{width: 810px;
margin: 0 auto;
font-family: "微软雅黑";
}
.logo{margin: 10px 0;
}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
}
.cartList{
/*background: url("../image/02.jpg") no-repeat;
*/
/*height: 414px;
*/
overflow: hidden;
}
.cartList ul{
display: flex;
justify-content: space-between;
/*float: right;
*/
/*width: 450px;
*/
}
.cartList ul:nth-of-type(1){
display: flex;
margin-top: 125px;
}
.cartList ul:nth-of-type(2){
margin: 20px 0;
}
.cartList ul li{
font-family: "微软雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
/*float: left;
*/
}
.cartList ul li input[name="price"]{
border: none;
background: transparent;
width: 45px;
text-align: center;
}
.cartList ul li input[name="amount"]{
width: 45px;
text-align: center;
border: 1px solid #999999;
border-left: none;
border-right: none;
height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
height: 25px;
border: 1px #999999 solid;
width: 25px;
text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;
}
.cartList ul li:nth-of-type(2){width: 100px;
}
.cartList ul li:nth-of-type(3){width: 130px;
}
.cartList ul li p{cursor: pointer;
}
.cartList ol{
float: right;
clear: both;
margin-top: 40px;
}
.cartList ol li{
float: left;
}
.cartList ol li:nth-of-type(1){
color: #ff0000;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
}
.cartList ol li span{display: inline-block;
float: right;
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
/*margin-top: 5px;
*/
/*margin-right: 15px;
*/
cursor: pointer;
font-weight: bold;
}关闭
- 商品信息
- 商品图片
- 单价（元）
- 数量
- 金额（元）
- 操作
- 《平凡的世界》
文章图片
- ￥
- ￥21.90
- 移入收藏
【Js实现购物车加减，价格计算等功能】删除
- 《昆虫记》
文章图片
- ￥
- ￥24.00
- 移入收藏
删除
-
- 结算
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM