javascript編寫簡易計算器

2019-11-19 16:39:21

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了js簡易計算器的具體代碼，供大家參考，具體內容如下

代碼如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>簡易計算器</title> <style type="text/css">  *{   margin:0;   padding: 0;  }  .content{   width: 300px;   height: 400px;   margin: 50px auto;   background: #CBC6C6;   border:1px solid #139EB7;   box-shadow: -5px -5px 5px #565454;   border-radius: 15px;  }  #toptext{   width: 280px;   height: 50px;   margin: 10px auto;   margin-left: 9px;   line-height: 50px;   border-radius: 15px;   text-align: right;   font-size: 24px;   border: 1px #F0D711 solid;  }  .btns{   width: 280px;   height: 300px;   margin: 10px auto;  }  .btns input{   width: 50px;   margin: 10px;   height: 60px;   float: left;   font-size: 24px;   line-height: 60px;   border-radius: 10px;   transform-origin: left top;   background: linear-gradient(to right,#0df60d,red);  }  .btns input:hover{   background: linear-gradient(to left,#0df60d,red);   transform: rotate(15deg);  } </style></head><body> <div class="content">  <input type="text" id="toptext">  <div class="btns">   <input type="button" value="1" class="num">   <input type="button" value="2" class="num">   <input type="button" value="3" class="num">   <input type="button" value="+" class="jisuan">   <input type="button" value="4" class="num">   <input type="button" value="5" class="num">   <input type="button" value="6" class="num">   <input type="button" value="-" class="jisuan">   <input type="button" value="7" class="num">   <input type="button" value="8" class="num">   <input type="button" value="9" class="num">   <input type="button" value="*" class="jisuan">   <input type="button" value="0" class="num">   <input type="button" value="C" id="clear">   <input type="button" value="=" id="equals">   <input type="button" value="/" class="jisuan">  </div> </div> <script type="text/javascript">  var text = document.getElementsByTagName('input')[0];  var clear = document.getElementById('clear');  var equals = document.getElementById('equals');  var js = document.getElementsByClassName('jisuan');  var num = document.getElementsByClassName('num');  text.value = 0;  var tex = "";  var fuhao = "";  var firstNum = "";  var secondNum = "";  for(var i=0 ; i<num.length; i++){   num[i].onclick = function (){    if(fuhao){     text.value += this.value;     secondNum = this.value;    }else{     tex = tex+this.value;     firstNum = tex;     text.value = tex;    }   };  }  for(var j=0; j<js.length; j++){   js[j].onclick = function(){    fuhao = this.value;    text.value += this.value;    };    }  equals.onclick=function(){   switch (fuhao) {    case '+':     var res = firstNum*1 + secondNum*1;     break;    case '-':     var res = firstNum - secondNum;     break;    case '*':     var res = firstNum * secondNum;     break;    case '/':     var res = firstNum / secondNum;     break;       default:     break;   }   text.value = res;   tex = "";   fuhao = "";   firstNum = "";   secondNum = "";  }  clear.onclick = function(){   text.value = "";  } </script></body></html>

界面：