首页做一个web简易计算器，使用ES6新特性写完整代码

做一个web简易计算器，使用ES6新特性写完整代码

时间: 2024-11-09 08:20:40 浏览: 5

为了做一个简单的Web计算器，我们可以利用HTML、CSS和JavaScript (包括ES6的新特性) 来构建。下面是一个基本的例子，展示了如何使用箭头函数、模板字符串和解构赋值等ES6特性： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #calculator { width: 200px; margin: auto; padding: 10px; } </style> </head> <body> <div id="calculator"> <input type="text" id="result" disabled> <br><br> <button onclick="addNumber(7)">7</button> <button onclick="addNumber(8)">8</button> <button onclick="addNumber(9)">9</button> <button onclick="operator('+')">+</button>  <button onclick="calculate()">=</button> <button onclick="clearResult()">C</button> </div> <script> let result = document.getElementById('result'); const buttons = Array.from({ length: 10 }, (_, i) => `button(i + 48)`); // 数字按钮 function addNumber(num) { result.value += num; } function operator(op) { if (result.value && op !== '=') { result.value += op; } else if (op === '=' && !isNaN(result.value)) { result.value = eval(result.value); clearOperator(); } } function calculate() { result.value = eval(result.value); clearOperator(); } function clearResult() { result.value = ''; } function clearOperator() { if (result.value.endsWith('=')) { result.value = result.value.slice(0, -1); } } buttons.forEach((btn) => { btn.onclick = () => { addNumber(btn.innerText); }; }); </script> </body> </html> ``` 这个例子创建了一个简单的小型计算器，用户可以输入数字和使用加减乘除运算。请注意，`eval()`函数用于计算表达式，但它有安全风险，仅适用于这种简单场景。在实际应用中，应该考虑使用更安全的方式来解析表达式。

阅读全文