前台jsp cart.jsp

最新推荐文章于 2020-12-07 23:42:44 发布

chaoyv

最新推荐文章于 2020-12-07 23:42:44 发布

阅读量143

点赞数

分类专栏： item02 新蛋文章标签： javascript java xhtml ViewUI

本文链接：https://blog.csdn.net/chaoyv/article/details/84626251

版权

item02 新蛋专栏收录该内容

322 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%
	if(request.getAttribute("poList")==null || session.getAttribute("username")==null){
		response.sendRedirect("index");
	}
 %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="stylesheet" type="text/css" href="css/cart.css" />
<script type="text/javascript" src="js/cart.js"></script>
</head>

<body>

<div class="header">
	<div class="logo f_l">
    	<a href="###"><img src="images/shop/logo.jpg" width="331" height="76" /></a>
    </div>
    <div class="info f_r">
    	<p class="p1 f_r"><span class="f_l">亲爱的用户&nbsp;<i>${username}</i>&nbsp;&nbsp;<a  href="implant/logout.jsp">安全退出</a>&nbsp;&nbsp;</span><img src="images/shop/tel.jpg" width="210" height="22" class="f_l" /></p>
        <p class="p2 f_r">上海地区免运费，南京、杭州等11个城市99元免运费，其它城市399元免运费。<a href="###">查看详情</a></p>
    </div>
</div>

<div class="prompt">
	<div class="promptCon"></div>
</div>

<form action="order?statusId=${statusId}" method="post">
<div class="cart">
	<div class="settlement f_r">
    	<h3><i>购物车结算</i></h3>
        <p class="setMoney"><i class="f_r">¥${totaPrice }</i>商品金额：</p>
        <p><i class="f_r">¥${totaPrice+5.0 }</i>合计：</p>
        <input type="submit" value="立即结账" />
        <a href="###">继续购物&gt;&gt;</a>
    </div>
    <div class="order">
    	<h3><i>我的购物车</i></h3>
        <table  border=0 cellpadding=0 cellspacing=0 >
        	<tr class="title"><td style="width:60px;">&nbsp;<input id="allCheckBox" type="checkbox" />&nbsp;全选</td><td>&nbsp;&nbsp;&nbsp;&nbsp;商品名称</td><td style=" width:80px;" align="center">单价</td><td style="width:80px;" align="center">数量</td><td style="width:80px;" align="center">小计</td><td style="width:80px;" align="center">操作</td></tr>
            <c:forEach var="item" items="${poList }" varStatus="i">  
            <tr class="list">
            	<td align="center"><input name="cartCheckVal" type="checkbox" /></td>
                <td>
                	<span class="listImg f_l"><a href="goods?id=${item.products_id}" target="_blank"  title="${item.introduce }"><img src="images/share/${item.print }" width="80" height="60" /></a></span>
                    <span class="Text f_l"><a href="goods?id=${item.products_id}" target="_blank"  title="${item.introduce }">${fn:substring(item.introduce,0,70)}</a></span>
                </td>
                <td class="money" align="center">¥${item.price }</td>
                <td class="addOrsub"><span><input type="text" class="inputText" value="${item.number}" readonly="readonly"/><p class="f_r"><input οnclick="window.location.href='cart?id=${item.products_id}&statusId=${item.status_id }&number=${item.number+1}'" type="button" class="add" /><input οnclick="window.location.href='cart?id=${item.products_id}&statusId=${item.status_id }&number=${item.number-1}'" type="button" class="sub" /></p></span></td>
                <td class="money" align="center">¥${item.price*item.number }</td>
                <td class="delete" align="center"><a  href="javascript:if(confirm('是否确认删除')){location.href='cart?id=${item.products_id}&statusId=${item.status_id }';}">删除</a></td>
           	</tr>
           	</c:forEach>
        </table>
    </div>
</div>
</form>

<div class="borderBj"></div>

