【汇智学堂】-JS的应用（电商购物车-数量加减小组件）-CFANZ编程社区

【汇智学堂】-JS的应用（电商购物车-数量加减小组件）_JS应用

JS文件

var num_jia;
var num_jian;
var input_num;
var total;
var each;

function a() {
     num_jia = document.getElementById("num-jia");
     num_jian = document.getElementById("num-jian");
     input_num = document.getElementById("input-num");
     total=document.getElementById("total");
     each=document.getElementById("each");
}

/*数量加法*/

function b() {

   a();

    input_num.value = parseInt(input_num.value) + 1;
    total.innerHTML=parseInt(input_num.value)*parseInt(each.innerHTML);
}

/*数量减法*/

function c(){

    a();

    if(input_num.value <= 0) {
        input_num.value = 0;
    } else {

        input_num.value = parseInt(input_num.value) - 1;

        total.innerHTML=parseInt(input_num.value)*parseInt(each.innerHTML);


    }
}

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: soft
  Date: 2019/9/5
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物车界面</title>
    <link rel="stylesheet" href="CSS/goodsBuy.css" />
    <script src="http://localhost:8080/JS/GoodsBuy.js"></script>

</head>
<body>

<div class="a">
    <h1 style="text-align: center">商品展示</h1>
    <hr>
</div>

<div class="mainNavigation">
    <ul>
        <li><a href="/selectGoods.do">商品展示</a></li>
        <li><a href="/selectGoodsView.do">商品详情</a></li>
        <li><a href="/selectGoodsViewSuccess.do">购物车</a></li>
        <li><a href="/selectGoods.do">订单确认</a></li>
        <li><a href="/selectGoods.do">结算</a></li>
    </ul>
</div>

<div>
    <table>
        <thead>

        </thead>

        <tbody>

        <tr>

            <td>
                <input type="checkbox" /> 全选
            </td>

            <td colspan="2">
                商品
            </td>

            <td>
                数量
            </td>

            <td>
                单价
            </td>

            <td>
                小计
            </td>

            <td>
                操作
            </td>



        </tr>

        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>
                清华大学书店
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox"/>
            </td>

            <td>
                <img src="/images/31.jpg">
            </td>

            <td>
                大数据一
            </td>

            <td>
                <ul class="btn-numbox">
                            <li><span id="num-jian" class="num-jian" onclick="c()">-</span></li>
                            <li><input type="text" class="input-num" id="input-num" value="1" /></li>
                            <li><span id="num-jia" class="num-jia" onclick="b()">+</span></li> 
                </ul>
            </td>

            <td>              
                <span id="each">100</span>
            </td>

            <td>
                <span id="total">100</span>                
            </td>

            <td>
                删除
            </td>

        </tr>
        </tbody>
    </table>

    <hr>

     <div>
         <span>你的商品共2两件</span><span>总价共：98元</span><span><input type="button" value="去结算"></span>
     </div>

</div>

</body>
</html>

CSS文件

table tr td img{
    width: 200px;
    height: 100px;
}

table tr td{
    padding-right: 20px;
    text-align: center;
}

ul{
    list-style: none;
}

ul li{
    float: left;
}

.mainNavigation{
    position:absolute;
    top:85px;
    left:300px;
    /*list-style: none;*/
}
.mainNavigation li{
    /*float:left;*/
   padding:30px;
}

table{
    margin-top: 150px;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    cursor: pointer;
    text-decoration: none;
}

a:link {
    text-decoration: none;
}


.num-jian,
.input-num,
.num-jia {
    display: inline-block;
    width: 58px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 18px;
    color:black;
    cursor: pointer;
    border: 1px solid #e6e6e6;
}