用jQ实现一个简易计算器

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实现一个简易计算器的更多相关文章

前端 JavaScript 实现一个简易计算器
前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...
如何使用Java AWT 创建一个简易计算器
摘要:手把手教你使用 Java AWT 创建一个简易计算器. 本文分享自华为云社区<手把手教你使用 Java AWT 创建一个简易计算器>,作者:海拥 . 关于AWT AWT (抽象窗口工 ...
Python之实现一个简易计算器
自己动手写计算器一.功能分析用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...
制作一个简易计算器——基于Android Studio实现
一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成计算器的布局事件(即计算器上的按钮.文本框)监听实现计算 2. 详细解释假设我们的项目名为Calcula ...
java 实现一个简易计算器
import java.util.Scanner;public class Test { public static void main(String[] args) { count(); } pub ...
C#Windows Form简易计算器实现（上）
第一次写博客,来分享一个简易计算器的代码.作为一名准程序员,就是要多写代码才能孰能生巧.重视基础知识才能飞的更快更高以及更稳. 代码可能会写的很糟糕,不完美不安全之处希望发现的越多越好 c#编写计算器 ...
mini dc与简易计算器 20165235
mini dc 任务内容本次mini dc任务就是通过补充代码来实现整型数据的后缀表达式计算相关知识通过利用堆栈这一先进后出的数据结构来实现后缀表达式的计算.通过Stack<Integer ...
《Java 程序设计》课堂实践项目-简易计算器
<Java 程序设计>课堂实践项目简易计算器课后学习总结目录改变简易计算器实验要求课堂实践成果课后思考改变修改了博客整体布局,过去就贴个代码贴个图很草率,这次布局和内容都有 ...
大一C语言学习笔记（10）---编程篇--制作简易计算器，支持加，减，乘，除，取余运算，要求 0 bug
博主自开学初就一直在努力为自己的未来寻找学习方向,学习编程嘛,尽量还是要抱大腿的,所以我就加入了我们学校的智能设备研究所,别的不说,那的学长们看起来是真的很靠谱,学长们的学习氛围也超级浓厚,所以我就打 ...

随机推荐

as3 中 final 修饰符
现在,在ActionScript 3.0的修饰符中,只有final修饰符没有介绍.之所有放在这里介绍,是因为final修饰符只与继承有关,指定一个方法不能被重写或一个类不能被继承. 一般来说,当用fi ...
UI5-文档-4.21-Data Types
发票清单已经很好看了,但是没有指定价格的发票是什么?通常价格以技术格式存储,并带有'.数据模型中的分隔符.例如,我们的菠萝发票上的计算价格是87.2,没有货币.我们将使用SAPUI5数据类型正确地格式 ...
U3D游戏运行时资源是如何从AB中加载出来的
以安卓为例 1,游戏启动,自定义版本管理器去安卓的持久化目录下查找我们自定久的版本管理文件 rep.db,若该文件不存在,说明这是游戏第一次启动,于是就把streammingAssets下的LUA文件 ...
Javascript系列：总体理解
js是一个脚本客户端(浏览器)语言.和sql html类似.多练习. 没有排错的经验,弱类型语言,浏览器解释执行,出错也不会报错预备 <!DOCTYPE html PUBLIC "- ...
C++的空指针、野指针和指针赋值NULL.md
1.空指针和野指针 http://blog.csdn.net/fu_zk/article/details/21030607 空指针常量一个表示0值的整数常量,叫做空指针常量.例如:0.0L.1-1( ...
CentOS7使用yum详细搭建zabbix3.2过程
本文引用于:http://blog.csdn.net/s3275492383/article/details/62417210 一.准备搭建环境: 1.系统:CentOS7 2.默认有使用linux服 ...
ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效
SQL语句: select * from (select distinct t2.issue,cashmoney from (select distinct issue from lot_gamepa ...
正向工程configuration配置连接
在执行正向工程的时候需要用到这个关键词里面的configure();方法, 这个方法有好几个重构, 都是参数不一样的, 也可以空着不写, 不写的话就会默认去找hibernate.cfg.xml这个文件 ...
关于number...的精度问题
一当数字的精度被定为number(3,2)时, 这时他能输入的数字整数部分只能是3-2=1位, 小数位如果不够会用0补齐, 超出的四舍五入保留3位小数. SQL> insert into t_ ...
Java学生信息增删改查（并没用数据库）
一个泛型的应用,Java版本增删改查,写的简陋,望批评指正 2016-07-02 很久前写的一个程序了.拿出来存一下,不是为了展示啥,自己用的时候还可以看看.写的很粗糙. import java.io ...