创建网页calculate.html，具体要求如下
-
- 制作一个如下图所示的表单
-
- 当用户在运算符的下拉列表框中没有选择具体的运算符时，点击“=”按钮，将在结果文本框中显示相应的提示，如下图所示
-
- 当用户选择了具体的运算符之后，点击“=”按钮，将在结果文本框中显示相应的计算结果，如图所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f() {
var beichu = document.querySelector("#beichu")
var one = document.querySelector("#one").value;//获取第一个数的value
var two = document.querySelector("#two").value;//获取第二个数的value
var yunsuan = document.querySelector("#yunsuan").value;//获取运算符号
var result = 0;
switch (yunsuan) {
case "+":
result = parseInt(one) + parseInt(two);
break;
case "-":
result = parseInt(one) - parseInt(two);
break;
case "*":
result = parseInt(one) * parseInt(two);
break;
case "/":
if (parseInt(one) == 0) {
beichu.innerHTML = '<font color="red">被除数不能为0</font>'
}
else {
result = parseInt(one) / parseInt(two);
}
break;
case "%":
result = parseInt(one) % parseInt(two);
break;
default:
result = "选择正确的运算符";
break;
}
// 把运算后所得到的数赋值给结果
document.querySelector("#result").value = result;
}
</script>
</head>
<body>
<table>
<tr>
<!-- 第一个数 -->
<td>
<input type="text" value="" id="one">
</td>
<!-- 选择运算符 -->
<td>
<select id="yunsuan">
<option value="aaa" selected="">请选择运算符</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
</td>
<!-- 第二个数 -->
<td>
<input type="text" value="" id="two">
</td>
<!-- 等号 -->
<td>
<input type="button" value="=" onclick="f()">
</td>
<!-- 结果 -->
<td>
<input type="text" value="" id="result">
<span id="beichu"></span>
</td>
</tr>
</table>
</body>
</html>