javascript编写简易计算器

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

本文实例为大家分享了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>

界面：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：简单实现jQuery弹幕效果
下一篇：JavaScript实现无穷滚动加载数据