js编写简单计算器,一个输入框
时间: 2023-05-23 18:06:16 浏览: 94
,一个按钮,点击按钮后计算出输入框中表达式的结果。
A:
HTML代码:
```
<input type="text" id="input-numbers">
<button onclick="calculate()">计算</button>
```
JavaScript代码:
```
function calculate() {
// 获取输入框中的内容
let input = document.getElementById("input-numbers").value;
// 判断输入是否为空
if (input == "") {
alert("请输入表达式!");
return;
}
// 计算表达式结果
try {
let result = eval(input);
alert("结果为:" + result);
} catch (e) {
alert("输入不合法!");
}
}
```
注:此简单计算器并未考虑所有计算情况,仅供学习参考。
相关问题
用js帮我编写一个简易计算器
### 回答1:
好的,为您提供一份简易计算器的JS代码:
```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;
if (operator == "+") {
result = parseFloat(num1) + parseFloat(num2);
} else if (operator == "-") {
result = num1 - num2;
} else if (operator == "*") {
result = num1 * num2;
} else if (operator == "/") {
result = num1 / num2;
}
document.getElementById("result").value = result;
}
</script>
</head>
<body>
<h1>简易计算器</h1>
<p>
<input type="text" id="num1" placeholder="请输入第一个数字">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" placeholder="请输入第二个数字">
<button onclick="calculate()">计算</button>
</p>
<p>结果:<input type="text" id="result"></p>
</body>
</html>
```
希望能对您有所帮助!
### 回答2:
当然可以!下面是一个简单的JavaScript计算器的示例代码:
HTML代码:
```html
<input type="text" id="num1" placeholder="输入第一个数字">
<input type="text" id="num2" placeholder="输入第二个数字">
<br>
<button onclick="add()">+</button>
<button onclick="subtract()">-</button>
<button onclick="multiply()">*</button>
<button onclick="divide()">/</button>
<br>
<p id="result">计算结果将显示在这里</p>
```
JavaScript代码:
```javascript
function add() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").textContent = "计算结果: " + result;
}
function subtract() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").textContent = "计算结果: " + result;
}
function multiply() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 * num2;
document.getElementById("result").textContent = "计算结果: " + result;
}
function divide() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 / num2;
document.getElementById("result").textContent = "计算结果: " + result;
}
```
上述代码创建了一个简单的HTML页面,其中包含两个输入框用于输入数字,四个按钮用于执行加法、减法、乘法和除法操作,以及一个用于显示计算结果的段落元素。
每个按钮都具有一个相应的JavaScript函数。这些函数通过获取输入框中的数字值,进行相应的计算,并将结果显示在段落元素中。
请注意,此示例代码简单并仅用于演示目的,实际的计算器可能需要更多的功能和验证。
### 回答3:
以下是一个简易的计算器的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<script>
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 === "/") {
if (num2 !== 0) {
result = num1 / num2;
} else {
result = "除数不能为0";
}
} else {
result = "无效的运算符";
}
document.getElementById("result").innerText = result;
}
</script>
</head>
<body>
<h2>简易计算器</h2>
<input type="number" id="num1" placeholder="请输入第一个数字">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2" placeholder="请输入第二个数字">
<button onclick="calculate()">计算</button>
<br><br>
<span id="result"></span>
</body>
</html>
```
该计算器使用了HTML和JavaScript语言编写。用户可以在两个输入框中输入两个数字,然后选择运算符进行计算。点击"计算"按钮后,根据用户选择的运算符,计算结果将会显示在页面上。
用Javascript编写一个简单计算器
好的,我可以为您提供一个基本的Javascript计算器代码:
HTML代码:
```
<!doctype html>
<html>
<head>
<title>JavaScript Calculator</title>
</head>
<body>
<h2>JavaScript Calculator</h2>
<form name="calculator">
<input type="text" name="answer" size="16">
<br><br>
<input type="button" value="1" onclick="calculator.answer.value+='1'">
<input type="button" value="2" onclick="calculator.answer.value+='2'">
<input type="button" value="3" onclick="calculator.answer.value+='3'">
<input type="button" value="+" onclick="calculator.answer.value+='+'">
<br><br>
<input type="button" value="4" onclick="calculator.answer.value+='4'">
<input type="button" value="5" onclick="calculator.answer.value+='5'">
<input type="button" value="6" onclick="calculator.answer.value+='6'">
<input type="button" value="-" onclick="calculator.answer.value+='-'">
<br><br>
<input type="button" value="7" onclick="calculator.answer.value+='7'">
<input type="button" value="8" onclick="calculator.answer.value+='8'">
<input type="button" value="9" onclick="calculator.answer.value+='9'">
<input type="button" value="*" onclick="calculator.answer.value+='*'">
<br><br>
<input type="button" value="C" onclick="calculator.answer.value=''">
<input type="button" value="0" onclick="calculator.answer.value+='0'">
<input type="button" value="=" onclick="calculator.answer.value=eval(calculator.answer.value)">
<input type="button" value="/" onclick="calculator.answer.value+='/'">
</form>
</body>
</html>
```
这段代码将生成一个简单的HTML页面,包含一个输入框和一组按钮,用于执行各种算术操作。当用户按下相应的按钮时,Javascript代码将将相应的数字或运算符添加到输入框中,并在用户单击“=”按钮时计算表达式并显示结果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)