HTML和CSS结构：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="jq.js"></script>

     <style>

     input[type="text"]{

         margin-bottom: 20px;

         text-align: right;

     }

     </style>

 </head>

 <body>

     <input type="text"><br>

     <div class="number">

         <input type="button" value="0">

         <input type="button" value="1">

         <input type="button" value="2">

         <input type="button" value="3">

         <input type="button" value="4">

         <input type="button" value="5">

         <input type="button" value="6">

         <input type="button" value="7">

         <input type="button" value="8">

         <input type="button" value="9">

         <input type="button" value=".">

     </div>

     <div class="char">

         <input type="button" value="+">

         <input type="button" value="-">

         <input type="button" value="*">

         <input type="button" value="/">

     </div>

     <div class="result">

         <input type="button" value="=">

     </div>

     <div class="delete">

         <input type="button" value="delete">

     </div>

     <script>

     </script>

 </body>

 </html>

下面来一步步实现计算器的功能

第一步:首先实现点击数字不断的显示出来

    <script>

        //存取数字一的容器

        var num="";

        //给所有数字添加点击事件

        $(".number input").click(function(){

            //获取当前点击的value值

            var value = $(this).val();

            //因为 value和num是字符串，加号在这里是连接字符串，然后存进变量num里面

                num = num+value;

            //把变量num在input里面输出

                $("input[type='text']").val(num);

        })

    </script>

需要注意：

  • val()为input标签专用的一个方法，能获取input标签的value值，括号里面传入参数表示替换掉原来的值
  • 这里变量num需要放在函数外面，如果放在函数里面，每次点击的时候又重新申明了num值为空字符串，达不到我们想要的效果，
  • $(this).val()获取的是一个字符串
  • num在这里的作用相当于一个容易，新的值不断的加上原来的值，并覆盖掉旧的值

第二步：添加运算符事件

     <script>

         var num="";

         //声明一个变量char，来存放运算符

         var char="";

         $(".number input").click(function(){

             var value = $(this).val();

                 num = num+value;

                 $("input[type='text']").val(num);

         })

         //添加运算符点击事件

         $(".char input").click(function(){

             //获取当前点击的运算符存进变量char中

             char = $(this).val();

             //在input框中输出num+char

             $("input[type='text']").val(num+char);

         })

     </script>

第三步：显示出数字1加上数字2

     <script>

         var num="";

         //申明变量num2，来存放数字2的值

         var num2="";

         var char="";

         $(".number input").click(function(){

             var value = $(this).val();

         //如果变量char等于空字符串，则存取数字1的值，否则开始存取数字2的值

             if(char==""){

                 num = num+value;

                 $("input[type='text']").val(num);

             }else{

                 num2 = num2+value;

                 $("input[type='text']").val(num+char+num2);

             }

         })

         $(".char input").click(function(){

             char = $(this).val();

             $("input[type='text']").val(num+char);

         })

     </script>

需要注意：

  • 我这里的数字1和数字2，代表的是需要运算的两个数
  • 什么时候存取数字1和数字2，当我点击了运算符的时候代表我要开始存取数字2，所以这里要做一个if判断，判断变量char是否为空，不为空的时候代表我点击了运算符，需要存取数字2了

第四步：点击等号运算结果

     <script>

         var num="";

         var num2="";

         var char="";

         //申明一个变量，来存放结果

         var result;

         $(".number input").click(function(){

             var value = $(this).val();

             if(char==""){

                 num = num+value;

                 $("input[type='text']").val(num);

             }else{

                 num2 = num2+value;

                 $("input[type='text']").val(num+char+num2);

             }

         })

         $(".char input").click(function(){

             char = $(this).val();

             $("input[type='text']").val(num+char);

         })

         //给等于号添加一个事件

         $(".result input").click(function(){

             //做一个判断，来根据点击的不同运算符，做不同的运算

             switch(char){

                 case "+":

                 result = parseFloat(num) + parseFloat(num2);

                 break;

                 case "-":

                 result = parseFloat(num) - parseFloat(num2);

                 break;

                 case "*":

                 result = parseFloat(num) * parseFloat(num2);

                 break;

                 case "/":

                 result = parseFloat(num) / parseFloat(num2);

                 break;

             }

             //输出结果

             $("input[type='text']").val(result);

         })

     </script>

