在上一次作业的基础上,完成两个数的四则运算。要求用下拉列表选择+、-、*、/,并进行相应的运算
时间: 2023-11-28 21:48:00 浏览: 63
好的,我可以帮你完成这个任务。你需要使用HTML、CSS和JavaScript来创建一个简单的表单,其中包含两个输入框和一个下拉列表,用户可以在输入框中输入数字,并在下拉列表中选择运算符。接下来,您需要使用JavaScript来捕获用户的输入并执行相应的计算,最后在页面上显示结果。
以下是示例代码,希望能对您有所帮助:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>四则运算</title>
<style>
input[type="text"] {
width: 150px;
height: 25px;
margin: 10px;
padding: 5px;
font-size: 16px;
}
select {
width: 50px;
height: 35px;
font-size: 16px;
}
button {
margin: 10px;
padding: 5px 15px;
font-size: 16px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.result {
margin: 20px;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>简单的四则运算</h1>
<form>
<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 type="button" onclick="calculate()">计算</button>
</form>
<div class="result" id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
在这个HTML代码中,我们创建了两个输入框和一个下拉列表,以及一个计算按钮和一个显示结果的div元素。输入框和下拉列表都有ID属性,这些ID将用于在JavaScript中引用它们。我们还为这些元素应用了一些样式,使它们看起来更美观。
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;
switch(operator) {
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;
}
```
在JavaScript代码中,我们首先获取用户输入的数字和运算符,然后使用switch语句执行相应的计算。最后,我们将结果显示在页面上。
这就是实现两个数的四则运算的完整代码。您可以将HTML代码保存为一个HTML文件,将JavaScript代码保存为一个名为“script.js”的文件,并确保两个文件都在同一个文件夹中。打开HTML文件,就可以看到一个简单的四则运算表单。
阅读全文