HTML+CSS+JavaScript如何制作简易计算器-成都快上网建站

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如何制作简易计算器

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


当前名称:HTML+CSS+JavaScript如何制作简易计算器
链接分享:http://kswjz.com/article/gcchph.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流