使用表单制作一个计算器界面，页面内容格式如图所示（P102 图4-22），用户输入两个操作数后，点击等号按钮，在客户端完成计算，将结果显示出来。（1）具备简单的输入数据验证功能，例如被除数为0、操作数不是数值型数据等。（2）验证错误，给出明确的提示信息。（3）运算结果正确

创建一个计算器界面通常需要HTML、CSS和JavaScript来结合实现。首先，设计一个包含两个输入框（用于输入数字）、选择运算符的下拉菜单和一个“=”按钮的简单布局，类似这样： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>简易计算器</title> <style> .calculator { display: flex; width: 300px; margin: auto; } input[type="number"] { width: 100%; padding: 5px; margin-bottom: 10px; } select { width: 100%; margin-bottom: 10px; } button { background-color: #4CAF50; color: white; border: none; padding: 8px 16px; cursor: pointer; } </style> </head> <body> <div class="calculator"> <input type="number" id="num1" placeholder="请输入第一个数字"> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="number" id="num2" placeholder="请输入第二个数字"> <button onclick="calculate()">=</button> <p id="result"></p> </div> <script src="calculator.js"></script> </body> </html> ``` 然后在`calculator.js`文件中编写JavaScript代码，包括数据验证和计算逻辑： ```javascript function calculate() { const num1 = parseFloat(document.getElementById("num1").value); const num2 = parseFloat(document.getElementById("num2").value); const operator = document.getElementById("operator").value; if (isNaN(num1) || isNaN(num2)) { document.getElementById("result").innerText = "请输入有效数值"; return; } if (operator === '/' && num2 === 0) { document.getElementById("result").innerText = "除数不能为0"; return; } let result; switch (operator) { case "+": result = num1 + num2; break; case "-": result = num1 - num2; break; case "*": result = num1 * num2; break; case "/": result = num1 / num2; break; } document.getElementById("result").innerText = `计算结果: ${result}`; } ``` 这个示例实现了基本的输入验证和计算功能。当用户输入非数值或除数为零时，会在相应位置显示错误提示。当用户点击“=”按钮，计算结果会显示在页面底部。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

最新推荐

数据库基础测验20241113.doc

微信小程序下拉选择组件

DICOM文件+DX放射平片-数字X射线图像DICOM测试文件

Jupyter Notebook《基于双流 Faster R-CNN 网络的 图像篡改检测》+项目源码+文档说明+代码注释

使用epf捕获没有CA证书的SSLTLS明文（LinuxAndroid内核支持amd64arm64）.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

Jupyter Notebook《基于双流 Faster R-CNN 网络的图像篡改检测》+项目源码+文档说明+代码注释