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实现简单实用的轮播器
May 23 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现的放大镜效果示例
Feb 24 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四种基础算法代码实例
2013/10/29 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
Python断言assert的用法代码解析
2018/02/03 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
家长会演讲稿范文
2014/01/10 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
培训研修方案
2014/06/06 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
2014年督导工作总结
2014/11/19 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技