用js写一个简单的计算器,只会+-*/
时间: 2023-05-22 19:01:54 浏览: 140
好的,以下是一个简单的用 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 等等。在实际开发中,需要更加完善的代码来处理这些情况。
相关问题
用HTML5+js写一个简易计算器
当然可以。HTML5 和 JavaScript 可以结合创建一个简单的计算器应用。以下是基本步骤:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
.calculator {
display: flex;
width: 200px;
}
input[type="number"] {
width: 100%;
}
button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="number" id="display" disabled>
<div id="buttons">
<!-- 这里会添加数字、运算符按钮 -->
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
```
2. **JavaScript (calculator.js)**:
```javascript
window.onload = function () {
const buttons = Array.from({ length: 10 }, (_, i) => `button ${i + 9}`); // 假设我们有0到9的数字键
buttons.push('clear', '+', '-', '*', '/'); // 还有一些运算符键
let currentNumber = '';
let operator = null;
buttons.forEach(button => {
document.getElementById('buttons').innerHTML += `<button onclick="handleClick(${button})">${button}</button>`;
});
function handleClick(numOrOp) {
if (!currentNumber) {
currentNumber = numOrOp;
return;
}
switch (numOrOp) {
case 'clear':
currentNumber = '';
break;
case '+', '-', '*', '/':
operator = numOrOp;
break;
default:
currentNumber += numOrOp;
}
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').value = currentNumber;
}
};
```
这个例子创建了一个基础的布局,包含输入框和按钮。当用户点击数字键时,它们会被添加到当前数字符合上;点击运算符键时,保存运算符并清空输入。点击“clear”清除整个计算过程。
请注意,这只是一个非常基础的实现,实际计算器还需要处理更多细节,比如错误检查(除数为零),完整的事件监听以及结果计算等。
用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的计算逻辑来实现相应的运算,并将结果显示出来。
阅读全文