<div class="share">
	<span>
    	<h3>
        	<i>疯抢商品</i>
        </h3>
    </span>
    <c:forEach var="item" items="${folieList }" varStatus="i">  
    <dl class="f_l">
    	<dt><a href="goods?id=${item.products_id}" target="_blank" title="${item.introduce} 分类：${item.classify} 品牌：${item.brand} 型号： ${item.model}"><img src="images/share/${item.picture }" width="144" height="108" /></a></dt>
        <dd>
        	<p><a href="goods?id=${item.products_id}" target="_blank" title="${item.introduce} 分类：${item.classify} 品牌：${item.brand} 型号： ${item.model}">${fn:substring(item.introduce,0,36)}</a></p>
            <span>${fn:substring(item.bewrite,0,13)}</span>
        	<i>￥${item.price }</i>
        	<input type="button" value="加入收藏夹" οnclick="javascript:saveSql(${item.products_id },1,1);"  />
        </dd>
    </dl>
   </c:forEach>
</div>

<div class="borderBj"></div>

<div class="footer">
	<p>新蛋集团网站：<a href="###">美国新蛋</a>&nbsp;&nbsp;<a href="###">中国新蛋</a>&nbsp;&nbsp;<a href="###">加拿大新蛋 </a>&nbsp;&nbsp;<a href="###">新蛋软件</a></p>
    <p>© 2001-2014 新蛋贸易（中国）有限公司 版权所有 沪ICP备:05006005</p>
</div>
</body>
</html>

/* CSS Document */

