javascript 計算器程式碼例項

antzone發表於2017-04-13

原文網址 : https://www.softwhy.com/article-6978-1.html

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
 <title>螞蟻部落</title>
<style>
body {
  background: #EECFA1;
  margin: 0;
  padding: 0;
}
/*其他資訊*/
.news {
  width: 500px;
  float: left;
  text-align: center;
}
/*大標題*/
.news h1 {
  margin-top: 300px;
}
/*檢視*/
#view {
  min-width: 1000px;
  width: 1000px;
  margin: 0 auto;
  font-size: 20px;
}
/*計算器*/
#calculator {
  width: 500px;
  float: left;
  width: 400px;
  height: 630px;
  margin-top: 20px;
  background: #000;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 20px 20px 20px rgba(0,0,0,0.3);
}
/*顯示器*/
#screen {
  width: 350px;
  height: 80px;
  margin: 30px auto;
  padding: 10px;
  background: #dcdfa8;
  border-radius: 10px;
}
/*兩行顯示區*/
.print {
  display: block;
  line-height: 30px;
  width: 320px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: #dcdfa8;
  font-size: 25px;
  font-weight: bold;
  text-align: right;
}
/*按鈕區域*/
#button {
  padding: 15px;
  height: 420px;
  width: 350px;
  background: #f3f8f0;
  margin: 0 auto;
  border-radius: 10px;
}
/*一行按鈕*/
ul {
  display: block;
  width: 350px;
  height: 80px;
  margin: 5px auto;
  padding: 0;
}
/*按鈕單列*/
li {
  display: inline-block;
}
/*普通按鈕樣式*/
.btn {
  display: inline-block;
  outline: none;
  float: left;
  width: 60px;
  height: 60px;
  background: #fc6422;
  border-radius: 10px;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
}
/*數字按鈕*/
.bt_number {
  background-color: #000;
}
/*佔兩格的按鈕*/
.bt_double {
  width: 128px;
}
/*清除按鈕*/
.bt_clear {
  background: #f00;
}
</style>
</head>
<body>
<!--視窗-->
<div id="view">
  <!--計算器-->
  <div id="calculator">
    <!--螢幕-->
    <div id="screen">
      <p id="expression" class="print"></p>
      <p id="answer" class="print"></p>
    </div>
    <!--end螢幕-->
    <!--按鈕-->
    <div id="button">
      <!--第一行--><!--double為雙目運算子，one為單目運算子-->
      <ul class="row">
        <li class="col">
          <input type="button" name="clear" class="btn bt_clear" value="C">
        </li>
        <li class="col">
          <input type="button" name="one" class="btn" value="sin">
        </li>
        <li class="col">
          <input type="button" name="one" class="btn" value="cos">
        </li>
        <li class="col">
          <input type="button" name="one" class="btn" value="√">
        </li>
        <li class="col">
          <input type="button" name="one" class="btn" value="1/">
        </li>
      </ul>
      <!--第二行-->
      <ul class="row">
        <li class="col"><input type="button" name="number" class="btn bt_number" value="7"></li>
        <li class="col"><input type="button" name="number" class="btn bt_number" value="8"></li>
        <li class="col"><input type="button" name="number" class="btn bt_number" value="9"></li>
        <li class="col"><input type="button" name="double" class="btn " value="*"></li>
        <li class="col"><input type="button" name="double" class="btn" value="%"></li>
      </ul>
      <!--第三行-->
      <ul class="row">
        <li class="col"><input type="button" name="number" class="btn bt_number" value="4"></li>
        <li class="col"><input type="button" name="number" class="btn bt_number" value="5"></li>
        <li class="col"><input type="button" name="number" class="btn bt_number" value="6"></li>
        <li class="col"><input type="button" name="double" class="btn" value="+"></li>
        <li class="col"><input type="button" name="double" class="btn" value="÷"></li>
      </ul>
      <!--第四行-->
      <ul class="row">
        <li class="col"><input type="button" name="number" class="btn bt_number" value="1"></li>
        <li class="col"><input type="button" name="number" class="btn bt_number" value="2"></li>
        <li class="col"><input type="button" name="number" class="btn bt_number" value="3"></li>
        <li class="col"><input type="button" name="double" class="btn" value="-"></li>
        <li class="col"><input type="button" name="double" class="btn" value="^"></li>
      </ul>
      <ul class="row">
        <li class="col"><input type="button" name="number" class="btn bt_number bt_double" value="0"></li>
        <li class="col"><input type="button" name="point" class="btn bt_number" value="."></li>
        <li class="col"><input type="button" name="is" class="btn bt_double" value="="></li>
      </ul>
    </div>
    <!--end按鈕-->
  </div>
  <!--end計算器-->
 </div>
