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()与工具方法、实例方法详解
Mar 30 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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插件实现轮播图效果
Oct 19 #jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
You might like
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python多进程实现文件下载传输功能
2018/07/28 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
本科毕业生自我鉴定
2013/11/02 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
公司培训欢迎词
2014/01/10 职场文书
小学数学课题方案
2014/06/15 职场文书
会计工作总结范文2014
2014/12/23 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
婚庆司仪开场白
2015/05/29 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers