JavaScript 簡單計算器效果

admin發表於2017-04-15
JavaScript

分享一個非常簡單的計算器效果，它能夠實現簡單的運算功能。

主要目的是學習一下相關的JavaScript基礎知識，本站還有更多的計算器功能的程式碼，可以在特效程式碼板塊中查詢。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box {
  width: 300px;
  height: 350px;
  background: greenyellow;
  overflow: hidden;
}
#int {
  width: 250px;
  display: block;
  border: 0px;
  height: 50px;
  background-color: #fff;
  margin: 20px auto 20px auto;
  font-size: 24px;
  color: greenyellow;
  text-align: right;
  padding-right: 10px;
}
#box-div {
  width: 280px;
  margin: 0 auto;
}
.box-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.box-li {
  width: 50px;
  height: 50px;
  margin-left: 15px;
  background: #f5f5f5;
  color: yellowgreen;
  list-style: none;
  float: left;
  margin-bottom: 10px;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
  <input type="text" id="int" value="0">
  <div id="box-div">
    <ul class="box-ul">
      <li class="box-li" value="7">7</li>
      <li class="box-li" value="8">8</li>
      <li class="box-li" value="9">9</li>
      <li class="box-li" value="+">+</li>
      <li class="box-li" value="4">4</li>
      <li class="box-li" value="5">5</li>
      <li class="box-li" value="6">6</li>
      <li class="box-li" value="-">-</li>
      <li class="box-li" value="1">1</li>
      <li class="box-li" value="2">2</li>
      <li class="box-li" value="3">3</li>
      <li class="box-li" value="*">*</li>
      <li class="box-li" value="0">0</li>
      <li class="box-li" value="c">c</li>
      <li class="box-li" value="=">=</li>
      <li class="box-li" value="/">/</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
(function() {
  var sNum1 = '';
  var sOpt = '';
  var bNeedClear = false; //是否要清除輸入框的內容
  var boxDiv = document.getElementById("box-div"),
    boxLi = boxDiv.getElementsByTagName("li");
  for (var i = 0; i < boxLi.length; i++) {
    boxLi[i].onclick = doInput;
  }
 
  function doInput() {
    var int = document.getElementById("int");
    var sHtml = this.innerHTML.replace("", "");
    switch (sHtml) {
      case "=":
        int.value = result(parseInt(sNum1), parseInt(int.value), sOpt);
        sNum1 = '';
        sOpt = '';
        bNeedClear = true;
        break;
      case "+":
      case "-":
      case "*":
      case "/":
        bNeedClear = true;
        if (sNum1.length != 0) {
          int.value = result(parseInt(sNum1), parseInt(int.value), sOpt);
        }
        sOpt = sHtml;
        sNum1 = int.value;
        break;
      case 'c':
        int.value = '0';
        sNum1 = '';
        sOpt = '';
        break;
      default: //數字
        if (bNeedClear) {
          int.value = parseInt(sHtml, 10);
          bNeedClear = false;
        } else {
          int.value = parseInt(int.value + sHtml, 10);
        }
        break;
    }
  }
 
  function result(num1, num2, sOpt) {
    var res = 0;
    switch (sOpt) {
      case "+":
        res = num1 + num2;
        break;
      case "-":
        res = num1 - num2;
        break;
      case "*":
        res = num1 * num2;
        break;
      case "/":
        res = num1 / num2;
        break;
      default:
        res = num2;
    }
    return res;
  }
})();
</script>
</body>
</html>

相關文章