给我一个商品结算页面的jsp
时间: 2024-02-25 16:52:20 浏览: 25
以下是一个简单的商品结算页面的JSP代码,供参考:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品结算</title>
</head>
<body>
<h1>商品结算页面</h1>
<form action="checkout.jsp" method="post">
<table>
<tr>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>商品1</td>
<td>100</td>
<td><input type="number" name="quantity1" value="0" min="0"></td>
<td><span id="subtotal1">0</span></td>
</tr>
<tr>
<td>商品2</td>
<td>200</td>
<td><input type="number" name="quantity2" value="0" min="0"></td>
<td><span id="subtotal2">0</span></td>
</tr>
<tr>
<td colspan="3">总计</td>
<td><span id="total">0</span></td>
</tr>
<tr>
<td colspan="4"><button type="submit">提交订单</button></td>
</tr>
</table>
</form>
<script>
// 计算小计和总计
var quantity1 = document.getElementsByName("quantity1")[0];
var quantity2 = document.getElementsByName("quantity2")[0];
var subtotal1 = document.getElementById("subtotal1");
var subtotal2 = document.getElementById("subtotal2");
var total = document.getElementById("total");
quantity1.oninput = function() {
subtotal1.innerText = this.value * 100;
total.innerText = parseInt(subtotal1.innerText) + parseInt(subtotal2.innerText);
}
quantity2.oninput = function() {
subtotal2.innerText = this.value * 200;
total.innerText = parseInt(subtotal1.innerText) + parseInt(subtotal2.innerText);
}
</script>
</body>
</html>
```
该页面包含一个表单,用户可以在表单中填写商品数量,然后点击“提交订单”按钮进行结算。表格中列出了每个商品的名称、单价、数量和小计。使用JavaScript计算小计和总计。在提交订单后,将会跳转到checkout.jsp页面进行订单确认和支付等操作。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)