编写计算器页面computer.html,如图3所示。编写并部署Servlet(ComputerServlet.java,实现加减乘除运算,并通过out对象输出结果
时间: 2024-03-14 16:45:21 浏览: 233
很遗憾,作为一个语言模型AI,我无法在此处为您提供完整的代码。不过,我可以为您提供以下步骤:
1. 首先,您需要创建一个名为"computer.html"的HTML页面,以展示计算器UI。可以参考如下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: #f2f2f2;
}
.container {
margin: 50px auto;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0px 0px 10px #ccc;
}
h1 {
text-align: center;
font-size: 24px;
margin-top: 0px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px #ccc;
font-size: 18px;
}
input[type="button"] {
width: 45%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: #fff;
font-size: 18px;
cursor: pointer;
margin-right: 5%;
}
input[type="button"]:hover {
background-color: #3e8e41;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<h1>计算器</h1>
<input type="text" id="num1" placeholder="输入第一个数字">
<input type="text" id="num2" placeholder="输入第二个数字">
<div class="clear"></div>
<input type="button" value="+" onclick="add()">
<input type="button" value="-" onclick="subtract()">
<input type="button" value="*" onclick="multiply()">
<input type="button" value="/" onclick="divide()">
<div class="clear"></div>
<input type="text" id="result" placeholder="结果" readonly>
</div>
<script type="text/javascript">
function add() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseFloat(num1) + parseFloat(num2);
document.getElementById("result").value = result;
}
function subtract() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseFloat(num1) - parseFloat(num2);
document.getElementById("result").value = result;
}
function multiply() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseFloat(num1) * parseFloat(num2);
document.getElementById("result").value = result;
}
function divide() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseFloat(num1) / parseFloat(num2);
document.getElementById("result").value = result;
}
</script>
</body>
</html>
```
2. 其次,您需要创建一个名为"ComputerServlet"的Java文件,以处理计算器的逻辑操作。可以参考如下代码:
```java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ComputerServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ComputerServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String num1 = request.getParameter("num1");
String num2 = request.getParameter("num2");
String operator = request.getParameter("operator");
double result = 0;
if (operator.equals("+")) {
result = Double.parseDouble(num1) + Double.parseDouble(num2);
} else if (operator.equals("-")) {
result = Double.parseDouble(num1) - Double.parseDouble(num2);
} else if (operator.equals("*")) {
result = Double.parseDouble(num1) * Double.parseDouble(num2);
} else if (operator.equals("/")) {
result = Double.parseDouble(num1) / Double.parseDouble(num2);
}
out.println("<html>");
out.println("<head><title>计算结果</title></head>");
out.println("<body>");
out.println("<h1>计算结果</h1>");
out.println("<p>" + num1 + " " + operator + " " + num2 + " = " + result + "</p>");
out.println("</body>");
out.println("</html>");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
```
3. 最后,您需要在web.xml文件中注册Servlet,以便在浏览器中访问。可以参考如下代码:
```xml
<web-app>
<servlet>
<servlet-name>ComputerServlet</servlet-name>
<servlet-class>com.example.ComputerServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ComputerServlet</servlet-name>
<url-pattern>/compute</url-pattern>
</servlet-mapping>
</web-app>
```
在部署完毕后,您可以在浏览器中访问"computer.html"页面,输入数字并选择计算符号,然后点击"="按钮即可得到计算结果。
阅读全文