jQuery实现计算器功能


Posted in jQuery onOctober 19, 2020

本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下

动画效果:

jQuery实现计算器功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <script src="../jquery.min.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #calculator{
      margin: 50px auto;
      padding: 5px;
      width: 230px;
      height: 230px;
      background: rgb(190,210,224);
    }
    #screen{
      width: 230px;
      height: 60px;
      background: rgb(153,153,153);
      border-radius: 5px;
      text-align: right;
      overflow: hidden;
    }
    #txt1{
      height: 20px;
      padding-top: 10px;
      font-size: 10px;
    }
    #txt2{
      height: 30px;
      font-size: 20px;
    }
    #num{
      float:left;
      width: 130px;
    }
    #num input{
      width: 40px;
      height: 40px;
      margin-top: 3px;
    }
    #operator{
      float:right;
      width: 70px;
      height: 170px;
    }
    #operator input{
      width: 70px;
      height: 30px;
      margin-top: 4px ;
    }
    #converter{
      float:right;
      width: 70px;
      height: 170px;
    }
 
  </style>
</head>
<body>
<div id="calculator">
  <div id="screen">
    <p id="txt1"></p>
    <p id="txt2"></p>
  </div>
  <div id="workspace">
    <div id="num">
      <input type="button" value="7">
      <input type="button" value="8">
      <input type="button" value="9">
      <input type="button" value="4">
      <input type="button" value="5">
      <input type="button" value="6">
      <input type="button" value="1">
      <input type="button" value="2">
      <input type="button" value="3">
      <input type="button" value="C">
      <input type="button" value="0">
      <input type="button" value=".">
 
    </div>
    <div id="operator">
      <input type="button" value="+">
      <input type="button" value="-">
      <input type="button" value="*">
      <input type="button" value="/">
      <input type="button" value="=">
    </div>
 
 
  </div>
</div>
 
<script>
  $(function(){
     var i=0;//i为清空标志,i=1时需要清空#txt2的数据
    //获取输入的数字
    $("#num input").click(function () {
      //先判断#txt2中是否保存着上次计算的结果,如果是则将其清空
      if (i===1){
        $("#txt2").text("");
        }
      //保证数字以正确的格式显示
      //使用switch语句实现
      switch ($(this).val()){
         case "C":
           $("#txt2").text("");
           break;
         case ".":
           if ($("#txt2").text().indexOf(".") != -1) {
           break;
           }else{$("#txt2").append($(this).val());}
           break;
         default:
           if ($("#txt2").text() === "0") {
             $("#txt2").text($(this).val());
            }else{
              $("#txt2").append($(this).val());
            }
          }
          //使用if语句实现
         /* if ($(this).val()=="C"){
             $("#txt2").text(" ");
           } else {
            if ($("#txt2").text().indexOf(".") != -1) {
              if ($(this).val() == ".") {
               } else {
                 $("#txt2").append($(this).val());
               }
            } else if ($("#txt2").text() === "0") {
              if ($(this).val() === ".") {
              $("#txt2").append($(this).val());
              } else {
                $("#txt2").text($(this).val());
              }
             }else{
              $("#txt2").append($(this).val());
             }
             }*/
         i=0;//将清空标志设为0
     });
    //获取运算符
     $("#operator input:not(:last)").click(function () {
       $("#txt1").text($("#txt2").text()+$(this).val());
       $("#txt2").text("");
     });
     //按下“=”键进行计算
     $("#operator input").last().click(function () {
       //使用eval()函数
      //$("#txt2").text(eval($("#txt1").text()+$("#txt2").text()));
       //使用常规方法
       var str=$("#txt1").text();
       var n1=parseFloat(str);
       var n2=parseFloat($("#txt2").text());
       var cal=str[str.length-1];
       switch (cal){
         case "+":
           $("#txt2").text( n1+n2);
           break;
         case "-":
           $("#txt2").text( n1-n2);
           break;
         case "*":
           $("#txt2").text( n1*n2);
           break;
         case "/":
           $("#txt2").text( n1/n2);
           break;
         default: break;
       }
       $("#txt1").text( "");
       i=1;//将清空标志设为1
     });
  });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现推拉门效果
Oct 19 #jQuery
jQuery实现图片切换效果
Oct 19 #jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
jQuery插件实现图片轮播效果
Oct 19 #jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
详解python中的Turtle函数库
2018/11/19 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python中and和or如何使用
2020/05/28 Python
python递归函数用法详解
2020/10/26 Python
利用python进行文件操作
2020/12/04 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
学术会议邀请函范文
2014/01/22 职场文书
社区服务活动小结
2014/07/08 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2014会计年终工作总结
2014/12/20 职场文书
早会开场白台词大全
2015/06/01 职场文书
给领导敬酒词
2015/08/12 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers