JavaScript——周技能检测——菜单编辑——2022年11月22日（考完）
一、语言和环境
1. 实现语言：JavaScript。
2. 开发环境：VScode。
二、要求
1、在文本框中输入两个操作数和选择运算符后，在页面上显示输出结果。
参考图如下所示：
三、推荐实现步骤
（1）单击“计算”按钮后，删除两个文本框左右两边的空格，删除空格后，判断输入框中是否都输入了内容，只要其中一个文本框没有输入，则提示“请输入两个操作数”。
（2）在输入了数据的前提下，验证输入的是否都是数值，只要其中一个输入错误，则提示“请输入正确的数值”。
（3）单击“计算”按钮，在判断输入的数据格式都是正确的前提下，根据用户选择的运算符号（可以选择 、-、*、/）计算结果，并把结果显示在最后一个文本框中。
四、注意事项
1. 仔细审题，准确理解题目要求。
2. 注意按照要求来进行设计。
3. 代码的书写、命名须符合规范，添加适当的注释。
五、评分标准
题目：文件操作 | ||
|---|---|---|
该程序评分标准如下： | ||
100 | 四则运算界面 | |
10 | Html网页创建成功 | |
10 | 文本输入框、按钮添加成功 | |
10 | “计算”按钮单击事件绑定函数成功 | |
10 | 文本框输入内容正确进行非空判断 | |
10 | 文本框输入内容正确进行数值判断 | |
10 | 点击运算按钮后，“ ”运算结果准确 | |
10 | 点击运算按钮后，“-”运算结果准确 | |
10 | 点击运算按钮后，“*”运算结果准确 | |
10 | 点击运算按钮后，“/”运算结果准确 | |
10 | 变量命名规范，有注释 | |
总分 | 100分 | |
实现代码：
代码语言：javascript复制<!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>jsWeekTest</title>
</head>
<body>
<script>
// result_calc
function calc() {
var x = document.getElementById("x").value;
var opt = document.getElementById("opt").value;
var y = document.getElementById("y").value;
if (x == "" || y == "") {
alert("con't null");
return;
}
result = x opt y;
// result_info
document.getElementById("result").value = eval(result);
}
</script>
<input type="text" id="x" />
<select id="opt">
<option value=" "> </option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="y" /><span>=</span>
<input type="text" id="result">
<button onclick="calc()">计算</button>
</body>
</html>我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=wgtbfckp18xt
