用HTML、CSS、JavaScript写一个简单的计算器
时间: 2024-06-10 10:07:41 浏览: 11
好的,我可以为您演示一个简单的计算器,使用HTML、CSS和JavaScript编写。以下是代码:
HTML:
```
<div class="calculator">
<input type="text" id="input">
<div class="buttons">
<button onclick="addInput('7')">7</button>
<button onclick="addInput('8')">8</button>
<button onclick="addInput('9')">9</button>
<button onclick="addInput('/')">÷</button>
<button onclick="addInput('4')">4</button>
<button onclick="addInput('5')">5</button>
<button onclick="addInput('6')">6</button>
<button onclick="addInput('*')">x</button>
<button onclick="addInput('1')">1</button>
<button onclick="addInput('2')">2</button>
<button onclick="addInput('3')">3</button>
<button onclick="addInput('-')">-</button>
<button onclick="addInput('0')">0</button>
<button onclick="addInput('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="addInput('+')">+</button>
<button onclick="clearInput()">Clear</button>
</div>
</div>
```
CSS:
```
.calculator {
border: 1px solid black;
width: 200px;
padding: 10px;
text-align: center;
}
.buttons {
margin-top: 10px;
}
button {
width: 40px;
height: 40px;
font-size: 20px;
margin: 2px;
}
input#input {
width: 194px;
height: 30px;
font-size: 20px;
margin-bottom: 10px;
}
```
JavaScript:
```
function addInput(value) {
document.getElementById('input').value += value;
}
function clearInput() {
document.getElementById('input').value = '';
}
function calculate() {
let input = document.getElementById('input').value;
let result = eval(input);
document.getElementById('input').value = result;
}
```
使用这些代码,您可以在HTML页面上创建一个简单的计算器,用户可以输入算术表达式并计算结果。