简单的计算器

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

计算器外观

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

   CLICK
   
CALCULATER


     

     
     

        

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


     HELLO WORLD
     反馈

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
           
.
           
%
           
=
      
   


   HELLO WORLD
   反馈