潮鞋购物网站，html5+css3+js，实现基本的添加购物车，自动计算金额等功能

本文链接：https://blog.csdn.net/weixin_59334478/article/details/124548902

项目展示效果

实现添加购物鞋数量总金额自动变化

实现连接购物车功能

实现在购物车里收藏与删除

下面是购物页面代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购买精选</title>

	<style type="text/css">
body{width: 1350px;height: 100%;}

#div0{width: 100%;height: 2100px;}
#div1{width: 35%;height: 100px;float: left;}
#div2{width: 65%;height: 100px;float: left;}
#div2 ul{margin: 40px;}
#div2 ul li{float: left;list-style: none;width: 20%;font-size: 20px;color: #789;}
#div2 ul li a{text-decoration:none; color: gray;}
#div2 ul li:hover{color: black;}
#div3{width: 10%;height: 2000px;float: left;}
#div4{width: 80%;height: 400px;float: left;}
#div4 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div4 ul li:hover{transform: translate(0,10px);}
#div6{width: 80%;height: 400px;float: left;}
#div6 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div6 ul li:hover{transform: translate(0,10px);}
#div7{width: 80%;height: 400px;float: left;}
#div7 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div7 ul li:hover{transform: translate(0,10px);}
#div8{width: 80%;height: 400px;float: left;}
#div8 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div8 ul li:hover{transform: translate(0,10px);}
#div9{width: 80%;height: 400px;float: left;}
#div9 ul li{width: 20%;list-style: none;float: left;margin: 2%;}
#div9 ul li:hover{transform: translate(0,10px);}
#div10{position: fixed;top: 100px;right:10px;width: 50px;height: 400px;background: black;}
#div10 ul{padding: 10px;}
#div10 ul li{list-style: none;height: 100px;}
#div10 ul li img:hover{background: orange;}

    </style>

<script type="text/javascript">

    //减法
    function minus(index) {
        //获取当前数量的值
        var amounts=document.getElementsByName("amount");
 
        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value); //数量加1
 
        if (count<=1){
            alert("不能再减了，快没了！！");
        } else {
            //得到第一个amount的元素的value属性的值
            var count=parseInt(amounts[index].value)-1; //数量加1
 
            //重新把count的值绑定在数量文本框里
            amounts[index].value=count;
            var prices=document.getElementsByName("price");
            var price=parseFloat(prices[index].value);
            //乘以Math.pow(10,2)的原因为避免失真
            var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
            document.getElementById("price"+index).innerHTML="¥："+totalMoney;
        }
 
        total();
 
    }
 
    //加法
    function plus(index) {
 
        //获取当前数量的值
        var amounts=document.getElementsByName("amount");
 
        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value)+1; //数量加1
 
        //重新把count的值绑定在数量文本框里
        amounts[index].value=count;
 
        //当前操作端口的价格也要重新计算
        //得到当前端口的单价
        var prices=document.getElementsByName("price");
        var price=parseFloat(prices[index].value);
        //乘以Math.pow(10,2)的原因为避免失真
        var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
        //把当前价格显示在文本中
        document.getElementById("price"+index).innerHTML="¥："+totalMoney;
 
        total();
    }
 
 
    //求总金额
 
    function total() {
 
        //得到所有的数量
        var counts=document.getElementsByName("amount");
 
        //得到所有的单价
        var prices=document.getElementsByName("price");
 
        var sumMoney=0;
 
        for (var i=0;i<counts.length;i++){
 
            //乘以Math.pow(10,2)的原因为避免失真
            sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }
 
        //把总金额显示再指定的元素中
        document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
 
    }
 
 
    //加入收藏
    function save() {
        if (confirm("确认要收藏吗？")){
            alert("收藏成功！");
        }
 
    }
    //删除
    function delete1() {
        if (confirm("确认要删除吗？")) {
            var del=document.getElementById("first");
            del.parentNode.removeChild(del);
            alert("删除成功！！");
        }
    }
</script>

