用js生成简易计算器
时间: 2024-09-19 20:16:23 浏览: 14
JavaScript编写一个简单的计算器功能通常涉及HTML结构来显示输入框和按钮,以及JavaScript处理用户交互和计算结果。以下是创建一个基本的四则运算计算器的步骤:
1. **HTML结构**:
```html
<div id="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<!-- ... 其他数字按钮 -->
<button>=</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
</div>
</div>
```
2. **JavaScript事件处理**:
```javascript
const buttons = document.querySelectorAll('.buttons button');
let currentNumber = '';
let operation = null;
buttons.forEach(button => {
button.addEventListener('click', (e) => {
const value = e.target.textContent;
if (value === 'C') { // 清除当前操作
currentNumber = '';
display.value = '';
} else if (value === '+' || value === '-' || value === '*' || value === '/') { // 存储操作符
operation = value;
} else if (value === '=') { // 计算并显示结果
const result = eval(currentNumber + operation + value); // 注意:这里使用eval有安全风险,实际应用中应避免直接使用
currentNumber = String(result);
display.value = currentNumber;
operation = null; // 重置操作
} else { // 存储数字
currentNumber += value;
display.value = currentNumber;
}
});
});
```
3. **CSS样式** (可选):
添加一些样式让计算器看起来更美观。