JavaScript實現簡易計算器案例

Posted on by

本文實例為大傢分享瞭JavaScript模仿windows計算器，供大傢參考，具體內容如下

功能：

1、實現單機按鈕錄入數字
2、實現基礎四則運算功能，並添加必要的異常處理，例如，除數為0
3、實現小數點功能並添加異常處理：小數點隻能出現一次
4、實現正負號功能
5、實現退位功能，已經是最後一位時，顯示框顯示為0
6、清屏功能

項目原型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../index.css/index.css" >
  <script type="text/javascript" src="../index.js/index.js"></script>
  <script type="text/javascript" src="../index.js/index1.js"></script>
</head>
<body onload="jiazai(),o()">
  <div class="div1">
    <div class="div2">
      <input type="text" name="num" id="num">
    </div>
    <div class="div3">
      <input type="button" value="c">
      <input type="button" value="←">
      <input type="button" value="+/-">
      <input type="button" value="/">
      <input type="button" value="1">
      <input type="button" value="2">
      <input type="button" value="3">
      <input type="button" value="*">
      <input type="button" value="4">
      <input type="button" value="5">
      <input type="button" value="6">
      <input type="button" value="-">
      <input type="button" value="7">
      <input type="button" value="8">
      <input type="button" value="9">
      <input type="button" value="+">
      <input type="button" value="0">
      <input type="button" value=".">
      <input type="button" value="=">
      <input type="button" value="d" id="baidu">
    </div>
  </div>
</body>
</html>
*{
  margin: 0;
}

.div1{
  /*width: 170px;*/
  position: absolute;
  top: 60px;
  left: 200px;
  margin-left: 5px;
}

.div1 .div2 input{
  width: 170px;
  text-align: right;
  background-color: white;
  border:1px solid black; 
  padding-right: 10px;
  box-sizing: border-box;
}

.div1 .div3 input{
  width: 35px;
  margin-right: 5px;
  margin-top: 5px;
  
}
.div1 .div3{
  width: 190px;
}

.div1 .div3 input:hover{
  background-color: #abcdef;
  border:1px solid black;
  border-radius: 5px;
}

小數點功能的實現

1、小數點隻能出現一次
2、再小數點case這裡直接函數調用
3、技術點：indexof()，查找字符是否存在，存在的話返回大於0，不存在的話返回-1

//小數點
function xiaoshu(n){
  if (n.indexOf('.')==-1) {
    num.value=n+'.';
  }else{
    num.value=n;
  }
}

    case '.':
    xiaoshu(num.value);
    break;  
1

進行非數字和數字的判斷

回退鍵的實現

需求：將文本框中的最後一個字符刪掉後，保留文本框中的其他內容
1、文本框裡面有123，按下退位鍵保留12 ， 再次按下保留1
2、當文本框內隻剩下1的時候，再次按下退位鍵，文本框恢復到默認狀態0

正負號

1、輸入123，第一次單機添加 “-” ，再次單機顯示+
2、如果數字前面有符號那就取消，沒有符號就加上，類似開關按鈕

JS代碼

function jiazai(){
  //獲取文本框的ID
  var num = document.getElementById('num');
  //在腳本中設置input文本框的value值為0
  num.value = '0';
  //設置input文本框為不可選中狀態
  num.disabled = 'disabled';
  //獲取標簽名為input的所有標簽
  var btn = document.getElementsByTagName('input');
  var xin;//定義一個接受新的值
  var bb;//定義一個符號判斷給=，具體用來+-*/
  for(var i=0;i<btn.length;i++){
    //給input所有按鈕綁定 onclick事件
    btn[i].onclick = function(){
      //判斷如過是數字
      if (isNumber(this.value)) {
        if (isNull(num.value)) {
          num.value = this.value;
        }else{
          num.value = num.value+this.value;
        }
      }//否則，如果是非數字的話
      else{
        //獲取非數字
        var feishuzi = this.value;
        //多條件分支判斷
        switch(feishuzi){
          case '+':
          xin = Number(num.value);
          num.value = 0;
          bb ='+';
          break;
          case '-':
          xin = Number(num.value);
          num.value = 0;
          bb ='-';
          break;
          case '*':
          xin = Number(num.value);
          num.value = 0;
          bb ='*';
          break;
          case '/':
          xin = Number(num.value);
          num.value = 0;
          bb ='/';
          break;
          case 'c':
          num.value = 0;
          break;
          case '←':
          num.value = fn(num.value);
          break;
          case '+/-':
          num.value =sign(num.value);
          break;
          case '.':
          xiaoshu(num.value);
          break;
          case '=':
          switch(bb){
            case '+':
            num.value = xin+Number(num.value);
            break;
            case '-':
            num.value = xin-Number(num.value);
            break;
            case '*':
            num.value = xin*Number(num.value);
            break;
            case '/':
            if (Number(num.value)==0) {
              alert('除數不能為0');
              num.value = 0;
            }else{
              num.value = xin/Number(num.value);
            }
            break;
          }
          break;
        } 
      }
    }
  }
}


//判斷是否是數字，或者非數字
function isNumber(n){
  if (!isNaN(n)) {
    return true;
  }else{
    return false;
  }

}

var  btn = document.getElementsByTagName('input');
//判斷內容是否為空
function isNull(n){
  if (n=='0' || n.length==0) {
    return true;
  }else{
    return false;
  }
}


//回退鍵定義函數
function fn(c){
  c=c.substr(0,c.length-1)
  if (isNull(c)) {
    c= 0;
  }
  return c;
}


//正負號定義函數
function sign(n){
  n=Number(n)*(-1);
  return n;
}


//小數點
function xiaoshu(n){
  if (n.indexOf('.')==-1) {
    num.value=n+'.';
  }else{
    num.value=n;
  }
}

計算器的細節收尾

1、鼠標指針懸浮再按鈕上希望加上背景
2、鼠標單機d打開百度
3、0和邊框右側距離有點大。

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

推薦閱讀：