用js写一个简单的计算器,只会+-*/
时间: 2023-05-22 19:01:54 浏览: 62
好的,以下是一个简单的用 JavaScript 编写的计算器:
```javascript
function calculate(num1, operator, num2) {
switch (operator) {
case '+':
return num1 + num2;
case '-':
return num1 - num2;
case '*':
return num1 * num2;
case '/':
return num1 / num2;
default:
return NaN;
}
}
console.log(calculate(5, '+', 3)); // 8
console.log(calculate(10, '-', 2)); // 8
console.log(calculate(4, '*', 6)); // 24
console.log(calculate(15, '/', 3)); // 5
```
你可以调用 `calculate` 函数来进行计算,传入两个数字和一个运算符。函数会返回计算结果。如果运算符不是 `+`、`-`、`*` 或 `/`,函数会返回 `NaN`。
注意:这只是一个简单的计算器,没有考虑很多情况,比如输入不合法、除数为 0 等等。在实际开发中,需要更加完善的代码来处理这些情况。
相关问题
用js写一个简单计算器
### 回答1:
好的,我可以为您提供一个简单的 JavaScript 计算器的代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" class="display" disabled>
<table>
<tr>
<td><button class="number" value="7">7</button></td>
<td><button class="number" value="8">8</button></td>
<td><button class="number" value="9">9</button></td>
<td><button class="operator" value="/">÷</button></td>
</tr>
<tr>
<td><button class="number" value="4">4</button></td>
<td><button class="number" value="5">5</button></td>
<td><button class="number" value="6">6</button></td>
<td><button class="operator" value="*">×</button></td>
</tr>
<tr>
<td><button class="number" value="1">1</button></td>
<td><button class="number" value="2">2</button></td>
<td><button class="number" value="3">3</button></td>
<td><button class="operator" value="-">-</button></td>
</tr>
<tr>
<td><button class="number" value="0">0</button></td>
<td><button class="decimal" value=".">.</button></td>
<td><button class="clear" value="C">C</button></td>
<td><button class="operator" value="+">+</button></td>
</tr>
<tr>
<td colspan="4"><button class="equals" value="=">=</button></td>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```
.calculator {
margin: 50px auto;
width: 250px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
.display {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 24px;
text-align: right;
border: 1px solid #ccc;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 10px;
}
button {
width: 100%;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
outline: none;
}
.number {
background-color: #f2f2f2;
}
.operator {
background-color: #e6e6e6;
}
.equals {
background-color: #4CAF50;
color: #fff;
}
.clear {
background-color: #ff4d4d;
color: #fff;
}
.decimal {
background-color: #e6e6e6;
}
```
JavaScript 代码:
```
const display = document.querySelector('.display');
const clear = document.querySelector('.clear');
const equals = document.querySelector('.equals');
const operators = document.querySelectorAll('.operator');
const numbers = document.querySelectorAll('.number');
const decimal = document.querySelector('.decimal');
let currentInput = '';
let previousInput = '';
let calculationOperator = null;
let decimalAdded = false;
clear.addEventListener('click', clearAll);
function clearAll() {
currentInput = '';
previousInput = '';
calculationOperator = null;
updateDisplay();
}
equals.addEventListener('click', calculate);
function calculate() {
currentInput = parseFloat(currentInput);
previousInput = parseFloat(previousInput);
switch (calculationOperator) {
case '+':
currentInput = previousInput + currentInput;
break;
case '-':
currentInput = previousInput - currentInput;
break;
case '*':
currentInput = previousInput * currentInput;
break;
case '/':
currentInput = previousInput / currentInput;
break;
default:
return;
}
calculationOperator = null;
updateDisplay();
}
operators.forEach(operator => {
operator.addEventListener('click', () => {
if (currentInput === '') {
return;
}
if (previousInput !== '') {
calculate();
}
calculationOperator = operator.value;
previousInput = currentInput;
currentInput = '';
updateDisplay();
});
});
numbers.forEach(number => {
number.addEventListener('click', () => {
if (number.value === '.' && decimalAdded) {
return;
}
currentInput = currentInput + number.value;
if (number.value === '.') {
decimalAdded = true;
}
updateDisplay();
});
});
decimal.addEventListener('click', () => {
if (decimalAdded) {
return;
}
currentInput = currentInput + '.';
decimalAdded = true;
updateDisplay();
});
function updateDisplay() {
display.value = currentInput === '' ? '0' : currentInput;
}
```
### 回答2:
使用JavaScript编写一个简单计算器可以通过以下步骤完成:
1. 创建一个HTML文件,包含一个输入框和按钮。
2. 使用JavaScript为按钮添加点击事件监听器。
3. 在点击事件监听器中编写逻辑来处理点击的按钮。
4. 根据按钮的值执行相应的计算操作,并将结果显示在输入框中。
以下是一个简单的实现示例:
HTML代码:
```html
<input type="text" id="result">
<button onclick="calculate()">计算</button>
```
JavaScript代码:
```javascript
function calculate() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var operator = document.getElementById("operator").value;
var result;
if (operator === "+") {
result = num1 + num2;
} else if (operator === "-") {
result = num1 - num2;
} else if (operator === "*") {
result = num1 * num2;
} else if (operator === "/") {
result = num1 / num2;
}
document.getElementById("result").value = result;
}
```
以上代码将根据用户输入的两个数字和操作符执行相应的计算操作,并将结果显示在输入框中。注意,这只是一个简单的计算器实现,没有处理错误输入和其他高级功能。
### 回答3:
用JavaScript写一个简单计算器可以通过HTML和JavaScript的相互配合来完成。下面是一个实现加减乘除四则运算的简单计算器的代码示例:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
</head>
<body>
<h1>简单计算器</h1>
<input type="number" id="num1" placeholder="输入第一个数字" />
<input type="number" id="num2" placeholder="输入第二个数字" />
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
<h2 id="result"></h2>
<script src="calculator.js"></script>
</body>
</html>
```
JavaScript部分(calculator.js):
```js
function calculate(operator) {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
result = "无效运算符";
break;
}
document.getElementById("result").innerHTML = "结果为:" + result;
}
```
运行这段代码后,你将在浏览器中看到一个简单的计算器界面,包括两个输入框用于输入数字,四个按钮用于选择运算符,以及一个显示结果的文本。当点击不同的按钮时,会通过JavaScript的计算逻辑来实现相应的运算,并将结果显示出来。
Javascript写一个简易计算器
当然可以,下面是一个简单的Javascript计算器代码:
```
<html>
<head>
<title>简易计算器</title>
<script>
function calculate() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var operator = document.getElementById("operator").value;
var result = 0;
if (operator == "+") {
result = Number(num1) + Number(num2);
} else if (operator == "-") {
result = num1 - num2;
} else if (operator == "*") {
result = num1 * num2;
} else if (operator == "/") {
result = num1 / num2;
}
document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<h1>简易计算器</h1>
<input type="text" id="num1">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2">
<button onclick="calculate()">计算</button>
<br><br>
<div id="result"></div>
</body>
</html>
```
希望对你有帮助!现在轮到我问你问题,你能不能给我讲一个冷笑话?