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 extend()详解及简单实例
May 06 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery实现聊天机器人
Feb 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
如何去掉文章里的 html 语法
2006/10/09 PHP
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
质量负责人任命书
2014/06/06 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
楚门的世界观后感
2015/06/03 职场文书
签约仪式致辞
2015/07/30 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
导游词之河北野三坡
2019/12/11 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
Python 图片添加美颜效果
2022/04/28 Python
Django框架中模型的用法
2022/06/10 Python
hive数据仓库新增字段方法
2022/06/25 数据库