javascript代码实现简易计算器

本文实例为大家分享了javascript实现简易计算器的具体代码，供大家参考，具体内容如下

编辑了几个小时研发了一个简易好理解的计算器。不停改Bug，终于改好了。

这是样式

这是Css部分

  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷体";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }

这是HTML部分

  
   
   

    
7
    
8
    
9
    
+

    
4
    
5
    
6
    
- 

    
1
    
2
    
3
    
*

    
0
    
C
    
=
    
/
   
  


 

 
 

html部分的话就是吧所有数字定义为一个class名字，把所有运算符号定义为一个class 以及定义两个input来存放运算符

完整部分

 
 
 
 
 
  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷体";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }
 



 
  
   
   

    
7
    
8
    
9
    
+

    
4
    
5
    
6
    
- 

    
1
    
2
    
3
    
*

    
0
    
C
    
=
    
/
   
  


 

 
 

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。