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 控制文本框自动缩小字体填充
Jun 16 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 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
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
js单例模式的两种方案
2013/10/22 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
js实现转动骰子模型
2019/10/24 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
flask框架中的cookie和session使用
2021/01/31 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
个人近期表现材料
2014/02/11 职场文书
我的老师教学反思
2014/05/01 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
交通安全教育心得体会
2016/01/15 职场文书