jquery簡單計算機功能程式碼例項

antzone發表於2017-04-18
jQuery計算機

本章節分享一段程式碼例項，它實現了簡單的計算器功能。

能夠實現簡單的數學計算功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  padding: 0;
  margin: 0;
  font-family: "mircosoft yahei";
  font-size: 30px;
}
.warp {
  width: 500px;
  margin: 0 auto;
}
.top {
  box-sizing: border-box;
  width: 500px;
  height: 250px;
  background-color: #707070;
  border-radius: 30px 30px 0 0;
  box-shadow: inset 0 0 5px 15px rgba(0,0,0,0.6);
}
.topic {
  margin: 10px 0 0 30px;
}
.topic span:nth-child(1) {
  display: inline-block;
  padding: 10px 0 0 0;
  font-size: 28px;
  color: #ff6600;
  text-shadow: -1px -1px 0px #000,1px 1px #eee,1px 1px 0 #fff;
  vertical-align: bottom;
}
.topic span:nth-child(2) {
  padding: 5px 0 0 0;
  font-size: 28px;
  color: #3CB371;
  margin: -10px 0 0 30px;
  text-shadow: -1px -1px 0px #fff,1px 1px #333,1px 1px 0 #444;
}
.screen {
  width: 400px;
  height: 100px;
  background-color: #C5C1AA;
  border-radius: 20px;
  margin: 5px auto;
  border: 20px solid #C1CDC1;
  position: relative;
  overflow: hidden;
}
.screen .calculation {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
}
.screen .result {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 40px;
}
.right {
  right: 425px;
  transform: rotate(180deg);
}
.main {
  width: 500px;
  height: 520px;
  background-color: #8C8C8C;
  position: relative;
  top: -35px;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  border-radius: 20px 20px 50px 50px;
  align-content: flex-start;
  padding: 0 0 0 25px;
  box-shadow: inset 0 0 3px 15px rgba(0,0,0,.7),0 -15px 3px 0 rgba(0,0,0,0.7);
  box-sizing: border-box;
}
.main span:nth-child(1) {
  font-size: 28px;
  margin: 35px 0 0 20px;
  font-weight: 600;
  text-shadow: 0px 2px 2px #fff;
}
.open {
  width: 50px;
  height: 25px;
  background-color: #000;
  box-shadow: inset 0px 0px 3px 5px rgba(33,33,33,0.5),inset 0 0px 5px 5px rgba(33,33,33,.8);
  border-radius: 10px;
  margin: 40px 0 0px 40px;
  color: white;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
}
.close {
  width: 50px;
  height: 25px;
  background-color: #000;
  box-shadow: inset 0px 0px 3px 5px rgba(33,33,33,0.5),inset 0 0px 5px 5px rgba(33,33,33,.8);
  border-radius: 10px;
  margin: 40px 10px 0 20px;
  color: white;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
}
.num {
  width: 70px;
  height: 50px;
  background-color: #C5C1AA;
  box-shadow: inset 0 -5px 3px 2px rgba(0,0,0,0.4),
              inset 0 -2px 5px 0px rgba(0,0,0,.6),0 0 1px 1px rgba(0,0,0,.9),
              inset 0 2px 2px 0 rgba(255,255,255,.8);
  padding: 0 0 5px 0;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  margin: 20px 10px 10px 10px;
  color: white;
  cursor: pointer;
  transition: box-shadow 300ms ease;
}
.fun {
  width: 70px;
  height: 50px;
  box-shadow: inset 0 -2px 5px 3px rgba(33,33,33,.6),
              0 0 1px 1px rgba(0,0,0,.8), 
              inset 0 1px 2px 0 rgba(255,255,255,0.6);
  background-color: #000;
  border-radius: 12px;
  text-align: center;
  line-height: 50px;
  margin: 20px 10px 10px 10px;
  color: white;
  cursor: pointer;
}
.fun:active {
  box-shadow: inset 0 0 2px 1px rgba(73,73,73,.6),0 0 0 1px rgba(0,0,0,.6);
}
.special {
  position: absolute;
  bottom: 62px;
  right: 25px;
  width: 70px;
  height: 110px;
  background-color: #000;
  box-shadow: inset 0 0px 5px 3px rgba(73,73,73,.8),0 0 1px 1px rgba(0,0,0,.8);
  border-radius: 10px;
  text-align: center;
  line-height: 110px;
  margin: 20px 10px 10px 10px;
  color: white;
  cursor: pointer;
}
.num:active {
  box-shadow: inset 0 -2px 5px 1px rgba(0,0,0,0.6),0 0 1px 1px rgba(0,0,0, .8);
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
$(document).ready(function($) {
  var result = $("#result");
  var progress = $("#calculation");
  var open = $("#open");
  var close = $("#close");
  var data = [];
  var d_data = [];
  var inx = 0;
  var inx1 = 1;
  var link = "";
  var value = "";
  var show = "";
  var last = 0;
  var flag = 0;
  //開機
  open.bind("mousedown", function(event) {
      /* Act on the event */
      value = $(this).text();
      if (value == "NO") {
        result.text("0");
      }
      //遍歷按鍵
      $("#main div").each(function(index, el) {
        //觸發事件
        $(this).bind("mousedown", function() {
          value = $(this).text();
          // 判斷是否出清除鍵
          if (value == "AC") {
            result.text("0");
            initi();
          }
          //等號，清除，開機，關機，操作螢幕是不輸出的
          if (value != '=' && value != 'AC' && value != "NO" && value != "OFF") {
            show += value;
            check(show);
            progress.text(show);
          }
          //多個數字連載一起是需要合成一個陣列的
          if (!isNaN(value) || value == ".") {
            link += value;
  
          } else {
            //儲存數字
            data[inx] = Number(link);
            inx += 2;
            link = '';
            // 等號不計入符號陣列內
            if (value != '=') {
              //儲存符號
              data[inx1] = value;
              inx1 += 2;
            }
            //要求輸入且有倆個運算元
            if (inx >= 2 && value == "=") {
              handle(data);
              initi();
            }
            //儲存上一次結果
            if (flag == 1) {
              if (value == "M+" || value == "M-") {
                data[0] = last;
                flag = 0;
              }
            }
  
          }
  
  
        })
  
      });
      //判斷符號優先順序
  
  
      //判斷操作符號的匹配
      function handle(data) {
        for (var i = 1; i < data.length; i = i + 2) {
          switch (data[i]) {
            case "+":
            case "M+":
              once = add(data, i);
              last = once;
              break;
            case "-":
            case "M-":
              once = sub(data, i);
              last = once;
              break;
            case "*":
              once = mul(data, i);
              break;
            case "÷":
              once = div(data, i);
              break;
            case "%":
              once = remainder(data, i);
              break;
            case "+/-":
              once = mis(data, i);
              break;
            case "√":
              once = radical(data, i);
              break;
          }
        };
        flag = 1;
        result.text(once);
      }
      //初始到最初的狀態
      function initi() {
        inx = 0;
        inx1 = 1;
        progress.text("");
        link = '';
        show = '';
      }
      //進行對應符號的運算
      function add(data, index) {
        return data[index + 1] = data[index - 1] + data[index + 1];
      }
  
      function sub(data, index) {
        data[index + 1] = data[index - 1] - data[index + 1];
        return data[index + 1] = data[index + 1].toFixed(1);
      }
  
      function mul(data, index) {
        return data[index + 1] = data[index - 1] * data[index + 1];
      }
  
      function div(data, index) {
        return data[index + 1] = data[index - 1] / data[index + 1];
      }
  
      function remainder(data, index) {
        return data[index + 1] = data[index - 1] % data[index + 1];
      }
  
      function radical(data, index) {
        console.log(data[index + 1]);
        return data[index + 1] = Math.sqrt(data[index + 1]);
      }
  
      function mis(data, index) {
        return data[index + 1] = -data[index + 1];
      }
  
      //檢測輸入是否合法
      function check(show) {
        var i = 0;
        var j = 0;
        while (!isNaN(show[i]) && i < show.length) i++;
        while (isNaN(show[i]) && i < show.length && show[0] != "M" && show[0] != "√" &&
          show[i] != "/" && show[i] != "N" && show[i] != "O") {
          i++;
          j++;
          if (j > 1) {
            result.text("您的輸入不合法");
            initi();
            break;
          }
        }
      }
    })
    //關機操作
  close.mousedown(function(event) {
    /* Act on the event */
    result.text("");
    progress.text("");
  });
})
</script>
</head>
<body>
  <div class="warp">
    <div class="top">
      <!--文字顯示-->
      <div class="topic">
        <span>CASIO</span>
        <span>MS-80V</span>
      </div>
      <!--顯示器-->
      <div class="screen">
        <span class="calculation" id="calculation"></span>
        <span class="result" id="result"></span>
      </div>
      <!--按鍵區域-->
    </div>
    <div class="main" id="main">
      <span>AUTO POWER OFF</span>
      <div class="open" id="close">OFF</div>
      <div class="close" id="open">NO</div>
      <div class="fun">MC</div>
      <div class="fun">MR</div>
      <div class="fun">M-</div>
      <div class="fun">M+</div>
      <div class="fun">÷</div>
      <div class="fun">%</div>
      <div class="num">7</div>
      <div class="num">8</div>
      <div class="num">9</div>
      <div class="fun">*</div>
      <div class="fun">+/-</div>
      <div class="num">4</div>
      <div class="num">5</div>
      <div class="num">6</div>
      <div class="fun">-</div>
      <div class="fun">√</div>
      <div class="num">1</div>
      <div class="num">2</div>
      <div class="num">3</div>
      <div class="special ">+</div>
      <div class="num">0</div>
      <div class="fun">AC</div>
      <div class="num">0</div>
      <div class="num">.</div>
      <div class="fun">=</div>
    </div>
  </div>
</body>
</html>

相關文章