</head>
<body>
<div id="div0"><a name="gouwu"></a>
<div id="div1"><img src="images/youxuan.png" width="200px"></div>
<div id="div2">
 <ul>
    <li><b><a href="../高贵宝/web-16.1.html#sy">首页</b></li>
    <li><b><a >购买精选</a></b></li>
    <li><b><a href="../高贵宝/web-16.2.html#shequ">社区精选</a></b></li>
    <li><b><a href="../赵江波/商家入驻.html"">商家入驻</a></b></li>
    <li><b><a href="../邓/建议.html#guanyu">关于我们</a></b></li>
 </ul>
</div>
<div id="div3"></div>
<div id="div4">
	<h2>Jordan</h2>
	<figure>
	<ul>
        <li><img src="images/xie4.jpg" width="150px"><figcaption>Nike/耐克AIR JORDAN 1 男女篮球鞋AJ1黑紫脚趾553558-125紫葡萄
</figcaption>
¥:<input type="text" name="price" value="1299" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price0">¥:1299</font><br>
<input type="button"  value="+" name="plus" onclick="plus(0)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(0)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
        <li><img src="images/xie3.jpg" width="150px"><figcaption>
Nike/耐克AIR JORDAN 1 MID女子篮球鞋AJ1玫瑰金555112-190中帮</figcaption>
¥:<input type="text" name="price" value="1549" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price1">¥:1549</font><br>
<input type="button"  value="+" name="plus" onclick="plus(1)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(1)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
        <li><img src="images/xie2.jpg" width="150px"><figcaption>Nike/耐克AIR JORDAN 1 男女AJ1薄荷绿3M篮球鞋CQ9828-131 郭艾伦
</figcaption>
¥:<input type="text" name="price" value="2799" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price2">¥:2799</font><br>
<input type="button"  value="+" name="plus" onclick="plus(2)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(2)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
        <li><img src="images/xie1.jpg" width="150px"><figcaption>Nike/耐克AIR JORDAN 1 MID女子篮球鞋AJ1糖果鸳鸯554725-083拼色
</figcaption>
¥:<input type="text" name="price" value="3200" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price3">¥:3200</font><br>
<input type="button"  value="+" name="plus" onclick="plus(3)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(3)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
	</ul>
 </figure>
</div>
<div id="div6">
<h2>Nike</h2>
<figure>
<ul>
<li><img src="images/xie5.jpg" width="150px"><figcaption>Nike耐克官方AIR FORCE 1 MID '男子运动鞋空军一号板鞋
传世风尚 </figcaption>
¥:<input type="text" name="price" value="721" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price4">¥:721</font><br>
<input type="button"  value="+" name="plus" onclick="plus(4)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(4)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie6.jpg" width="150px"><figcaption>Nike耐克官方NIKE ZOOM FLY 3 男子跑步鞋马拉松缓震回弹 AT8240</figcaption>

¥:<input type="text" name="price" value="789" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price5">¥:789</font><br>
<input type="button"  value="+" name="plus" onclick="plus(5)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(5)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie7.jpg" width="150px"><figcaption>Nike耐克官方AIR MAX 270 REACT女子运动鞋休闲鞋气垫鞋DC3276</figcaption>
¥:<input type="text" name="price" value="1039" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price6">¥:1039</font><br>
<input type="button"  value="+" name="plus" onclick="plus(6)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(6)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie8.jpg" width="150px"><figcaption>Nike耐克官方FREE RN 5.0 2020 女子跑步鞋运动鞋慢跑鞋CJ0270</figcaption>
¥:<input type="text" name="price" value="379" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price7">¥:379</font><br>
<input type="button"  value="+" name="plus" onclick="plus(7)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(7)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div>
<div id="div7">
    <h2>LI-NING</h2>
