用hbuilder写一个Java简易计算器
时间: 2023-08-29 22:08:19 浏览: 204
用Java编写的简单计算器
4星 · 用户满意度95%
HBuilder是一个HTML开发工具,一般用于Web前端开发。虽然可以使用HBuilder写Java程序,但是不如使用Java开发工具方便和高效。因此,以下提供的是使用HTML、CSS和JavaScript实现的简易计算器示例。
在HBuilder中新建一个HTML文件,将以下代码复制到文件中:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 30px auto;
border: 1px solid #999;
border-radius: 5px;
padding: 20px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
width: 50px;
height: 50px;
font-size: 20px;
border-radius: 50%;
border: none;
background-color: #ccc;
margin-right: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: #999;
color: #fff;
cursor: pointer;
}
.result {
font-size: 24px;
font-weight: bold;
text-align: right;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="num1">
<input type="text" id="num2">
<div>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
</div>
<div class="result" id="result">0</div>
</div>
<script>
function calculate(operator) {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = 0;
switch (operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
if (num2 == 0) {
alert("除数不能为0!");
return;
}
result = num1 / num2;
break;
default:
alert("不支持的运算符!");
return;
}
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>
```
该示例中使用了HTML和CSS实现了一个简单的界面,使用JavaScript实现了计算功能。用户输入两个数字和运算符后,点击相应的按钮即可进行计算,并将结果显示在页面上。
需要注意的是,该示例中使用了`parseFloat`函数将用户输入的字符串转换为浮点数,在进行除法运算时需要判断除数是否为0,避免出现异常。
阅读全文