首页在hbuider制作简易计算器的代码

在hbuider制作简易计算器的代码

时间: 2024-09-24 21:29:45 浏览: 46

在HBuilder（也叫DCloud的IDE）中制作简易计算器的代码通常涉及HTML、CSS和JavaScript。这里是一个简单的示例，使用纯前端实现基本的加减乘除功能： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> #calculator { width: 200px; padding: 20px; border: 1px solid gray; } input[type="number"] { width: 100%; } button { width: 50%; margin-bottom: 10px; } </style> </head> <body> <div id="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> function calculate() { const num1 = parseFloat(document.getElementById('num1').value); const num2 = parseFloat(document.getElementById('num2').value); const operator = document.getElementById('operator').value; let result; switch (operator) { case '+': result = num1 + num2; break; case '- num2; break; case '*': result = num1 * num2; break; case '/': if (num2 !== 0) { result = num1 / num2; } else { alert("除数不能为零"); return; } break; default: alert("无效的操作符"); return; } document.getElementById('result').innerText = `结果: ${result}`; } </script> </body> </html> ```

阅读全文