第五步：实现连续点击运算符算出结果功能

     <script>

         var num="";

         var num2="";

         var char="";

         var result;

         $(".number input").click(function(){

             var value = $(this).val();

             if(char==""){

                 num = num+value;

                 $("input[type='text']").val(num);

             }else{

                 num2 = num2+value;

                 $("input[type='text']").val(num+char+num2);

             }

         })

         $(".char input").click(function(){

             //判断num2是否有值，如果有值的情况下点击运算符表示要做运算操作，输出结果和运算符号，

             if(num2){

                 switch(char){

                 case "+":

                 result = parseFloat(num) + parseFloat(num2);

                 break;

                 case "-":

                 result = parseFloat(num) - parseFloat(num2);

                 break;

                 case "*":

                 result = parseFloat(num) * parseFloat(num2);

                 break;

                 case "/":

                 result = parseFloat(num) / parseFloat(num2);

                 break;

                 }

                 //把结果存进变量num

                  num = result;

                 //把num2清空方便再次点击存数字2

                 num2 = "";

                 $("input[type='text']").val(num+char);

             }

             char = $(this).val();

             $("input[type='text']").val(num+char);

         })

         $(".result input").click(function(){

             switch(char){

                 case "+":

                 result = parseFloat(num) + parseFloat(num2);

                 break;

                 case "-":

                 result = parseFloat(num) - parseFloat(num2);

                 break;

                 case "*":

                 result = parseFloat(num) * parseFloat(num2);

                 break;

                 case "/":

                 result = parseFloat(num) / parseFloat(num2);

                 break;

             }

             $("input[type='text']").val(result);

         })

     </script>

注意的地方：

  • 为什么要 num = result 这行代码的意义，比如我实现 2+3=5操作，则num="1",char="+",num2="3",result="5", 如果不把result值赋给num,得出5后，再点击运算符就会出现2+，这是因为num的值为2,第40行代码输出了2+
  • num2的值必须清空，如果不清点击了运算符后点击数字，会出现旧的值加上点击的数字，这就不正确了
  • 第39行代码 char = $(this).val()，不能放在判断语句前面，第二次点击了运算符后，我们希望得到前面的运算结果，如果把39行代码放在判断语句前面就会出现点击第二次运算符后，前面的运算根据第二次点击的运算符来计算。

第五步：实现点击等号出结果后，我再点击数字，替换掉原来的值，开始新的运算

 <script>

         var num="";

         var num2="";

         var char="";

         var result;

         var state = false;

         $(".number input").click(function(){

             var value = $(this).val();

             if(char==""){

                 //如果点击了等号，并且char为空，清空num和num2的值，方便下面开始存新的数字1

                 if(state){

                     num="";

                     num2="";

                 //把值设置为false，意义表示没点击等号,没点击等号的时候不让这个if语句执行

                     state=false;

                 }

                 num = num+value;

                 $("input[type='text']").val(num);

             }else{

                 num2 = num2+value;

                 $("input[type='text']").val(num+char+num2);

             }

         })

         $(".char input").click(function(){

             if(num2){

                 switch(char){

                 case "+":

                 result = parseFloat(num) + parseFloat(num2);

                 break;

                 case "-":

                 result = parseFloat(num) - parseFloat(num2);

                 break;

                 case "*":

                 result = parseFloat(num) * parseFloat(num2);

                 break;

                 case "/":

                 result = parseFloat(num) / parseFloat(num2);

                 break;

                 }

                 num = result;

                 num2 = "";

                 $("input[type='text']").val(num+char);

             }

             char = $(this).val();

             $("input[type='text']").val(num+char);

         })

         $(".result input").click(function(){

             switch(char){

                 case "+":

                 result = parseFloat(num) + parseFloat(num2);

                 break;

                 case "-":

                 result = parseFloat(num) - parseFloat(num2);

                 break;

                 case "*":

                 result = parseFloat(num) * parseFloat(num2);

                 break;

                 case "/":

                 result = parseFloat(num) / parseFloat(num2);

                 break;

             }

             $("input[type='text']").val(result);

             //把字符串设为空，方面存取下一步清空操作，然后开始存取数字1的值

             char = "";

             //点击了等号后值变为true

             state = true;

         })

这步算是比较绕了，我点击了等号再点击数字需要清空num和num2的值，但是我点击运算符又不能清除num和num2的值，在哪里清空是需要去考虑的，上面我也说了点等号出结果后 点击数字表示我要开始存取变量一的值，那么需要点等号后，清空变量char=""，然后才能去点击数字事件里面的 if里面去存取数字1，在存取数字1之前又需要判断是否点击了等号，如果点击了等号才执行清空的操作。

