首页使用【HBuilder】写【计算器】的代码

使用【HBuilder】写【计算器】的代码

时间: 2024-10-12 22:04:40 浏览: 57

HBuilder主要用于Web应用、App开发等前端和后端的快速开发，对于简单的计算器应用，我们可以使用它编写HTML、CSS和JavaScript代码来创建基本功能。以下是一个简单的步骤和示例代码： 1. 创建HTML结构： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单计算器</title> </head> <body> <input type="text" id="display" disabled> <br> <button onclick="addDigit('0')">0</button>  <button onclick="clearDisplay()">C</button> <button onclick="calculate()">=</button> </body> </html> ``` 2. JavaScript代码部分： ```javascript let display = document.getElementById('display'); let currentNumber = ''; function addDigit(digit) { if (digit === '0') { // 如果当前显示的是0，则直接添加新数 currentNumber += digit; } else { // 否则，先判断是否有小数点 if (!currentNumber.includes('.')) { currentNumber += digit; } else { currentNumber += `.${digit}`; } } display.value = currentNumber; } function clearDisplay() { currentNumber = ''; display.value = ''; } function calculate() { try { let result = eval(currentNumber); display.value = result; currentNumber = result.toString(); } catch (_) { display.value = "计算错误"; } } ``` 以上代码实现了数字输入、清除和加法计算的基础功能。注意`eval()`函数用于计算用户输入的表达式，但这在实际项目中可能存在安全风险，建议在更复杂的场景下使用解析库。

阅读全文