/*公共样式*/
*{ margin:0; padding:0; word-break:break-all;}
body{ font-family:"宋体"; color:#666; font-size:12px; background:#fff;}
a{ color:#666; text-decoration:none;}
a:hover{ color:#666; text-decoration:none;}
a img{ border:none;}
.f_l{ float:left;}
.f_r{ float:right;}
span{ display:block;}
i{ font-style:normal;}
em{ font-style:normal;}
ul li{ list-style-type:none;}
.c{ clear:both;}

/* CSS Document */

/*头部区*/
.header{ width:980px; height:116px; margin:0 auto;}
.header div{ margin-top:27px;}
.header .logo{ width:331px; height:76px;}
.header .info{ width:472px; height:76px;}
.header .info p{height:22px; line-height:22px;}
.header .info p span i{ color:#003399; font-weight:bold; font-family:"Arial";}
.header .info .p1{ ; padding-bottom:5px;}
.header .info .p1 a{ color:#484848; text-decoration:none;}
.header .info .p1 a:hover{ color:#003399; text-decoration:underline;}
.header .info .p2{ font-family:"微软雅黑";}
.header .info .p2 a{ color:#003399;}
.header .info .p2 a:hover{ color:#f60; text-decoration:underline;}

/*进度条*/
.prompt{ width:100%; height:66px; background:url(../images/shop/promptBj.jpg) repeat-x;}
.prompt .promptCon{ width:960px; height:66px; margin:0 auto; background:url(../images/shop/prompt.jpg) no-repeat;}

/*购物车*/
.cart{ width:958px; border:1px solid #bbbbbb; background:#ffffcc; margin:21px auto 0 auto;}

/*--购物车结果*/
.cart .settlement{ width:176px;}
.cart .settlement h3{ height:32px; line-height:32px; color:#484848; font-weight:bold; font-size:12px; border-bottom:1px solid #bbbbbb;}
.cart .settlement h3 i{ padding-left:8px;}
.cart .settlement p{ height:34px; line-height:34px; color:#484848; padding-left:16px;}
.cart .settlement .setMoney{ padding-top:10px;}
.cart .settlement p i{ font-family:"微软雅黑"; color:#f60; font-weight:bold; padding-right:16px;}
.cart .settlement input{ background:#f7661f; color:#fff; text-align:center; width:155px; height:48px; line-height:48px; border:none; border-radius:5px;  font-family:"微软雅黑";margin-right:47px; font-size:18px; display:block; margin:6px auto;}
.cart .settlement input:hover{ background:#ff971c;}
.cart .settlement a{ color:#003399; margin-left:80px;}
.cart .settlement a:hover{ color:#f60;}

/*边框阴影*/
.borderBj{ background:url(../images/shop/borderBj.jpg) repeat-x; height:4px; width:960px; margin:0 auto;}

/*--购物车列表*/
.cart .order{ border-right:1px solid #bbbbbb; width:781px; background:#FFF;}
.cart .order h3{ height:32px; line-height:32px; color:#484848; font-weight:bold; font-size:12px; border-bottom:1px solid #bbbbbb;}
.cart .order h3 i{ padding-left:8px;}
.cart .order table{ width:760px; margin:0 auto; padding-bottom:20px;}
.cart .order table .title td{ height:36px; color:#484848;}
.cart .order table .list td{ border-top:1px solid #d9d9d9; height:100px;}
.cart .order table .list td .listImg{ width:90px; height:100px;}
.cart .order table .list td .listImg img{ margin-top:20px; margin-left:5px;}
.cart .order table .list td .Text{ padding-top:30px; width:260px; font-family:"Arial";}
.cart .order table .list td .Text a{ color:#555; text-decoration:none;}
.cart .order table .list td .Text a:hover{ color:#003399; text-decoration:none;}
.cart .order table .list .money{ font-family:"微软雅黑";}
.cart .order table .list .delete a{ color:#003399;}
.cart .order table .list .delete a:hover{ color:#f60;}
.cart .order table .list .addOrsub{}
.cart .order table .list .addOrsub span{ width:56px; height:24px; margin-left:20px;}
.cart .order table .list .addOrsub span .inputText{ width:36px; height:22px; border:1px solid #bbb; text-align:center; color:#333;}
.cart .order table .list .addOrsub span p{ width:13px; height:24px;}
.cart .order table .list .addOrsub span .add{ width:13px; height:11px; background:
url(../images/shop/add.jpg) no-repeat; border:none;}
.cart .order table .list .addOrsub span .sub{ width:13px; height:11px; background:
url(../images/shop/sub.jpg) no-repeat; border:none; margin-top:2px;}

/*推荐区*/
.share{ width:958px; height:295px; margin:16px auto 0 auto; border:1px solid #bfbfbf;}
.share>span{ width:958px; height:34px; background:url(../images/shop/shareBj.jpg) repeat;}
.share>span h3{ width:120px; height:32px; line-height:32px; border-bottom:2px solid #ff6600;}
.share>span h3 i{ font-weight:bold; color:#f60; padding-left:30px;}
.share dl{ width:150px; height:220px; margin-top:20px; margin-left:35px;}
.share dl dt{ width:150px; height:110px;}
.share dl dt img{ margin-left:3px;}
.share dl dd{  font-family:"Arial";}
.share dl dd p{ line-height:18px;}
.share dl dd p a{ color:#666; text-decoration:none;}
.share dl dd p a:hover{ color:#003399; text-decoration:underline;}
.share dl dd span{ line-height:18px; color:#84984f;}
.share dl dd i{font-family:"微软雅黑"; color:#f60; font-size:14px; display:block; padding-top:6px; padding-bottom:6px;}
.share dl dd input{ width:80px; height:23px; display:block; margin:0 auto;}

/*底部备案信息*/
.footer{ width:960px; height:90px; margin:20px auto 0 auto;}
.footer p{ text-align:center;  font-family:"Arial"; line-height:23px;}
.footer p a{ color:#484848; text-decoration:none;}
.footer p a:hover{ text-decoration:underline;}

// JavaScript Document

//根据 id 获取元素
function $(id){  
    return document.getElementById(id);  
} 

window.onload = function(){
	$("allCheckBox").onclick = function(){
		allCheckBoxOnclick(this.checked);
	};
	calcSum();
};

//全选与非全选的效果
function allCheckBoxOnclick(val){
	var arr = document.getElementsByName("cartCheckVal");
	for(var i=0;i<arr.length;i++){
		arr[i].checked = val;
	}
}

function saveSql(id,statusId,number){
	var xmlHttp = new XMLHttpRequest();
	var url = "ajaxSave?id="+escape(id)+"&statusId="+escape(statusId)+"&number="+escape(number);
	xmlHttp.open("GET", url);//设置一个请求
	xmlHttp.onreadystatechange = function() {	//设置请求完成之后处理的回调函数  
		if (xmlHttp.readyState == 4) {//数据返回完毕  
			if (xmlHttp.status == 200) {//HTTP操作正常  
				var text = xmlHttp.responseText;//接收返回的内容  
				alert(text);
			}
		}
	};
	xmlHttp.send(null);//发送请求，不传递任何参数  	
};

效果图：

chaoyv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前台jsp cart.jsp

&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;&lt;%@ taglib uri="http://java
复制链接

扫一扫