最近在学习jquery框架，写了好多小demo，这个案例讲的就是jquery简易版计算器。
本人目前承接各类小demo和作业，类型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等数学，有意请私聊！
效果图片如下：
第一张是刚运行在网页时的效果图。
第二张是输入运算数和运算符时的效果图。
第三张是错误输入的运算符。
整体代码如下：
<html> <head> <meta charset="utf-8" /> <title>jquery计算器</title> <!-- window.eval() --> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style type="text/css"> .panel { margin: 0 auto; width: 275px; height: 310px; border: 2px solid #bbb; } #screen { width: 200px; height: 40px; border: 1px solid #bbb; margin: 7px 0px 0px 7px; float: left; } input { font-size: 20px; width: 50px; height: 50px; margin: 6px; } </style> <script> $(function() { /* 思路一：将点击了input的选项的值传到input上 思路二：利用原生的eval()函数计算结果，并进行赋值操作 思路三：清空按钮特别处理一下 */ // 点击按钮 var clickBtn = ""; // count判断是否是第一次点击 var count = 0; //假如报错 if (window.onerror) { return $("#screen").text("您的操作有误哦！"); } $(":button").click(function() { // 选择了清零按钮 if ($(this).val() == 'C') { count = 0; return $("#screen").text(""); } // 选择了相等按钮 if ($(this).val() == '=') { try { var inputText = $("#screen").text(); clickBtn = window.eval(inputText); return $("#screen").text(window.eval(inputText)); } catch (err) { count = 0; return $("#screen").text("您的操作有误哦！"); } } if (count == 0) { $("#screen").text(""); clickBtn = $(this).val(); } else { clickBtn += $(this).val(); } count++; return $("#screen").text(clickBtn); }); }); </script> </head> <body> <div class="panel"> <div> <p id="screen"></p> <input type="button" value="C" /> </div> <div> <input type="button" value="7" /> <input type="button" value="8" /> <input type="button" value="9" /> <input type="button" value="/" /> <input type="button" value="4" /> <input type="button" value="5" /> <input type="button" value="6" /> <input type="button" value="*" /> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="-" /> <input type="button" value="0" /> <input type="button" value="." /> <input type="button" value="=" /> <input type="button" value="+" /> </div> </div> </body> </html>重难点讲解如下：
1.count在这里起的具体作用是什么？
count是一个计数器。
如果count为0，它的意思是要么我第一次打开这个页面，要么我点击了清零（C）按钮，即我下一步不管是点击了运算符还是运算数，都是一个全新的操作。
它出现在三个地方，①第一次打开网页运行这个计算器，②点击了清零按钮，③运算报错出现“您的操作有误”字样。
2.clickBtn如何取值？
它主要是利用jquery的val()方法取input输入框的value值，它结合count这个计数器可以实现一个比较巧妙的结果。
判断是否是第一个使用这个运算器，如果不是第一次的话。你执行完一步操作，按下等号后出现了一个值，只要没有报错，这个值就可以作为下一个运算的第一个运算数。
最后如果你对这个代码有任何疑问，欢迎在下文给我评论留言，只要我看到了就一定会回复哒！~~
