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. C#--数组、字符与字符串--StringBuilder类、字符与字符串、字符及转义字符

    C#--数组 字符与字符串--StringBuilder类 字符与字符串 字符及转义字符

  2. 基于HttpClient的HttpUtils(后台访问URL)

    最近做在线支付时遇到需要以后台方式访问URL并获取其返回的数据的问题,在网络上g了一把,发现在常用的还是Apache的HttpClient.因为以经常要用到的原故,因此我对其进行了一些简单的封装,在此 ...

  3. uwsgi相关问题

    启动时报错: !!! no internal routing support, rebuild with pcre support !!!安装时 : sudo pip install uwsgi -I ...

  4. ArcGIS案例学习1_2

    ArcGIS案例学习1_2 联系方式:谢老师,135_4855_4328, xiexiaokui#qq.com 时间:第一天下午 案例1:矢量提取,栅格提取和坐标系投影变换 目的:认识数据类型 教程: ...

  5. MVC3 发布到IIS 7.5

    1.应用程序池采用集成模式(建议),.NET Framework版本为: .NET Framework4.0.30319. 2.确保ASP.NET MVC3已安装好,然后检查站点的处理程序映射,看是否 ...

  6. java script sleep synchronous

    function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { ...

  7. HTTP 和 Socket 区别

    要弄明白 http 和 socket 首先要熟悉网络七层:物 数 网 传 会 表 应,如图1 如图1 HTTP 协议:超文本传输协议,对应于应用层,用于如何封装数据. TCP/UDP 协议:传输控制协 ...

  8. shell获取函数的返回值

    背景:定义了一个函数,比对本地和线上服务器集群数量差别,想要获取不同集群的个数.shell和其他语言的函数返回值还是差别挺大的.   定义一个函数 functionname(){      操作内容 ...

  9. TZOJ 1840 Jack Straws(线段相交+并查集)

    描述 In the game of Jack Straws, a number of plastic or wooden "straws" are dumped on the ta ...

  10. 内部存储 openFileInputStream openFileOutputStream

    package com.qianfeng.gp08_day24_internalstorage; import java.io.FileInputStream; import java.io.File ...