用html写一个科学计算器
时间: 2023-09-27 07:05:40 浏览: 46
当然可以!以下是一个简单的科学计算器的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>科学计算器</title>
<style>
.calculator {
width: 300px;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator input[type="text"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
.calculator input[type="button"] {
width: 45px;
height: 30px;
margin-right: 5px;
}
.calculator input[type="button"]:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<input type="button" value="1" onclick="appendNumber(1)">
<input type="button" value="2" onclick="appendNumber(2)">
<input type="button" value="3" onclick="appendNumber(3)">
<input type="button" value="+" onclick="appendOperator('+')"><br>
<input type="button" value="4" onclick="appendNumber(4)">
<input type="button" value="5" onclick="appendNumber(5)">
<input type="button" value="6" onclick="appendNumber(6)">
<input type="button" value="-" onclick="appendOperator('-')"><br>
<input type="button" value="7" onclick="appendNumber(7)">
<input type="button" value="8" onclick="appendNumber(8)">
<input type="button" value="9" onclick="appendNumber(9)">
<input type="button" value="*" onclick="appendOperator('*')"><br>
<input type="button" value="0" onclick="appendNumber(0)">
<input type="button" value="." onclick="appendDecimal()">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="appendOperator('/')">
</div>
<script>
function appendNumber(num) {
document.getElementById('result').value += num;
}
function appendOperator(operator) {
document.getElementById('result').value += operator;
}
function appendDecimal() {
var currentValue = document.getElementById('result').value;
if (currentValue.indexOf('.') === -1) {
document.getElementById('result').value += '.';
}
}
function calculate() {
var expression = document.getElementById('result').value;
var result = eval(expression);
document.getElementById('result').value = result;
}
</script>
</body>
</html>
```
将上述代码保存为一个 HTML 文件,然后在浏览器中打开该文件,你就可以看到一个简单的科学计算器界面了。你可以点击按钮输入数字和运算符,并且点击等号进行计算,结果会显示在输入框中。请注意,这只是一个简单的示例,功能有限。如果你需要更复杂的科学计算器,可能需要使用 JavaScript 或其他前端框架来实现更多功能。