请使用js完成一个简单的网页计算器。用户在输入框中输入数值,选择相应的运算(加、减、乘、除、求模),然后点击计算输出结果。界面参考如下:(可以自行设计界面,亦可自行增加功能)
时间: 2023-08-31 22:40:21 浏览: 206
### 回答1:
好的,我可以为您提供一个简单的网页计算器的实现。以下是代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>网页计算器</title>
</head>
<body>
<h1>网页计算器</h1>
<input type="text" id="num1" placeholder="请输入第一个数值">
<select id="operator">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
<option value="%">求模</option>
</select>
<input type="text" id="num2" placeholder="请输入第二个数值">
<button onclick="calculate()">计算</button>
<p id="result"></p>
</body>
</html>
```
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;
switch(operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
case "%":
result = num1 % num2;
break;
default:
result = "请输入正确的运算符";
}
document.getElementById("result").innerHTML = "计算结果为:" + result;
}
```
您可以将以上代码复制到一个HTML文件中,然后在浏览器中打开该文件,即可看到一个简单的网页计算器界面。用户可以在输入框中输入数值,选择相应的运算符,然后点击计算按钮,即可在页面上看到计算结果。
### 回答2:
使用JS完成一个简单的网页计算器可以通过以下步骤实现:
1. 创建一个HTML文件,并添加一个输入框、选择运算的下拉菜单、一个计算按钮和一个显示结果的容器。
```html
<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
</head>
<body>
<input type="text" id="inputNumber" placeholder="请输入数字">
<select id="operation">
<option value="add">加</option>
<option value="subtract">减</option>
<option value="multiply">乘</option>
<option value="divide">除</option>
<option value="modulus">求模</option>
</select>
<button onclick="calculate()">计算</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
2. 在同一目录下创建一个名为"script.js"的文件,并在该文件中添加以下代码:
```javascript
function calculate() {
var inputNumber = parseFloat(document.getElementById("inputNumber").value);
var operation = document.getElementById("operation").value;
var result = 0;
switch (operation) {
case "add":
result = inputNumber + inputNumber;
break;
case "subtract":
result = inputNumber - inputNumber;
break;
case "multiply":
result = inputNumber * inputNumber;
break;
case "divide":
result = inputNumber / inputNumber;
break;
case "modulus":
result = inputNumber % inputNumber;
break;
}
document.getElementById("result").innerText = "结果: " + result;
}
```
3. 保存并打开HTML文件,就可以在浏览器中看到一个简单的计算器界面。用户输入数字、选择运算符,点击“计算”按钮后,会在下方显示计算结果。
以上是一个简单的网页计算器的实现,你可以根据自己的需求设计更复杂的界面和功能。
### 回答3:
下面是一个简单的网页计算器的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.container {
margin-top: 100px;
}
input[type="number"] {
padding: 5px;
font-size: 18px;
}
select, button {
padding: 8px;
font-size: 18px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<input type="number" id="num1" placeholder="请输入第一个数值">
<select id="operator">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
<option value="modulo">%</option>
</select>
<input type="number" id="num2" placeholder="请输入第二个数值">
<br>
<button onclick="calculate()">计算</button>
<br>
<p id="result"></p>
</div>
<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;
switch (operator) {
case "add":
result = num1 + num2;
break;
case "subtract":
result = num1 - num2;
break;
case "multiply":
result = num1 * num2;
break;
case "divide":
result = num1 / num2;
break;
case "modulo":
result = num1 % num2;
break;
default:
result = "请选择运算符";
}
document.getElementById("result").innerHTML = "结果:" + result;
}
</script>
</body>
</html>
```
该示例中,通过HTML表单元素(`input`和`select`)来获取用户输入的数值和运算符选项,使用JavaScript来进行计算,并将结果显示在页面上的`<p>`标签中。其中,使用`switch`语句根据选择的运算符来执行相应的计算操作。
阅读全文