0
点赞
收藏
分享

微信扫一扫

【汇智学堂】-JS的应用(电商购物车-合计价格的计算)


【汇智学堂】-JS的应用(电商购物车-合计价格的计算)_电商中商品价格合计


JS文件

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

function a(cid) {

     var jia="num-jia"+cid;
     num_jia = document.getElementById(jia);
     num_jian = document.getElementById("num-jian"+cid);
     input_num = document.getElementById("input-num"+cid);
     total=document.getElementById("total"+cid);
     each=document.getElementById("each"+cid);
}

/*数量加法*/

function b(cid) {

   a(cid);

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

/*数量减法*/

function c(cid){

    /*alert(cid);*/
    a(cid);

    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);
    }
}
//显示默认总价格

window.onload=function (){

    for(i=0;i<30;i++){
        total=document.getElementById("total"+i);
        input_num = document.getElementById("input-num"+i);
        each=document.getElementById("each"+i);

        if(total!=null){
            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" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>购物车界面</title>
    <link rel="stylesheet" href="CSS/goodsBuy.css" />
    <script src="http://localhost:8080/JS/GoodsBuy.js"></script>

</head>
<body>

<span>当前用户是:${sessionname}</span>

<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>

        <tr>

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

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

            <td>
                数量
            </td>

            <td>
                单价
            </td>

            <td>
                小计
            </td>

            <td>
                操作
            </td>

        </tr>

        </thead>

        <tbody>

<c:forEach items="${Carts}" var="cart" varStatus="status">

        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>
                ${cart.goodspublisher}
            </td>
        </tr>

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

            <td>
                <%--<img src="/images/31.jpg">--%>
                <img src=${cart.imageurl}>
            </td>

            <td>
                ${cart.goodsname}
            </td>

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

            <td>
                <span id="each${status.count}">${cart.unitprice}</span>
            </td>

            <td>
                <span id="total${status.count}">0</span>
            </td>

            <td>
                <a href="/GoodsBuydel.do?del=${cart.id}">删除</a>

            </td>

        </tr>

   </c:forEach>

        </tbody>

    </table>

    <hr>

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

</div>

</body>
</html>

Controller中的方法

@RequestMapping("/GoodsBuy.do")
    public String GoodsBuy(Carts carts, Model model, HttpServletRequest request){

      /* String uid=request.getParameter("userid");
       String pid=request.getParameter("pid");*/

       /*插入到购物车表中*/      

       cartsService.addCarts(carts);

        /*查询当前用户的购物车*/

        int a=carts.getUserid();

         List<Carts> carts1= cartsService.selectCartByUserid(a);

         List<SelectCarts> list=new ArrayList<SelectCarts>();

        for (int i = 0; i < carts1.size(); i++){

            Carts c=(Carts)carts1.get(i);
             int b=  c.getPid();

           SelectCarts selectCarts=selectCartService.selectCarts(b);
           list.add(selectCarts);
        }

        model.addAttribute("Carts",list);
        return "GoodsBuy";
    }

其他方法略。


举报

相关推荐

0 条评论