首页编写一个网页版计算器代码。

编写一个网页版计算器代码。

时间: 2024-10-29 17:11:39 浏览: 16

编写一个简单的网页版计算器，我们可以使用HTML、CSS和JavaScript来实现。这是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .calculator { width: 200px; height: 300px; border: 1px solid black; padding: 15px; } input[type="number"] { width: 100%; margin-bottom: 10px; } button { width: 100%; background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } </style> </head> <body> <div class="calculator"> <input type="text" id="display" disabled> <br><br> <button onclick="clearDisplay()">C</button> <button onclick="appendNumber('7')">7</button> <button onclick="appendNumber('8')">8</button> <button onclick="appendNumber('9')">9</button> <button onclick="calculate('/')">/</button>  </div> <script> let current = ''; function appendNumber(num) { current += num; document.getElementById('display').value = current; } function calculate(op) { if (current !== '') { const result = eval(current + op); document.getElementById('display').value = result; current = result.toString(); } } function clearDisplay() { current = ''; document.getElementById('display').value = ''; } </script> </body> </html> ``` 这个例子中，我们创建了一个包含数字键、运算符键以及清除按钮的简单计算器。`eval()`函数用于计算当前输入的数学表达式，然后更新显示区域。请注意，由于`eval()`函数的安全性问题，在实际生产环境中应避免直接使用它，可以考虑设计更安全的算法来进行计算。

阅读全文