<figure>
<ul>
<li><img src="images/xie9.jpg" width="150px"><figcaption>李宁羽毛球鞋男鞋情侣鞋男士鞋子专业防滑低帮运动鞋</figcaption>
¥:<input type="text" name="price" value="288" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price8">¥:288</font><br>
<input type="button"  value="+" name="plus" onclick="plus(8)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(8)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie10.jpg" width="150px"><figcaption>李宁旗舰官网男鞋2020新款全能王鞋子低帮运动鞋</figcaption>
¥:<input type="text" name="price" value="208" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price9">¥:208</font><br>
<input type="button"  value="+" name="plus" onclick="plus(9)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(9)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie11.jpg" width="150px"><figcaption>李宁羽毛球鞋女鞋耐磨防滑女士鞋子低帮运动鞋</figcaption>
¥:<input type="text" name="price" value="228" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price10">¥:228</font><br>
<input type="button"  value="+" name="plus" onclick="plus(10)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(10)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie12.jpg" width="150px"><figcaption>李宁羽毛球鞋男鞋专业防滑鞋子男士低帮运动羽毛球鞋</figcaption>
¥:<input type="text" name="price" value="238" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price11">¥:238</font><br>
<input type="button"  value="+" name="plus" onclick="plus(11)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(11)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div>
<div id="div8">
<h2>PUMA</h2>
<figure>
<ul>
<li><img src="images/xie13.jpg" width="150px"><figcaption>PUMA彪马官方新款女子经典休闲鞋 SMASH </figcaption>
¥:<input type="text" name="price" value="269" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price12">¥:269</font><br>
<input type="button"  value="+" name="plus" onclick="plus(12)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(12)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie14.jpg" width="150px"><figcaption>PUMA彪马官方 男女同款情侣SEGA联名款休闲鞋 </figcaption>
¥:<input type="text" name="price" value="429" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price13">¥:429</font><br>
<input type="button"  value="+" name="plus" onclick="plus(13)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(13)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie15.jpg" width="150px"><figcaption>PUMA彪马官方正品 刘雯同款新款女子复古休闲鞋 </figcaption>
¥:<input type="text" name="price" value="809" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price14">¥:809</font><br>
<input type="button"  value="+" name="plus" onclick="plus(14)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(14)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie16.jpg" width="150px"><figcaption>PUMA彪马官方正品 男女同款复古经典德训鞋休闲鞋 </figcaption>
¥:<input type="text" name="price" value="197" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price15">¥:197</font><br>
<input type="button"  value="+" name="plus" onclick="plus(15)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(15)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div>

<div id="div9">
<h2>VANS</h2>
<figure>
<ul>
<li><img src="images/xie17.jpg" width="150px"><figcaption>【燃冬季】Vans范斯官方黑白棋盘格宽条纹男鞋女鞋低帮板鞋运动鞋</figcaption>
¥:<input type="text" name="price" value="463" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price16">¥:463</font><br>
<input type="button"  value="+" name="plus" onclick="plus(16)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(16)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie18.jpg"  width="150px"><figcaption>【燃冬季】Vans范斯官方 黑色男鞋女鞋低帮职业滑板鞋
</figcaption>
¥:<input type="text" name="price" value="660" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price17">¥:660</font><br>
<input type="button"  value="+" name="plus" onclick="plus(17)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(17)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie19.jpg"  width="150px"><figcaption>【燃冬季】Vans范斯官方灰色Vans解构小香风男女SK8-Hi高帮板鞋</figcaption>
¥:<input type="text" name="price" value="465" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price18">¥:465</font><br>
<input type="button"  value="+" name="plus" onclick="plus(18)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(18)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
<li><img src="images/xie20.jpg"  width="150px"><figcaption>【燃冬季】Vans范斯官方 灰色侧边条纹男女Old Skool低帮板鞋</figcaption>
¥:<input type="text" name="price" value="423" style="width: 60px;">
&nbsp;&nbsp;&nbsp;&nbsp;
<font id="price19">¥:423</font><br>
<input type="button"  value="+" name="plus" onclick="plus(19)">
<input type="text" style="width: 20px;" name="amount" value="1">
<input type="button"  value="-" name="minus" onclick="minus(19)"><br>
<font onclick="save()">移入收藏</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font onclick="delete1()">删除</font>
</li>
</ul>
</figure>
</div>
<div id="div10">
<ul>
<li><a href="../邓/dengru.html#dr"><img src="images/yonghu.png" width="30px"></a></li>
<li><a href="购物车.html#gouwuche"><img src="images/gouwu.png" width="30px" ></a></li>
<li><a href="../邓/建议.html#guanyu"><img src="images/lianxi.png" width="30px"></a></li>
<li><a href="../邓/建议.html#guanyu"><img src="images/shezhi.png" width="30px"></a></li>
</ul>
</div>