<!--end視窗-->
<script>
var calculate = {
 
  input: "", //表示式
  answer: "", //結果
  num1: "", //運算元1
  num2: "", //運算元2
  operator: "", //操作符
  str: "", //當前按鈕獲取的
 
  /*開始函式*/
  init: function() {
    calculate.getExpression();
  },
  /*獲取表示式，根據點選按鈕呼叫其他函式*/
  getExpression: function() {
    var get = document.getElementById("button");
    get.addEventListener('click', function(e) { //
 
      calculate.str = e.target; //str是從按鈕獲得的值
 
      //根據按鈕顯示
      switch (true) {
 
        //點選空，無反應
        case calculate.str.value == null:
          break;
 
          //點選數字
        case calculate.str.name == "number":
          if (calculate.num1.length == 0) {
            calculate.num1 = calculate.str.value;
            calculate.input = calculate.num1;
          } else if (calculate.num1 == "0" || calculate.num2 == "0") { //數字不能以0開頭
            break;
          } else if (calculate.operator.length == 0 || calculate.num1 == "-") { //如果num1為空或負號，記錄數字到num1
            calculate.num1 = calculate.num1 + calculate.str.value;
            calculate.input = calculate.num1;
          } else if (calculate.operator.length != 0) { //如果操作符不為空，記錄數字到num2
            calculate.num2 = calculate.num2 + calculate.str.value;
            calculate.input = calculate.num1 + calculate.operator + calculate.num2;
          }
 
          calculate.showExpression();
          break;
 
          //點選小數點
        case calculate.str.name == "point":
          if (calculate.num1.length == 0) { //如果數字為空，顯示"0."
            calculate.num1 = "0.";
            calculate.input = calculate.num1;
          } else if (calculate.operator.length == 0) { //第一個數未記錄完
            if (parseInt(calculate.num1) == calculate.num1 && calculate.num1[calculate.num1.length - 1] != ".") { //且之前是整數，就顯示小數點
              calculate.num1 = calculate.num1 + calculate.str.value;
              calculate.input = calculate.num1;
            }
          } else if (calculate.operator.length != 0 && calculate.num2.length == 0) { //第二個運算元為空
            calculate.num2 = "0.";
            calculate.input = calculate.num1 + calculate.operator + calculate.num2;
          } else if (calculate.num2.length != 0) { //第二個運算元不為空
            if (parseInt(calculate.num2) == calculate.num2 && calculate.num2[calculate.num2.length - 1] != ".") { //且之前是整數，就顯示小數點
              calculate.num2 = calculate.num2 + calculate.str.value;
              calculate.input = calculate.num1 + calculate.operator + calculate.num2;
            }
          }
          calculate.showExpression();
          break;
 
          //點選單目運算子
        case calculate.str.name == "one":
          if (!isNaN(calculate.answer) && (calculate.answer.length != 0)) { //上次運算結果存在,answer不為空且是數字
            calculate.num1 = calculate.answer;
            calculate.operator = calculate.str.value;
            calculate.input = calculate.operator + calculate.num1 + "=";
            calculate.answer = "";
          } else if (calculate.num1.length == 0) { //num1為空,預設為0
            calculate.num1 = "0";
            calculate.operator = calculate.str.value;
            calculate.input = calculate.operator + calculate.num1;
            alert(calculate.input);
          } else {
            if (!isNaN(calculate.num1)) { //如果num1是數字
              calculate.operator = calculate.str.value;
              calculate.input = calculate.operator + calculate.num1 + "=";
            }
          }
          calculate.showExpression();
          calculate.getAnswer();
 
          break;
 
          //點選雙目運算子
        case calculate.str.name == "double":
          if (!isNaN(calculate.answer) && (calculate.answer.length != 0)) { //上次運算結果存在,answer不為空且是數字
            calculate.num1 = calculate.answer;
            calculate.operator = calculate.str.value;
            calculate.num2 = "";
            calculate.answer = "";
            calculate.input = calculate.num1 + calculate.operator;
          } else {
            if (calculate.num1.length != 0 && calculate.num2.length == 0) { //如果num1不為空,num2為空
              calculate.operator = calculate.str.value;
              calculate.input = calculate.num1 + calculate.operator;
            } else if (!isNaN(calculate.num1) && !isNaN(calculate.num2) && calculate.operator.length != 0) { //當做等號使用
              calculate.input = calculate.num1 + calculate.operator + calculate.num2 + "=";
              calculate.getAnswer();
              calculate.num1 = calculate.answer;
              calculate.operator = calculate.str.value;
              calculate.num2 = "";
              calculate.answer = "";
              calculate.input = calculate.num1 + calculate.operator;
            }
          }
          calculate.showExpression();
          calculate.showAnswer();
          break;
 
          //點選等號時才計算
        case calculate.str.name == "is":
          if (!isNaN(calculate.num1) && !isNaN(calculate.num1) && calculate.operator != null) { //各個部分合法
            calculate.input = calculate.num1 + calculate.operator + calculate.num2 + "=";
            calculate.getAnswer();
          }
          calculate.showExpression();
          break;
 
          //點選清除按鈕
        case calculate.str.name == "clear":
          calculate.clearScreen();
          break;
 
          //其他情況
        default:
          calculate.clearScreen();
          break;
      }
    });
  },
 
  /*單目運算函式*/
  _OperatorOne: function() {
    //alert(num+operator);
    if (isNaN(calculate.num1)) { //如果num不是數字
      calculate.answer = "ERROR!";
    } else {
      switch (calculate.operator) {
        case "sin":
          calculate.answer = Math.sin(calculate.num1);
          break;
        case "cos":
          calculate.answer = Math.cos(calculate.num1);
          break;
        case "√":
          if (calculate.num1 >= 0) {
            calculate.answer = Math.sqrt(calculate.num1);
          } else {
            calculate.answer = "負數不能開平方根！";
          }
          break;
      }
    }
  },
  /*雙目運算函式*/
  _OperatorDouble: function() {
    //alert(num1+operator+num2);
    if (isNaN(calculate.num1) || isNaN(calculate.num1)) { //如果num不是數字
      calculate.answer = "ERROR!";
    } else {
      switch (calculate.operator) {
        case "+":
          calculate.answer = Number(calculate.num1) + Number(calculate.num2);
          break;
        case "-":
          calculate.answer = Number(calculate.num1) - Number(calculate.num2);
          break;
        case "*":
          calculate.answer = calculate.num1 * calculate.num2;
          break;
        case "÷":
        case "/":
          if (calculate.num2 == 0) {
            calculate.answer = "除數不能為0";
            //alert(calculate.answer);
            break;
          } else {
            calculate.answer = calculate.num1 / calculate.num2;
          }
          break;
        case "%":
          calculate.answer = calculate.num1 % calculate.num2;
          break;
        case "^":
          calculate.answer = Math.pow(calculate.num1, calculate.num2);
          break;
      }
    }
  },
  /*計算總函式*/
  getAnswer: function() {
    //alert(calculate.operator);
    calculate.input = calculate.input.substring(0, calculate.input.length - 1); //去掉等於號的表示式
 
    if (!isNaN(calculate.input)) { //如果input是數字直接顯示答案
      calculate.answer = calculate.input;
    } else {
      switch (calculate.operator) {
        case "sin":
        case "cos":
        case "√":
          calculate._OperatorOne(); //呼叫單目運算函式
          break;
        case "1/":
          calculate.num2 = calculate.num1;
          calculate.num1 = 1;
          calculate.operator = "/";
        case "+":
        case "-":
        case "%":
        case "÷":
        case "^":
        case "*":
          if (calculate.num2.length == 0) { //如果num2為空，預設為0
            calculate.num2 = "0";
            calculate.input = calculate.num1 + calculate.operator + calculate.num2;
            calculate.showExpression();
          }
          calculate._OperatorDouble();
          break;
      }
    }
    calculate.showAnswer(); //顯示答案
  },
 
  /*顯示錶達式*/
  showExpression: function() {
    if (calculate.input.length >= 25) { //如果長度溢位
      calculate.input = "長度溢位 請按C清除！";
    }
    var screen = document.getElementById("expression"); //顯示結果
    screen.innerHTML = calculate.input;
 
  },
 
  /*顯示結果*/
  showAnswer: function() {
    if (calculate.answer.length >= 25) { //如果長度溢位
      calculate.answer = "長度溢位 請按C清除！";
    } else if (!isNaN(calculate.answer) && calculate.answer.length != 0) { //結果為數字,且不為空
      if (parseInt(calculate.answer) != calculate.answer) { //如果是小數
        calculate.answer = Number(calculate.answer).toFixed(5); //精確2位
        calculate.answer = parseFloat(calculate.answer);
      }
    }
    var screen = document.getElementById("answer"); //顯示結果
    screen.innerHTML = calculate.answer;
  },
  /*清屏*/
  clearScreen: function() {
    calculate.input = "";
    calculate.answer = "";
    calculate.num1 = "";
    calculate.num2 = "";
    calculate.operator = "";
    calculate.showAnswer();
    calculate.showExpression();
  }
};
/*自執行*/
calculate.init();
</script>
</body>
</html>

