JavaScript怎么实现网页计算器

avatar
作者
筋斗云
阅读量: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函数来计算输入表达式的结果。如果输入的表达式无效,会弹出一个提示框提示用户重新输入。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!