×

用JS来模拟下计算器DEMO功能

作者:天空2019.06.10来源:Web前端之家浏览:1645评论:0
关键词:js计算器

用JS来模拟下计算器DEMO功能,看下效果图:

image.png

源码基于javascript,不多说了,直接上源码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>计算器</title>
  <style>
      /*Basic reset*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font: 14px Arial,sans-serif;
}
html{
  height:100%;
  background-color:lightslategrey;
}

#calculator{
  margin: 15px auto;
  width:330px;
  height:400px;
  border: 1px solid lightgray;
  background-color:darkgrey;
  padding:15px;
}

/*LOGO*/
.LOGO{
  height:20px;

}
.LOGO .name{
  float:left;
  line-height:30px;
}
/*screen*/

#shuRu{
  margin-top:15px;
}
.screen{
  margin-top:5px;
  width:300px;
  height:40px;
  text-align: right;
  padding-right:10px;
  font-size:20px;
}

#keys{
  border:1px solid lightgray;
  height:223px;
  margin-top:25px;
  padding:8px;
}

#keys .last{
  margin-right:0px;
}
.footer{
  margin-top:20px;
  height:20px;
}

#keys button{
  float:left;
  width: 42px;
  height: 36px;
  text-align:center;
  background-color:lightgray;
  margin: 0 17px 20px 0;
  color: #000;
  border-top: 2px solid threedlinghtshadow;
}
  </style>
</head>
<body>
<div id="calculator">
  <div class="LOGO">
    <span class="name">简单的计算器</span>   
  </div>
  <div id="shuRu">
    <!--screen输入栏-->
    <div class="screen">
      <input type="text" id="screenName" name="screenName" class="screen" value="110">
    </div>
  </div>
  <div id="keys">
    <!-- operators and other keys -->
    <!--第一排-->
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>Back</button>
    <button style="margin-right:0px">C</button>
    <!--第二排-->
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>*</button>
    <button style="margin-right:0px">/</button>
    <!--第三排-->
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>+</button>
    <button style="margin-right:0px">-</button>
    <!--第四排-->
    <button>0</button>
    <button>00</button>
    <button>.</button>
    <button>%</button>
    <button style="margin-right:0px">=</button>
  </div>
  <div class="footer">
    <span class="aside">欢迎使用JavaScript计算器</span>     
  </div>
</div>
<script>
window.onload=function(){ 
  var clearNum = document.querySelector("#C");
  var monitor = document.querySelector("#screenName");
  var arr ="";
  var kids = document.getElementById("keys").getElementsByTagName("button"); 
  //清空
  monitor.value='';

 for (var i = 0; i < kids.length; i++) {
     kids[i].index =i;
     kids[i].onclick=function(){
        //清空
        if(this.innerText=='C'){
          arr='';
          monitor.focus();
        } 
        //退格
        else if(this.innerText=='Back'){
          arr=String(arr).slice(0,String(arr).length-1);          
        }
        //计算
        else if(this.innerText=='='){
            arr = eval(arr);
        } 
        //累加
        else{           
          arr += this.innerText;
        };
        //输出
        monitor.value = arr;
     };
   };
};
</script>
</body>
</html>


温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/js8283idfipweir.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    这个是以本地项目为GIT的例子,非线上,文章只是提供查找方法,仅供大家参考的。...

  • 访客

    艹你这个图别人能找到我信你个鬼还搞两托sb...

  • admin

    感谢反馈,这边Web前端文章很旧了,版面已修复....

  • 访客

    版面不美观,影响用户的体验...

  • 8j84

    LightningChart还是第一次听说,了解下。...

  • 动画制作

    很基础的技术知识点...

  • 今日新闻

    文章不错支持一下吧...

  • 头条

    文章不错非常喜欢...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero