公司有道面试题是实现计算器的效果，所有面试者都是进行了很复杂的判断来计算的，甚至使用了正则表达式进行验证，其实本题只是考察js基础知识，关于计算只要使用eval()方法就可以得到结果
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。eval()方法工作中不常用（至少我很少用到），面试者应该是在这样的情况下没有想到该方法而已，下面给出代码，代码中只做了简单的判断，大家使用时可根据需要做调整
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { box-sizing: border-box; } .container { width: 300px; height: 500px; background: rgba(255, 167, 167, 0.1); padding: 25px 15px; color: #10dada; } .showbox { width: 100%; height: 50px; line-height: 50px; font-size: 25px; background: #fff; text-align: right; padding: 0 10px; } .item { float: left; width: 58px; height: 58px; line-height: 58px; margin: 4px; border-radius: 50%; background: #fff; text-align: center; font-size: 20px; cursor: pointer; } .item:hover { box-shadow: 0 0 3px 3px #eee; } .panel { overflow: hidden; margin-top: 20px; } </style> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="showbox process"></div> <div class="showbox result"></div> <div class="panel"> <div class="item">c</div> <div class="item">(</div> <div class="item">)</div> <div class="item">/</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">*</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">-</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">+</div> <div class="item">0</div> <div class="item">.</div> <div class="item">del</div> <div class="item">=</div> </div> </div> <script> var process = ''; // 计算式子 var result = ''; // 计算结果 var flag = false; // 是否为显示计算结果状态 $('.panel').on('click', '.item', function (e) { var text = this.innerHTML; // 获取被点击按钮的文本信息 if (flag) { // 当前为显示结果状态 process = ''; result = ''; flag = false; } if (text === 'c') { process = ''; result = ''; } else if (text === 'del') { process = process.slice(0, -1); } else if (text === '=') { try { result = eval(process); } catch (e) { result = '错误' } flag = true; } else { process += text; } $('.process').html(process); $('.result').html(result); }) </script> </body> </html>下面是结果图，分别为正确计算和错误的显示
