jQuery實現(xiàn)計算器功能

更新時間：2020年10月19日 11:47:33 作者：willard_cui

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)計算器功能的具體代碼，供大家參考，具體內容如下

動畫效果：

<!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的數(shù)據(jù)
    //獲取輸入的數(shù)字
    $("#num input").click(function () {
      //先判斷#txt2中是否保存著上次計算的結果，如果是則將其清空
      if (i===1){
        $("#txt2").text("");
        }
      //保證數(shù)字以正確的格式顯示
      //使用switch語句實現(xiàn)
      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語句實現(xiàn)
         /* 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()函數(shù)
      //$("#txt2").text(eval($("#txt1").text()+$("#txt2").text()));
       //使用常規(guī)方法
       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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: