功能比较简单 就一个累加 css也比较简单 以后会发一个完整的购物车
<div class="goods-type">
<div class="type-nav">
<ul>
<li>休闲零食</li>
<li>饮料酒水</li>
<li>方便速食</li>
<li>冷饮</li>
<li>速冻食品</li>
</ul>
</div>
<div class="goods">
<ul class="goods-nav">
<li>全部</li>
<li>饼干</li>
<li>膨化食品</li>
<li>坚果</li>
</ul>
<ul class="goods-con">
<li>
<img src="img/images.png">
<p>达利园法式小面包</p>
<p>200g(10枚)</p>
<p class="price-num"><span class="price" id="jia">¥6</span><span class="num" id="jian">+</span></p>
</li>
</ul>
</div>
</div>
<div class="total">
<div class="cart">
<img src="img/che.png">
<p class="total-num">4</p>
</div>
<div class="total-price"><p id="zongjia"></p>
<p class="v-price">配送费¥5</p></div>
<div class="count">去结算</div>
</div>
<script>
var jian = document.getElementById('jian'); //获取元素的id
var zongjia = document.getElementById('zongjia');//获取总价的id
var num = 6;//初始价格
zongjia.innerHTML = "¥" + num;//给文本赋值
var nums = num;//每次累加的值
jian.onclick = function () {//点击+ 累加
num += nums; //每次加上 初始价格 这个主要 不是 ++ 是+=
zongjia.innerHTML = "¥" + num; //每次点 每次赋值
}
</script>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.goods-type {
margin: 0 auto;
height: 660px;
}
.type-nav {
float: left;
border-top: 1px solid #efefef;
margin-right: 38px;
}
.type-nav li {
height: 112px;
padding-left: 20px;
padding-right: 42px;
background: #f8f8f8;
border-bottom: 1px solid #efefef;
color: #757575;
font-size: 28px;
line-height: 112px;
}
.goods {
float: left;
}
.goods-nav {
height: 112px;
}
.goods-nav li {
float: left;
padding-right: 42px;
color: #999999;
height: 112px;
line-height: 112px;
font-size: 24px;
}
.goods-con {
width: 468px;
}
.goods-con li {
float: left;
width: 180px;
margin-right: 36px;
margin-top: 10px;
}
.price {
float: left;
font-size: 24px;
color: #ff0000;
}
.num {
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
text-align: center;
background: #f8f8f8;
font-size: 20px;
color: green;
}
.total {
height: 83px;
background: #000;
width: 640px;
position: relative;
}
.cart {
width: 87px;
height: 87px;
border-radius: 50%;
text-align: center;
line-height: 87px;
position: absolute;
top: -18px;
left: 22px;
background: #000;
}
.cart img {
vertical-align: middle;
width: 69px;
height: 69px;
}
.total-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: red;
color: #fff;
text-align: center;
line-height: 28px;
position: absolute;
top: 0px;
left: 70px;
}
.total-price {
float: left;
margin-left: 136px;
color: #fff;
padding-top: 20px;
font-size: 26px;
}
.count {
float: right;
width: 178px;
height: 82;
line-height: 82px;
text-align: center;
color: #fff;
background: green;
font-size: 28px;
}
.v-price {
font-size: 17px;
}
</style>