</div>	
</body>
</html>

下面是购物车页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <style type="text/css">
    	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;}
 
    </style>
</head>
 
<!--onload，在加载时计算好原始金额-->
<body onload="total()">
 
<div class="content">
    <div class="logo">
        <span ><a href="购买精选.html#gouwu" style="color: white;text-decoration: none;">关闭</a></span>
    </div>
    <div class="cartList">
        <ul>
            <a name="gouwuche"><li>商品信息</li></a>
            <li>商品图片</li>
            <li>单价（元）</li>
            <li>数量</li>
            <li>金额（元）</li>
            <li>操作</li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center" id="first">
            <li>Nike/耐克AIR JORDAN 1 男女AJ1薄荷绿</li>
            <li><img src="images/xie2.jpg" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="2799"></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">¥2799</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
            <li>Nike耐克官方AIR MAX 270 REACT女子运动鞋</li>
            <li><img src="images/xie7.jpg" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="1039"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="2"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
            <li id="price1">¥1039</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>
<ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
            <li>李宁羽毛球鞋女鞋防滑女士鞋子低帮运动鞋</li>
            <li><img src="images/xie11.jpg" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="228"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(2)"><input type="text" name="amount" value="3"><input type="button" name="plus" value="+" onclick="plus(2)"></li>
            <li id="price2">¥228</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>

        <ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
            <li>PUMA彪马官方正品 刘雯同款新款女子复古休闲鞋</li>
            <li><img src="images/xie15.jpg" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="809"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(3)"><input type="text" name="amount" value="4"><input type="button" name="plus" value="+" onclick="plus(3)"></li>
            <li id="price3">¥809</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>

           <ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
            <li>【燃冬季】Vans范斯官方灰色Vans解构小香风男女</li>
            <li><img src="images/xie19.jpg" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="465"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(4)"><input type="text" name="amount" value="5"><input type="button" name="plus" value="+" onclick="plus(4)"></li>
            <li id="price4">¥465</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>

        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>结算</span></li>
        </ol>
    </div>
</div>
</body>
</html>
 
<script>
    //减法
    function minus(index) {
        //获取当前数量的值
        var amounts=document.getElementsByName("amount");
 
        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value); //数量加1
 
        if (count<=1){
            alert("不能再减了，快没了！！");
        } else {
            //得到第一个amount的元素的value属性的值
            var count=parseInt(amounts[index].value)-1; //数量加1
 
            //重新把count的值绑定在数量文本框里
            amounts[index].value=count;
            var prices=document.getElementsByName("price");
            var price=parseFloat(prices[index].value);
            //乘以Math.pow(10,2)的原因为避免失真
            var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
            document.getElementById("price"+index).innerHTML="¥："+totalMoney;
        }
 
        total();
 
    }
 
    //加法
    function plus(index) {
 
        //获取当前数量的值
        var amounts=document.getElementsByName("amount");
 
        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value)+1; //数量加1
 
        //重新把count的值绑定在数量文本框里
        amounts[index].value=count;
 
        //当前操作端口的价格也要重新计算
        //得到当前端口的单价
        var prices=document.getElementsByName("price");
        var price=parseFloat(prices[index].value);
        //乘以Math.pow(10,2)的原因为避免失真
        var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
        //把当前价格显示在文本中
        document.getElementById("price"+index).innerHTML="¥："+totalMoney;
 
        total();
    }
 
 
    //求总金额
 
    function total() {
 
        //得到所有的数量
        var counts=document.getElementsByName("amount");
 
        //得到所有的单价
        var prices=document.getElementsByName("price");
 
        var sumMoney=0;
 
        for (var i=0;i<counts.length;i++){
 
            //乘以Math.pow(10,2)的原因为避免失真
            sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }
 
        //把总金额显示再指定的元素中
        document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
 
    }
 
 
    //加入收藏
    function save() {
        if (confirm("确认要收藏吗？")){
            alert("收藏成功！");
        }
 
    }
    //删除
    function delete1() {
        if (confirm("确认要删除吗？")) {
            var del=document.getElementById("first");
            del.parentNode.removeChild(del);
            alert("删除成功！！");
        }
    }
</script>