• JavaScript——周技能检测——菜单编辑——2022年11月22日（考完）

    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分

    实现代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>jsWeekTesttitle>
    9. head>
    10.  
    11. <body>
    12.     <script>
    13.         // result_calc
    14.         function calc() {
    15.             var x = document.getElementById("x").value;
    16.             var opt = document.getElementById("opt").value;
    17.             var y = document.getElementById("y").value;
    18.             if (x == "" || y == "") {
    19.                 alert("con't null");
    20.                 return;
    21.             }
    22.             result = x + opt + y;
    23.             // result_info
    24.             document.getElementById("result").value = eval(result);
    25.         }
    26.     script>
    27.     <input type="text" id="x" />
    28.     <select id="opt">
    29.         <option value="+">+option>
    30.         <option value="-">-option>
    31.         <option value="*">*option>
    32.         <option value="/">/option>
    33.     select>
    34.     <input type="text" id="y" /><span>=span>
    35.     <input type="text" id="result">
    36.     <button onclick="calc()">计算button>
    37. body>
    38.  
    39. html>

    我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=wgtbfckp18xt

  • 相关阅读:
    JAVA后端服务端与移动端客户端高精度时间同步思路
    文献 | 坏天气会让我们更怀旧？
    Java-IO流之字节输入流（中篇）
    深度长文探讨JOIN运算的简化和提速
    10个前端开发常用的速查网站
    GEE错误——XXX is not a function,如何解决这个问题？
    RT-DETR优化改进：轻量级Backbone改进 | VanillaNet极简神经网络模型 | 华为诺亚2023
    redis安装（单机模式和哨兵模式）
    〖Python网络爬虫实战㊳〗- JavaScript 逆向实战（二）
    Kubernetes介绍和资源管理
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/127985917