HTML+CSS+JS制作一个能实现括号、Π、百分率的计算器
时间: 2024-01-11 10:05:12 浏览: 26
你可以使用HTML、CSS和JavaScript来制作一个简单的计算器。下面是一个基本的示例:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="addToDisplay('(')">(</button>
<button onclick="addToDisplay(')')">)</button>
<button onclick="addToDisplay('Π')">Π</button>
<button onclick="addToDisplay('%')">%</button>
<button onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS部分(style.css):
```css
.calculator {
width: 200px;
margin: 0 auto;
}
#display {
width: 100%;
height: 30px;
margin-bottom: 10px;
}
.buttons button {
width: 50px;
height: 50px;
}
```
JavaScript部分(script.js):
```javascript
function addToDisplay(value) {
document.getElementById('display').value += value;
}
function calculate() {
let expression = document.getElementById('display').value;
let result = eval(expression);
document.getElementById('display').value = result;
}
```
这个计算器有一个文本框用于显示输入和结果。括号、Π和百分率的按钮被添加到按钮组中,并且通过调用JavaScript函数将它们添加到显示文本框中。等号按钮用于计算表达式,并将结果显示在文本框中。
请注意,这只是一个简单的示例,未进行输入验证和错误处理。在实际中,你可能需要添加更多的功能和验证以确保计算器的正确性和安全性。