需求说明：
点击商品数量加减
改变商品数量
计算单类商品总价和商品总价
js文件
function all() {
var p0 = document.getElementById("price0").innerHTML;
var p1 = document.getElementById("price1").innerHTML;
var jg0 = parseFloat(p0.substring(1));
var jg1 = parseFloat(p1.substring(1));
document.getElementById("totalPrice").innerHTML = "￥" + (jg0 + jg1);
}
function plus(index) {
var danjia = parseFloat(document.getElementsByName("price")[index].value);
var sum = parseInt(document.getElementsByName("amount")[index].value);
document.getElementsByName("amount")[index].value = sum + 1;
var money = danjia * 100 * sum / 100;
document.getElementById("price" + index).innerHTML = "￥" + money;
all();
}
function minus(index) {
var dj = parseFloat(document.getElementsByName("price")[index].value);
var sum = parseInt(document.getElementsByName("amount")[index].value);
if (sum == 1) {
alert("商品数量不能再减少了")
} else {
document.getElementsByName("amount")[index].value = sum - 1;
var money = dj * 100 * sum / 100;
document.getElementById("price" + index).innerHTML = "￥" + money;
all();
}
}
html文件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>操作当当购物车页面</title> <link type="text/css" rel="stylesheet" href="css/cartStyle.css" /> </head> <body> <div class="content"> <div class="logo"> <img src="images/dd_logo.jpg"><span onclick="close_plan();">关闭</span> </div> <div class="cartList" id="cartList"> <ul> <li>商品图片</li> <li>商品信息</li> <li>单价</li> <li>数量</li> <li>总价</li> <li>操作</li> </ul> <ul> <li><img src="images/dog.jpg"></li> <li>我和狗狗活下来了</li> <li>￥<input type="text" name="price" value="21.90"></li> <li><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0);"></li> <li id="price0">￥21.90</li> <li><p onclick="collection();">移入收藏</p><p>删除</p></li> </ul> <ul> <li><img src="images/mai.jpg"></li> <li>灰霾来了怎么办</li> <li>￥<input type="text" name="price" value="24.00"></li> <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1);"></li> <li id="price1">￥24.00</li> <li><p onclick="collection();">移入收藏</p><p>删除</p></li> </ul> <ol> <li id="totalPrice">商品总计：<span></span></li> <li><span>结 算</span></li> </ol> </div> </div> <script src="./shop.js"></script> </body> </html>
css文件
body,ul,li,div,p,h1,h2,ol{margin:0;padding: 0;}
body{margin: 5px 0 0 0}
ul,li,ol{list-style: none;}
.content{width: 680px; margin: 0 auto; font-family: "微软雅黑"; border: solid 1px #cecece; padding: 5px;}
.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{
overflow: hidden;
}
.cartList ul{
clear: both;
width: 100%;
overflow: hidden;
border-bottom: 1px #c6c6c6 dashed;
padding-top: 6px;
}
.cartList ul li img{width: 60px;
}
.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:nth-of-type(4){width: 100px;}
.cartList ul li:nth-of-type(5){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
float: right;
clear: both;
}
.cartList ol li{
float: left;
width: 200px;
}
.cartList ol li:nth-of-type(1) span{
color: #ff0000;
}
.cartList ol li:nth-of-type(2) 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;}