技术支持：JAVA、JSP
服务器：TOMCAT 7.0.86
编程软件：IntelliJ IDEA 2021.1.3 x64
前文几个功能的实现的博客
基于JSP、java、Tomcat、mysql三层交互的项目实战--校园交易网（1）-项目搭建（前期准备工作）-CSDN博客
基于JSP、java、Tomcat、mysql三层交互的项目实战--校园交易网（2）登录，注册功能实现_tomcat jsp mysql-CSDN博客
基于JSP、java、Tomcat三者的项目实战--校园交易网（2）登录，注册功能实现-CSDN博客
基于JSP、java、Tomcat三者的项目实战--校园交易网（3）主页-CSDN博客
基于JSP、java、Tomcat三者的项目实战--校园交易网（3）主页-CSDN博客
基于JSP、java、Tomcat三者的项目实战--校园交易网（3）主页-CSDN博客
在上一篇博客中，我们讲完了添加功能
但我们还没解释我们的①②③，时间与用户名显示，加入购物车以及修改功能
功能①与③，我们在JSP文件中利用JavaScript代码就已经实现
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="entiy.Product" %>
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8"/>
<style type="text/css">
body {
background-color: #f0f0f0; /* 设置整个页面的背景颜色 */
background-image: url('img/f2.png'); /* 设置背景图片 */
background-size: cover; /* 图片铺满整个页面 */
background-repeat: no-repeat; /* 不重复显示背景图片 */
background-attachment: fixed; /* 固定背景图片，不随页面滚动 */
font-family: Arial, sans-serif; /* 设置页面字体 */
margin: 0; /* 去除页面默认的边距 */
padding: 0; /* 去除页面默认的内边距 */
}
h1 {
text-align: center;
margin-top: 20px;
color: #555;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.user-info {
text-align: right;
margin-top: 10px;
margin-right: 10px;
}
table {
width: 100%;
border: 1px solid #ddd;
border-collapse: collapse;
background-color: #fff;
margin-top: 20px;
}
table th, table td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
td img {
max-width: 50px;
display: block;
margin: 0 auto;
}
.button {
padding: 12px 24px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #0056b3;
}
.checkout {
text-align: center;
margin-top: 20px;
}
input[type="submit"] {
padding: 14px 28px;
font-size: 18px;
background-color: #28a745;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>交易平台</h1>
<!-- 用户信息 -->
<div style="text-align: right; margin-top: 10px; margin-right: 10px;">
<form action="Shopping" method="post">
<input type="hidden" name="action" value="getUsername">
<%
String username = (String) session.getAttribute("username");
if (username == null) {
username = "游客";
}
%>
<span>您好，<%= session.getAttribute("username") %></span>
<span> | 现在时间： <%
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
%>
<%=sdf.format(date )%>
</span>
</form>
</div>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>操作</th>
</tr>
<%
List<Product> products = (List<Product>) request.getAttribute("goods");
if (products == null) {
System.out.println("Products list is null!");
// 可以根据实际情况做进一步处理，如返回到上一页或者显示错误信息。
} else {
for (int i=0; i<products.size(); i++) {
Product e = products.get(i);
%>
<tr>
<td><%=e.getName()%></td>
<td><%=e.getPrice()%></td>
<td>
<a href="load?id=<%=e.getId()%>">修改</a>
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);">
</td>
</tr>
<%
}
}
%>
</table>
<p>
<input type="button" class="button" value="添加商品" onclick="location='AddShopping.jsp'"/>
</p>
<h1>购物车</h1>
<form action="total" method="post">
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td><input type="text" name="total" id="total" value="" /> </td>
<td></td>
</tr>
</tfoot>
</table>
<!-- 去支付按钮 -->
<div style="text-align: center; margin-top: 20px;">
<input type="submit" value="去支付" onclick="f1();" />
</div>
</form>
<p>
<input type="button"value="历史清单" onclick="location='LSQD'"/>
</p>
<script type="text/javascript">
function f1(){
alert("支付成功！");
}
function del(btn){
//获取当前点击的删除按钮所在的tr
var tr = btn.parentNode.parentNode;
tr.parentNode.removeChild(tr);
var tds = tr.getElementsByTagName("td");
total();
}
function add(btn){
var td = btn.parentNode;
var inputs = td.getElementsByTagName("input");
var text = inputs[1];
var amount = parseInt(text.value)+1;
text.value = amount;
var tr = btn.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var pr = parseFloat(tds[1].innerText);
mny1 = pr*amount;
//alert(mny1)
tds[3].innerText = mny1;
total();
}
function minu(btn){
var td = btn.parentNode;
var tr = td.parentNode;
var inputs = td.getElementsByTagName("input");
var text = inputs[1];
if (text.value>1){
var amount = parseInt(text.value)-1;
text.value = amount;
var tds = tr.getElementsByTagName("td");
var pr = parseInt(tds[1].innerText);
mny2 = pr*amount;
tds[3].innerText = mny2;
}else{
tr.parentNode.removeChild(tr);
}
total();
}
function total(){
//1.获取购物车中所有的商品行
var tbody = document.getElementById("goods");
var trs = tbody.getElementsByTagName("tr");
//2.遍历这些行,获取每一行的金额
var sum = 0;
for(var i=0;i<trs.length;i++){
var tr = trs[i];
//取当前行的金额
var tds = tr.getElementsByTagName("td");
var mny = parseFloat(tds[3].innerText);
sum = sum+mny;
}
document.getElementById("total").value=sum;
}
function add_shoppingcart(btn){
var tbody = document.getElementById("goods");
var tr = btn.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var trs = tbody.getElementsByTagName("tr")
var name = tds[0].innerText;
var price = tds[1].innerText;
for (var i=0;i<trs.length;i++) {
var tr1 = trs[i];
var tds1 = tr1.getElementsByTagName("td");
var name1 = tds1[0].innerText;
}
if(name==name1) {
var TD = tds1[2];
var inputs = TD.getElementsByTagName("input");
var text = inputs[1];
var amount = parseInt(text.value) + 1;
mny1 = pr * amount;
tds1[3].innerText = mny1;
total();
}
else {
var ntr = tbody.insertRow();
ntr.innerHTML =
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="minu(this);"/>'+
'<input type="text" size="3" readonly value="1"/>'+
'<input type="button" value="+" onclick="add(this);"/>'+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="del(this);"/></td></tr>';
total();}
}
</script>
</body>
</html>①功能代码块
<!-- 用户信息 -->
<div style="text-align: right; margin-top: 10px; margin-right: 10px;">
<form action="Shopping" method="post">
<input type="hidden" name="action" value="getUsername">
<%
String username = (String) session.getAttribute("username");
if (username == null) {
username = "游客";
}
%>
<span>您好，<%= session.getAttribute("username") %></span>
<span> | 现在时间： <%
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
%>
<%=sdf.format(date )%>
</span>
</form>
</div>作用：主要用于显示当前用户的信息和系统时间。
-
表单部分:
<form>标签定义了一个表单，其中action="Shopping"指定了表单提交的目标页面为Shopping，使用post方法提交数据。<input type="hidden" name="action" value="getUsername">定义了一个隐藏的表单字段，用于指定提交的动作是获取用户名。
-
Java 代码块 (
<% %>内部的部分):String username = (String) session.getAttribute("username");: 从会话 (session) 中获取名为 "username" 的属性，这里假设用户登录后会将用户名存储在会话中。if (username == null) { username = "游客"; }: 如果没有从会话中获取到用户名，则将username设置为默认值 "游客"。<%= session.getAttribute("username") %>: 在页面中直接输出从会话中获取到的用户名。这里使用了<%= %>标签，用于将 Java 代码的结果输出到 HTML 页面中。
-
时间显示部分:
Date date = new Date();: 创建一个当前时间的Date对象。SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");: 创建一个指定格式的日期格式化对象，这里格式为 "yyyy-MM-dd"。<%= sdf.format(date) %>: 使用SimpleDateFormat格式化当前时间，并将格式化后的时间直接输出到页面上。
-
页面显示效果:
- 页面右上角显示 "您好，用户名" 或 "您好，游客"，取决于用户是否登录。
- 页面右上角还显示当前的系统日期，格式为 "yyyy-MM-dd"。
逻辑思路和功能:
- 当用户访问页面时，JSP 文件会执行这段代码块。
- 首先尝试从会话中获取用户名，如果存在则显示该用户名，如果不存在则显示默认值 "游客"。
- 同时获取当前系统时间，并按照指定的格式显示在页面上。
- 用户可以在这个页面上进行其他操作，并且可以通过表单提交获取更多的用户信息或执行其他动作，如购物操作等，这里的具体动作可以根据实际情况在后台处理。
③-添加购物车功能
<script type="text/javascript">
function f1(){
alert("支付成功！");
}
function del(btn){
//获取当前点击的删除按钮所在的tr
var tr = btn.parentNode.parentNode;
tr.parentNode.removeChild(tr);
var tds = tr.getElementsByTagName("td");
total();
}
function add(btn){
var td = btn.parentNode;
var inputs = td.getElementsByTagName("input");
var text = inputs[1];
var amount = parseInt(text.value)+1;
text.value = amount;
var tr = btn.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var pr = parseFloat(tds[1].innerText);
mny1 = pr*amount;
//alert(mny1)
tds[3].innerText = mny1;
total();
}
function minu(btn){
var td = btn.parentNode;
var tr = td.parentNode;
var inputs = td.getElementsByTagName("input");
var text = inputs[1];
if (text.value>1){
var amount = parseInt(text.value)-1;
text.value = amount;
var tds = tr.getElementsByTagName("td");
var pr = parseInt(tds[1].innerText);
mny2 = pr*amount;
tds[3].innerText = mny2;
}else{
tr.parentNode.removeChild(tr);
}
total();
}
function total(){
//1.获取购物车中所有的商品行
var tbody = document.getElementById("goods");
var trs = tbody.getElementsByTagName("tr");
//2.遍历这些行,获取每一行的金额
var sum = 0;
for(var i=0;i<trs.length;i++){
var tr = trs[i];
//取当前行的金额
var tds = tr.getElementsByTagName("td");
var mny = parseFloat(tds[3].innerText);
sum = sum+mny;
}
document.getElementById("total").value=sum;
}
function add_shoppingcart(btn){
var tbody = document.getElementById("goods");
var tr = btn.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var trs = tbody.getElementsByTagName("tr")
var name = tds[0].innerText;
var price = tds[1].innerText;
for (var i=0;i<trs.length;i++) {
var tr1 = trs[i];
var tds1 = tr1.getElementsByTagName("td");
var name1 = tds1[0].innerText;
}
if(name==name1) {
var TD = tds1[2];
var inputs = TD.getElementsByTagName("input");
var text = inputs[1];
var amount = parseInt(text.value) + 1;
mny1 = pr * amount;
tds1[3].innerText = mny1;
total();
}
else {
var ntr = tbody.insertRow();
ntr.innerHTML =
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="minu(this);"/>'+
'<input type="text" size="3" readonly value="1"/>'+
'<input type="button" value="+" onclick="add(this);"/>'+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="del(this);"/></td></tr>';
total();}
}
</script>这段代码实现一个简单的购物车功能，包括添加商品、增加数量、减少数量、删除商品以及计算总金额等功能
-
f1() 函数:
- 当调用
f1()函数时，会弹出一个提示框显示 "支付成功！"。
- 当调用
-
del(btn) 函数:
- 当点击删除按钮 (
x按钮) 时调用，用于删除当前行的商品信息。 - 通过
btn参数获取当前点击按钮的父节点（即<td>元素），然后获取父节点的父节点（即<tr>元素）。 - 使用
tr.parentNode.removeChild(tr);来从 DOM 中移除当前行。 - 调用
total()函数重新计算总金额。
- 当点击删除按钮 (
-
add(btn) 函数:
- 当点击加号按钮 (
+按钮) 时调用，用于增加当前行商品的数量。 - 获取当前行中的数量输入框，将数量加一，更新显示的数量和对应的金额。
- 调用
total()函数重新计算总金额。
- 当点击加号按钮 (
-
minu(btn) 函数:
- 当点击减号按钮 (
-按钮) 时调用，用于减少当前行商品的数量。 - 如果数量大于 1，则减少数量并更新对应的金额，否则删除该行商品。
- 调用
total()函数重新计算总金额。
- 当点击减号按钮 (
-
total() 函数:
- 计算购物车中所有商品的总金额。
- 遍历购物车表格中的每一行 (
<tr>)，获取每行中金额 (<td>) 的值，并累加到sum变量中。 - 将计算得到的总金额显示在页面中指定的元素（可能是一个
<input>元素）中。
-
add_shoppingcart(btn) 函数:
- 当点击添加到购物车按钮时调用，用于将商品添加到购物车。
- 首先获取购物车表格 (
tbody) 和当前行 (tr) 中的商品信息。 - 检查购物车中是否已存在同名商品：
- 如果存在相同商品，则更新该商品的数量和金额。
- 否则，将新商品添加到购物车表格中，并调用
total()函数更新总金额。
分析:
- 页面中的各个函数通过传递
this参数来操作对应的 DOM 元素，例如add(this)、minu(this)等。 - 使用了 DOM 操作方法如
getElementById、getElementsByTagName、insertRow等来动态修改页面内容。 - 商品的名称、价格、数量等信息通过 HTML 结构和 JavaScript 变量进行管理和更新。
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
