使用Spring Boot搭建后端，通过CalculatorController处理加减乘除运算并返回JSON结果；2. 前端用HTML+JavaScript实现用户界面，通过fetch调用/calculate接口；3. 输入验证与错误提示完整，支持除零检测；4. 项目结构清晰，运行在8080端口，便于学习Java Web基础。
在Java中开发一个简单的在线计算器，可以通过结合后端处理逻辑和前端页面实现。这里使用Java的Spring Boot框架快速搭建Web服务，配合HTML+JavaScript完成一个基础的网页计算器。
1. 创建Spring Boot项目
使用Spring Initializr创建一个新项目，选择以下依赖：
项目结构示例：
src/
├── main/
│ ├── java/
│ │ └── com.example.calculator/
│ │ ├── CalculatorApplication.java
│ │ └── CalculatorController.java
│ └── resources/
│ └── static/
│ └── index.html
2. 编写后端计算接口
创建一个控制器来处理计算请求：
立即学习“Java免费学习笔记（深入）”；
@RestController
public class CalculatorController {
@GetMapping("/calculate")
public Map<String, Object> calculate(
@RequestParam double a,
@RequestParam double b,
@RequestParam String op) {
double result = 0;
boolean success = true;
String message = "OK";
switch (op) {
case "+": result = a + b; break;
case "-": result = a - b; break;
case "*": result = a * b; break;
case "/":
if (b == 0) {
success = false;
message = "除数不能为零";
} else {
result = a / b;
}
break;
default:
success = false;
message = "不支持的操作符";
}
Map<String, Object> response = new HashMap<>();
response.put("success", success);
response.put("result", result);
response.put("message", message);
return response;
}
}
3. 创建前端页面（HTML + JavaScript）
在 resources/static/index.html 中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>在线计算器</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
input, select, button { padding: 10px; margin: 5px; font-size: 16px; }
#result { font-size: 20px; color: green; margin-top: 20px; }
</style>
</head>
<body>
<h2>简单在线计算器</h2>
<input type="number" id="num1" placeholder="输入第一个数">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2" placeholder="输入第二个数">
<button onclick="compute()">计算</button>
<div id="result"></div>
<script>
function compute() {
const a = parseFloat(document.getElementById("num1").value);
const b = parseFloat(document.getElementById("num2").value);
const op = document.getElementById("operator").value;
const resultDiv = document.getElementById("result");
if (isNaN(a) || isNaN(b)) {
resultDiv.textContent = "请输入有效数字";
return;
}
fetch(`/calculate?a=${a}&b=${b}&op=${encodeURIComponent(op)}`)
.then(res => res.json())
.then(data => {
if (data.success) {
resultDiv.innerHTML = `结果：${data.result}`;
} else {
resultDiv.innerHTML = `错误：${data.message}`;
}
});
}
</script>
</body>
</html>
4. 启动并测试
运行主类启动应用，默认监听8080端口。访问 http://localhost:8080 即可看到计算器页面，输入数值后点击“计算”即可调用后端接口返回结果。
基本上就这些。这个例子展示了前后端分离的基本结构，适合学习Java Web开发入门。后续可以扩展表达式解析、历史记录、更复杂的UI等功能。
以上就是Java中如何开发简单的在线计算器的详细内容，更多请关注php中文网其它相关文章！
0
广告
885
收藏