用jQ实现一个简易计算器的更多相关文章

  1. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

  2. 如何使用Java AWT 创建一个简易计算器

    摘要:手把手教你使用 Java AWT 创建一个简易计算器. 本文分享自华为云社区<手把手教你使用 Java AWT 创建一个简易计算器>,作者:海拥 . 关于AWT AWT (抽象窗口工 ...

  3. Python之实现一个简易计算器

    自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...

  4. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  5. java 实现一个简易计算器

    import java.util.Scanner;public class Test { public static void main(String[] args) { count(); } pub ...

  6. C#Windows Form简易计算器实现（上）

    第一次写博客,来分享一个简易计算器的代码.作为一名准程序员,就是要多写代码才能孰能生巧.重视基础知识才能飞的更快更高以及更稳. 代码可能会写的很糟糕,不完美不安全之处希望发现的越多越好 c#编写计算器 ...

  7. mini dc与简易计算器 20165235

    mini dc 任务内容 本次mini dc任务就是通过补充代码来实现整型数据的后缀表达式计算 相关知识 通过利用堆栈这一先进后出的数据结构来实现后缀表达式的计算.通过Stack<Integer ...

  8. 《Java 程序设计》课堂实践项目-简易计算器

    <Java 程序设计>课堂实践项目简易计算器 课后学习总结 目录 改变 简易计算器实验要求 课堂实践成果 课后思考 改变 修改了博客整体布局,过去就贴个代码贴个图很草率,这次布局和内容都有 ...

  9. 大一C语言学习笔记（10）---编程篇--制作简易计算器，支持加，减，乘，除，取余运算，要求 0 bug

    博主自开学初就一直在努力为自己的未来寻找学习方向,学习编程嘛,尽量还是要抱大腿的,所以我就加入了我们学校的智能设备研究所,别的不说,那的学长们看起来是真的很靠谱,学长们的学习氛围也超级浓厚,所以我就打 ...

随机推荐

  1. python 文件移动

    python实现文件移动: import shutil shutil.move("original_path", "new_folder") # move fi ...

  2. python集合的交，差，并，补集合运算汇总

    集合操作实际用的不多,了解即可. 交集:          ( & 或者 intersection ) 并集:    ( | 或者 union ) 差集:   ( -  或者  differe ...

  3. keynote

    [keynote] 1.如何保证文档加载完才运行代码? 2.元素选择器. 3.属性选择器. 4.更新css. 5.更复杂的例子. 6.常用事件. 7.hide & slow 8.您可以使用 t ...

  4. mysql异常

    一.Can't connect to MySQL server on 'localhost' (10061)翻译:不能连接到 localhost 上的mysql分析:这说明“localhost”计算机 ...

  5. 通过Chrome的inspect对手机webview进行调试

    使用chrome的inspect可以对手机上的webview进行调试,因为真机没有什么比较好的调试工具,而chrome提供了这一个工具可以比较方便的查看真机上的元素,以及进行调试. 其实我对webvi ...

  6. sqlserver批量导出存储过程、函数、视图

    select text from syscomments s1 join sysobjects s2 on s1.id=s2.id  where xtype = 'V' xtype V   视图 P  ...

  7. 'org.springframework.beans.factory.xml.XmlBeanFactory' is deprecated

    'org.springframework.beans.factory.xml.XmlBeanFactory' is deprecated XmlBeanFactory这个类已经被摒弃了.可以用以下代替 ...

  8. 42. Trapping Rain Water (Array，stack; DP)

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  9. 图片添加热点MAP之后连接无效的解决方法

    好些接触网店的同事都会遇到这个问题:就是明明给图片添加了热点超链接,但是点击图片就是没反应. 其实这个问题就是热点冲突,也就是说这个页面中至少有2个名称相同的热点导致热点冲突无法正确加载. 谷歌浏览器 ...

  10. 【校招面试 之 C/C++】第19题 C++ STL(一)

      容器名称 说明 vector 典型的序列容器,C++标准严格要求次容器的实现内存必须是连续的,唯一可以和标准C兼容的stl容器,任意元素的读取.修改具有常数时间复杂度,在序列尾部进行插入.删除是常 ...