|
需求说明：
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
移入收藏 删除
《昆虫记》
¥
¥24.00
移入收藏 删除
;
结算
//减法
function minus(index) {
//获取当前数量的值
var amounts=document.getElementsByName("amount");
//得到第一个amount的元素的value属性的值
var count=parseInt(amounts[index].value); //数量加1
if (count |