JQuery实现简易计算器 |
您所在的位置：网站首页 › php函数调用简易计算器代码 › JQuery实现简易计算器 |
JQuery实现简易计算器
|
本人目前承接各类小demo和作业，类型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等数学，有意请私聊！ 效果图片如下：
第一张是刚运行在网页时的效果图。 第二张是输入运算数和运算符时的效果图。 第三张是错误输入的运算符。 整体代码如下： jquery计算器 .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; } $(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); }); });重难点讲解如下： 1.count在这里起的具体作用是什么？ count是一个计数器。 如果count为0，它的意思是要么我第一次打开这个页面，要么我点击了清零（C）按钮，即我下一步不管是点击了运算符还是运算数，都是一个全新的操作。 它出现在三个地方，①第一次打开网页运行这个计算器，②点击了清零按钮，③运算报错出现“您的操作有误”字样。
2.clickBtn如何取值？ 它主要是利用jquery的val()方法取input输入框的value值，它结合count这个计数器可以实现一个比较巧妙的结果。 判断是否是第一个使用这个运算器，如果不是第一次的话。你执行完一步操作，按下等号后出现了一个值，只要没有报错，这个值就可以作为下一个运算的第一个运算数。 最后如果你对这个代码有任何疑问，欢迎在下文给我评论留言，只要我看到了就一定会回复哒！~~ |
【本文地址】
今日新闻 |
推荐新闻 |