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实现按比例缩放图片的方法
Apr 29 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现简易QQ聊天框
Feb 10 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php生成略缩图代码
2012/07/16 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php利用事务处理转账问题
2015/04/22 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
Python中的变量和作用域详解
2016/07/13 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python绘制圆柱体的方法
2018/07/02 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
傲盾软件面试题
2015/08/17 面试题
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
公司任命书模板
2014/06/06 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
质检员岗位职责
2015/02/03 职场文书
紧急迫降观后感
2015/06/15 职场文书
python编写五子棋游戏
2021/05/25 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android