HTML+CSS+JavaScript如何制作简易计算器

HTML+CSS+JavaScript如何制作简易计算器？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

在大厂等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、网站设计 网站设计制作按需开发,公司网站建设,企业网站建设,成都品牌网站建设,全网营销推广,外贸网站建设,大厂网站建设费用合理。

实例描述：用HTML和CSS搭建页面，用JavaScript实现加减乘除的功能，当点击清零时，输入框没有值，当点击“=”时，显示计算结果，具体代码如下：

HTML部分：

   
计算器
   
   

    
    
     

    
    
    
    
     

    
    
    
    
     

    
    
    
    
     

    
    
       
    
   
  

CSS部分：

* {
    border: none;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
   }   
   .center {
    background-color: #fff;
    border-radius: 50%;
    height: 600px;
    margin: auto;
    width: 600px;
   }
   h2 {
    color: #495678;
    font-size: 30px; 
    margin-top: 20px;
    padding-top: 50px;
    display: block;
    text-align: center;
   }   
   form {
    background-color: #495678;
    margin: 40px auto;
    padding: 40px 0 30px 40px; 
    width: 280px;
   }
   .btn {
    outline: none;
    cursor: pointer;
    font-size: 20px;
    height: 45px;
    margin: 5px 0 5px 10px;
    width: 45px;
   }
   .btn:first-child {
    margin: 5px 0 5px 10px;
   }
   .btn, #display, form {
    border-radius: 25px;
   }
   #display {
    outline: none;
    background-color: #98d1dc;
    color: #dededc;
    font-size: 20px;
    height: 47px;
    text-align: right;
    width: 165px;
    padding-right: 10px;
    margin-left: 10px;
   }
   .number {
    background-color: #72778b;
    color: #dededc;
   }
   .number:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }
   .operator {
    background-color: #dededc;
    color: #72778b;
   }
   .operator:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }
   .other {
    background-color: #e3844c;
    color: #dededc;
   }
   .other:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }

JavaScript部分：

/* limpa o display */ 
  document.getElementById("clear").addEventListener("click", function() {
   document.getElementById("display").value = "";
  });
  /* recebe os valores */
  function get(value) {
   document.getElementById("display").value += value; 
  }   
  /* calcula */
  function calculates() {
   var result = 0;
   result = document.getElementById("display").value;
   document.getElementById("display").value = "";
   document.getElementById("display").value = eval(result);
  };

效果如图所示：

关于HTML+CSS+JavaScript如何制作简易计算器问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。