jQuery实现计算器功能

2024-12-02 19:57:03

本文实例为大家分享了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计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=
jQuery实现的简单在线计算器功能

本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要清空上一数值 var num1 = 0;// 运算第一个数据 var num2 = 0;// 运算第二个数据 var cunChuValue = 0;// 存储的数值 $(function() { $(".number").click(f
jQuery实现计算器功能

本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"></script> <st
jquery实现计算器小功能

本文实例为大家分享了jquery实现计算器功能的具体代码,供大家参考,具体内容如下用jquery实现计算器对于我来说有三个难点 1.单纯的html页面,怎么实现计算2.显示屏用什么标签,又怎么把他显示出来3.要想实现删除,怎么把字符串最后一个字母删除解决 1.看了别人的计算器,我发现eval()可以实现这个目的eg: alert(eval(“3+5”));没错,会弹出 8.2.看了几个人的博客,都是用span元素节点当显示屏,通过jQuery的html()函数来实现把内容显示出来.3.有两个
jQuery实现简易计算器功能

jQuery制作一个简易计算器,供大家参考,具体内容如下页面效果: 源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8&quo
jQuery实现倒计时功能完整示例

本文实例讲述了jQuery实现倒计时功能.分享给大家供大家参考,具体如下: demo代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
js+css实现计算器功能

本文实例为大家分享了js+css实现计算器功能的具体代码,供大家参考,具体内容如下目前仅实现了最基础的运算功能 (因为是js的运算内核,有些小数点计算并不准确,懒得去做去小数点后几位的操作) 一.最终呈现的视图效果二.思路代码量有点多,没办法.一开始只是无聊随便写的,没有构思,越写到后面越冗杂,自己又不想重新推翻去写. 三.代码逻辑 <style> * { margin: 0; padding: 0; }
C#实现的简单整数四则运算计算器功能示例

本文实例讲述了C#实现的简单整数四则运算计算器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace 计算器 { public pa
Vue.js实现价格计算器功能

本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial
JS实现的简单四则运算计算器功能示例

本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!
PHP实现的简单在线计算器功能示例

本文实例讲述了PHP实现的简单在线计算器功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf8"> <title>简单的计算器(www.jb51.net)</title> </head> <body> <?php //如果用户单击了计算按

jQuery实现计算器功能

相关推荐

随机推荐