如何用HTML5+JS实现在线计算器
时间: 2024-02-25 16:59:28 浏览: 16
您可以按照以下步骤来实现一个简单的在线计算器:
1. HTML:创建一个包含数字和操作符的按钮的表格,并在页面中添加一个文本框,用于显示计算结果。
```html
<table>
<tr>
<td><button onclick="addInput('7')">7</button></td>
<td><button onclick="addInput('8')">8</button></td>
<td><button onclick="addInput('9')">9</button></td>
<td><button onclick="addInput('/')">/</button></td>
</tr>
<tr>
<td><button onclick="addInput('4')">4</button></td>
<td><button onclick="addInput('5')">5</button></td>
<td><button onclick="addInput('6')">6</button></td>
<td><button onclick="addInput('*')">*</button></td>
</tr>
<tr>
<td><button onclick="addInput('1')">1</button></td>
<td><button onclick="addInput('2')">2</button></td>
<td><button onclick="addInput('3')">3</button></td>
<td><button onclick="addInput('-')">-</button></td>
</tr>
<tr>
<td><button onclick="addInput('0')">0</button></td>
<td><button onclick="addInput('.')">.</button></td>
<td><button onclick="calculate()">=</button></td>
<td><button onclick="addInput('+')">+</button></td>
</tr>
</table>
<input type="text" id="result" readonly>
```
2. JavaScript:创建一个用于处理算术运算的函数,并定义两个全局变量用于存储输入和结果。
```javascript
var input = '';
var result = '';
function addInput(value) {
input += value;
document.getElementById('result').value = input;
}
function calculate() {
result = eval(input);
input = '';
document.getElementById('result').value = result;
}
```
3. CSS:为按钮添加样式以使其更易于识别。
```css
button {
font-size: 16px;
padding: 10px;
margin: 5px;
width: 50px;
height: 50px;
border-radius: 5px;
background-color: #f5f5f5;
color: #333;
border: none;
outline: none;
cursor: pointer;
}
button:hover {
background-color: #333;
color: #fff;
}
```
现在您已经实现了一个基本的在线计算器!