数组与字符串分割实现计算器加减功能,用button输入,使用js,html,css
时间: 2024-04-01 12:32:19 浏览: 63
html+js实现简单的计算器代码(加减乘除)
5星 · 资源好评率100%
好的,这个问题我可以回答。首先,我们可以通过HTML和CSS创建一个简单的界面,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
font-size: 1.2em;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.row {
display: flex;
flex-wrap: wrap;
margin: 5px 0;
}
.row button {
flex: 1;
margin: 5px;
font-size: 1.2em;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #eee;
cursor: pointer;
}
.row button:hover {
background-color: #ccc;
}
.result {
margin-top: 20px;
padding: 10px;
text-align: right;
font-size: 2em;
background-color: #eee;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>计算器</h1>
<div class="container">
<div class="row">
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
</div>
<div class="row">
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
</div>
<div class="row">
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
</div>
<div class="row">
<button>0</button>
<button>.</button>
<button>/</button>
<button>=</button>
</div>
<div class="result"></div>
</div>
</body>
</html>
```
这里我们使用了一个容器 `container`,里面包含四个 `row`,每个 `row` 包含四个 `button` 和一个 `result`,用于显示计算结果。
接着,在 JavaScript 中,我们可以为每个 `button` 添加点击事件,并通过一个数组 `inputs` 来记录所有的输入,然后在点击 `=` 号时计算结果并显示在 `result` 中。代码如下:
```javascript
const buttons = document.querySelectorAll('button');
const result = document.querySelector('.result');
let inputs = [];
// 为每个 button 添加点击事件
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === '=') {
// 计算结果并显示在 result 中
result.textContent = calculate(inputs);
inputs = [];
} else {
// 将输入添加到数组中
inputs.push(value);
}
});
});
// 计算结果的函数
function calculate(inputs) {
let result = 0;
let operator = '+';
for (const input of inputs) {
if (['+', '-', '*', '/'].includes(input)) {
operator = input;
} else {
const number = parseFloat(input);
if (operator === '+') {
result += number;
} else if (operator === '-') {
result -= number;
} else if (operator === '*') {
result *= number;
} else {
result /= number;
}
}
}
return result;
}
```
这里的 `calculate` 函数通过遍历输入的数组,根据运算符和数字计算出结果。注意,我们使用 `parseFloat` 将字符串转换为数字,这是为了能够进行正确的计算。
阅读全文