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分 |
|
实现代码：
-
<!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
转载：https://blog.csdn.net/feng8403000/article/details/127985917
查看评论