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

随机推荐

npm 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
span width不起作用，border 无效
span属于内联元素,因此width对内联元素不起作用. 需要设置display:inline-block;使其成为内联级块级元素: border不起作用,主要是未设置border-style:sol ...
event bManualResult
MSDN: bManualReset [in] If this parameter is TRUE, the function creates a manual-reset event object, ...
python限制函数执行时间
from:https://stackoverflow.com/questions/366682/how-to-limit-execution-time-of-a-function-call-in-py ...
JSP共享javabean
JavaBean是一种可重复使用,且跨平台的软件组件.JavaBean可分为两种:一种是有用户界面(UI)的javaBean:还有一种是没有用户界面,主要负责处理事务(如数据运算,操纵数据库)的jav ...
jquery 显示隐藏
参考 http://www.w3school.com.cn/jquery/jquery_hide_show.asp $("#a").hide(); $("#a" ...
把Excel导入SQL server时出现错误
在把Excel导入SQL server时出现“未在本地计算机上注册 Microsoft.ACE.OLEDB.12.0 ”该错误信息:未在本地计算机上注册“microsoft.ACE.oledb.12 ...
python的range函数与切片操作符
range(start,stop,step)参数含义:start:计数从start开始.默认是从0开始.例如range(5)等价于range(0, 5);end:计数到end结束,但不包括end.例如 ...
使用生活实例理解Asp.net运行时
学习编程语言,掌握面向对象的编程思想尤为重要,一旦理解了面向对象的这种概念,那么好些地方拿到生活中去理解,就容易的多了.书本上的枯燥干涩的语言,对于好多人来说,即难懂,更难长时间牢牢记得.但是编程语言 ...
Redis网络协议
Redis网络协议较为简单,易于阅读. 命令或数据已\r\n结尾,但除了状态回复,其他数据都是二进制安全的(包含长度) 头部如下: + 正确的状态信息,具体信息是当前行+后面的字符. - 一条错误信 ...