javascript编写简易计算器

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

界面：

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

# js # 计算器 # JavaScript制作简易计算器（不用eval） # 简易js代码实现计算器操作 # js实现简单计算器 # 用JS写的简单的计算器实现代码 # javascript-简单的计算器实现步骤分解(附图) # 网页计算器一个JS计算器 # js网页版计算器的简单实现 # 纯javascript代码实现计算器功能(三种方法) # html+js实现简单的计算器代码(加减乘除) # 基于JSP实现一个简单计算器的方法 # JavaScript实现一个简易的计算器实例代码 # 大家分享 # 具体内容 # 大家多多 # auto # background # height # content # padding # width # px # border # radius # toptext # solid # shadow # box # margin # xhtml # brush # lt

返回目录在线咨询

上一篇：如何在Golang中实现并发日志聚合_Golang日志合并与异步输出
下一篇：建站最便宜：如何选择性价比最高的主机服务？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

javascript编写简易计算器

您的项目需求