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

随机推荐

PuTTY免输密码自动登录Linux
1.使用PuTTY安装目录里的puttygen.exe工具.先点“生成(Generate)”,然后随意移动鼠标直到进度条填满,即可生成密钥公钥部分:把上边那一段文字全选->复制备用.(不要点击 ...
vue-cli 上手
1.cnpm install --global vue-cli 安装脚手架 2.vue init webpack baoge 创建 3.选择配置项 Project name (baoge): ---- ...
python 安装mysqldb组件
只能源码安装源码下载: http://sourceforge.net/projects/mysql-python/files/mysql-python/1.2.3/ http://sourcefor ...
webserive学习记录5-拦截器完成登陆校验
说说cxf中的拦截器,可以分为系统拦截器(如日志拦截器)和自定义拦截器,也可以分为出拦截器和入拦截器,也可以分为服务器拦截器和客户端拦截器. 下面将实现一个可以进行登陆验证的拦截器,其中用户名作为方法 ...
XSS学习小结
一.什么是XSS? XSS全称是Cross Site Scripting即跨站脚本,当目标网站目标用户浏览器渲染HTML文档的过程中,出现了不被预期的脚本指令并执行时,XSS就发生了. 这里我们主要注 ...
mongodb first
use [database] 使用数据库,新增文档后,数据库被自动创建 show dbs 显示所有数据库 db.[document].insert() 插入数据库例:db.persons.inser ...
delphi实现映射和断开网络驱动器
type TNetDiskMapper=class private FNetResource: TNetResource; FUserName,FPassWord:PWideChar; public ...
在spring MVC 中关于session失效的判断有一个类SessionStatus
SessionStatus status 表示的是当前Session的状态 status.isComplete()-->为true时,表示当前Session还未过期;-->false,表 ...
jQuery height()、innerHeight()、outerHeight()函数的区别详解
参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...
jenkins 自动构建gitlab项目
安装的plugin: - kubernetes:1.7.1 - workflow-aggregator:2.5 - workflow-job:2.21 - credentials-b ...