原生javascript開發計算器例項
2021-02-21
JavaScript
JavaScript倒數計時程式碼例項
2018-06-29
JavaScript
JavaScript in運算子程式碼例項
2018-07-12
JavaScript
JavaScript運動框架程式碼例項
2018-07-02
JavaScript框架
JavaScript取餘數程式碼例項
2018-08-02
JavaScript
JavaScript 阻止事件冒泡程式碼例項
2019-05-02
JavaScript事件
JavaScript簡單計算器程式碼分析
2018-07-02
JavaScript
JavaScript陣列合並程式碼例項
2018-05-21
JavaScript陣列
JavaScript 表單驗證程式碼例項
2019-03-26
JavaScript
設計模式例項程式碼
2020-10-04
設計模式
JavaScript刪除元素節點程式碼例項
2018-07-07
JavaScript
JavaScript中常用的事件程式碼及例項
2021-04-21
JavaScript事件
好程式設計師web前端分享在HTML中使用JavaScript例項程式碼
2019-07-31
程式設計師Web前端HTMLJavaScript
前端學習程式碼例項-JavaScript阻止事件冒泡
2019-04-30
前端JavaScript事件
JavaScript隨滑鼠晃動的div塊程式碼例項
2018-05-22
JavaScript
JavaScript讀取文字檔案內容程式碼例項
2018-06-12
JavaScript
前端學習程式碼例項-JavaScript 生成隨機數
2019-04-30
前端JavaScript隨機
canvas繪製機器貓程式碼例項
2018-05-13
Canvas
JavaScript 點選複製選中文字程式碼例項
2019-05-14
JavaScript
解析JavaScript設計模型Iterator例項
2020-03-22
JavaScript模型
C# 位運算及例項計算
2019-07-07
C#
dom操作程式碼例項
2018-05-25
css梯形程式碼例項
2018-05-20
CSS
物件導向的例項應用：圖形計算器
2019-02-16
物件
table表格美化程式碼例項
2018-04-03
商品搶購倒數計時效果程式碼例項
2018-07-09
網頁倒數計時跳轉程式碼例項
2018-06-29
網頁
KafKa Java程式設計例項
2018-05-28
KafkaJava程式設計
Jmeter beanshell程式設計例項
2021-02-23
JMeterBean程式設計
JavaScript 例項屬性
2018-12-15
JavaScript
純css tab選項卡程式碼例項
2018-09-11
CSS
jQuery tab選項卡效果程式碼例項
2018-08-05
jQuery
JavaScript 計算程式碼執行花費時間
2018-12-27
JavaScript
微控制器C程式設計例項指導pdf
2018-08-02
C程式程式設計
前端學習程式碼例項-JavaScript 阻止擊超連結的跳轉
2019-04-30
前端JavaScript
函式計算支援 MySQL 例項繫結
2020-03-04
函式MySql
canvas刮刮樂程式碼例項
2018-07-06
Canvas
canvas載入效果程式碼例項
2018-07-09
Canvas
CSS空心箭頭程式碼例項
2018-07-17
CSS

javascript 計算器程式碼例項

相關文章