简单的计算器

学习之初,写过许多小demo,但是一直没有整理。现在也整理一下,供初学的朋友参考参考。先用js写一个简单的计算器,外观如下图:


简单的计算器_第1张图片
计算器外观

这个计算器可以最简单的加减乘除取余运算以及退格、清零等。
分为三部分:html、css、js。
html布局如下:

CLICK

CALCULATER

  • 7
  • 8
  • 9
  • c
  • 4
  • 5
  • 6
  • *
  • /
  • 1
  • 2
  • 3
  • +
  • -
  • 0
  • 00
  • .
  • %
  • =


css外部样式

body{
     background-color:#f3f3f3;
    text-align:center;
 }
.calculater{
     width:300px;
     height:400px;
     margin:auto;
     margin-top:50px;
     background-color:#e1e1e1;
     border:1px solid #fefefe;
     font-size:12px;
     font-family:Arial,times;
     padding:0 20px;
     box-shadow:5px 5px 10px #000 ;
 }
.header{
     width:300px;
     height:20px;
     text-align:left;
     margin-bottom:10px;
 }
a{
     float:right;
     color:#aaa;
     text-decoration:none;   
 }
 h1{
     font-size:15px;
     color:#555;     
 }
.screen{
     width:300px;
     height:40px;    
     line-height:40px;
     border:1px solid #aaa;
     font-size:20px;
     text-align:right;
     box-shadow: 5px 0 5px #aaa inset;
 }
.calcu_btns{
     width:300px;
     height:245px;      
 }
.calcu_btns ul{ 
    padding:0;
    margin-top:20px;
    width:300px;
    height:245px; 
    border:1px solid #fff;
   }
.calcu_btns li{
    list-style:none;
    float:left;
    width:50px;
    height:50px;
    margin:5px;
    display:inline;
    line-height:50px;
    font-size:17px;
    background-color:#eaeaea;
    box-shadow: 5px 5px 5px #aaa;  
}
.calcu_btns li:hover{
    background-color:#f9f9f9;
    cursor:pointer;
}
.footer{
     width:280px;
     height:30px;
     background-color:#e1e1e1;
     margin-top:10px;
     text-align:left;
     line-height:30px;
     padding:0 10px;
 }   
.footer span {
     text-align:left;
     color:#a1a1a1;     
 }   

js部分:要给每个按键加一个加一个click事件,并传入一个对应的参数,然后根据参数做相应的算法。


方法讲解已经注释,仅供参考。

    
  


CLICK

CALCULATER

  • 7
  • 8
  • 9
  • c
  • 4
  • 5
  • 6
  • *
  • /
  • 1
  • 2
  • 3
  • +
  • -
  • 0
  • 00
  • .
  • %
  • =

你可能感兴趣的:(简单的计算器)