阅读量:0
JavaScript可以实现网页计算器的功能,以下是一个简单的示例:
<!DOCTYPE html> <html> <head> <title>网页计算器</title> </head> <body> <h1>网页计算器</h1> <input type="text" id="input" readonly> <br> <button onclick="clearInput()">C</button> <button onclick="appendInput('+')">+</button> <button onclick="appendInput('-">-</button> <button onclick="appendInput('*">*</button> <button onclick="appendInput('/')">/</button> <br> <button onclick="appendInput('7')">7</button> <button onclick="appendInput('8')">8</button> <button onclick="appendInput('9')">9</button> <button onclick="calculate()">=</button> <br> <button onclick="appendInput('4')">4</button> <button onclick="appendInput('5')">5</button> <button onclick="appendInput('6')">6</button> <button onclick="appendInput('('">(</button> <button onclick="appendInput(')')">)</button> <br> <button onclick="appendInput('1')">1</button> <button onclick="appendInput('2')">2</button> <button onclick="appendInput('3')">3</button> <button onclick="appendInput('.')">.</button> <br> <button onclick="appendInput('0')">0</button> <script> function appendInput(value) { document.getElementById('input').value += value; } function calculate() { let expression = document.getElementById('input').value; try { let result = eval(expression); document.getElementById('input').value = result; } catch (error) { alert('输入表达式无效,请重新输入'); } } function clearInput() { document.getElementById('input').value = ''; } </script> </body> </html>
在这个示例中,我们创建了一个简单的网页计算器,用户可以在输入框中输入表达式,然后点击“=”按钮进行计算。计算器支持基本的加减乘除运算,同时也可以清除输入框中的内容。通过JavaScript的eval函数来计算输入表达式的结果。如果输入的表达式无效,会弹出一个提示框提示用户重新输入。