首页用html写一个函数计算器前端页面

用html写一个函数计算器前端页面

时间: 2023-11-24 21:07:11 浏览: 70

好的，以下是一个简单的函数计算器前端页面，用 HTML 和 JavaScript 实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数计算器</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } h1 { text-align: center; } .container { max-width: 500px; margin: auto; padding: 20px; background-color: #f2f2f2; border-radius: 10px; } input[type="text"], input[type="button"] { display: block; width: 100%; margin: 10px 0; padding: 10px; border: none; border-radius: 5px; font-size: 16px; box-sizing: border-box; } input[type="button"] { background-color: #4CAF50; color: white; cursor: pointer; } </style> </head> <body> <h1>函数计算器</h1> <div class="container"> <input type="text" id="expression" placeholder="请输入表达式"> <input type="button" value="计算" onclick="calculate()"> <input type="text" id="result" placeholder="计算结果"> </div> <script> function calculate() { let expression = document.getElementById("expression").value; let result; try { result = eval(expression); } catch (error) { result = "错误的表达式"; } document.getElementById("result").value = result; } </script> </body> </html> ``` 这个计算器页面非常简单，只有一个输入框和一个按钮用于计算表达式，并在下方显示结果。注意到这个计算器使用了 JavaScript 的 `eval()` 函数来计算输入的表达式，这个函数可以将字符串当作 JavaScript 代码执行，但也因此存在一些安全风险，所以需要确保输入的表达式不会被恶意篡改。

阅读全文