首页请实现一个简单的网页计算器。 2个文本框获取到数据

请实现一个简单的网页计算器。 2个文本框获取到数据

时间: 2024-09-12 07:14:10 浏览: 40

创建一个简单的网页计算器，我们可以使用HTML、CSS和JavaScript来实现。这里是一个基础示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> .calculator { width: 200px; margin: auto; padding: 20px; border: 1px solid #ccc; } input[type=text] { width: 100%; margin-bottom: 10px; } button { width: 50px; height: 50px; font-size: 24px; } </style> </head> <body> <div class="calculator"> <input type="text" id="num1" placeholder="输入第一个数字"> <input type="text" id="num2" placeholder="输入第二个数字"> <button onclick="add()">+</button> <button onclick="subtract()">-</button> <button onclick="multiply()">*</button> <button onclick="divide()">/</button> <p id="result"></p> </div> <script> function add() { const num1 = parseFloat(document.getElementById('num1').value); const num2 = parseFloat(document.getElementById('num2').value); document.getElementById('result').innerText = '结果: ' + (num1 + num2); } function subtract() { // ...类似其他函数的编写 } function multiply() { // ...类似其他函数的编写 } function divide() { // ...注意处理除数为零的情况 } </script> </body> </html> ``` 这个例子中，我们有两个文本框用于用户输入数字，然后有四个按钮对应加、减、乘、除操作。点击按钮时，相应的计算函数会被调用，结果显示在页面底部的`<p>`元素中。

阅读全文