jQuery实现简易的计算器

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

布局如下：

css代码

#d1{
    width: 400px;
    height: 500px;
    /*background-color: #A9A9A9;*/
    float: left;
    margin: 20px 0px 0px 500px;
    font-size: 30px;
    font-weight: bold;
    font-family: 宋体;
    text-align: center;
    line-height: 70px;
    background:url("../img/1 (20).jpg");
    background-repeat:no-repeat;
    background-size:400px 500px;
}

#d2{
    width: 100%;
    height: 4%;
    color: aqua;
    float: left;
    border:0px red solid;
    text-align: left;
    line-height: 18px;
    font-size: 20px;
    font-family: "微软雅黑";
    
}

#d3{
    width: 100%;
    height: 10%;
    color: aqua;
    float: left;
    border:0px red solid;
    text-align: left;
    line-height: 18px;
    margin-top: 3px;
    margin-bottom: 9px;
    opacity: 0.8;
}

.c1{
    width: 22.1%;
    height: 15%;
    background-color: #FFC0CB;
    cursor: pointer;
    float: left;
    border-radius: 12px;
    margin: 0px 0px 9px 9px;
    opacity: 0.8;
}

.c1:hover{
    background-color: aqua;
}

布局+jQuery：

    
        
        
        
    

    
        


            
● ● ●
            

                
            

            
AC
            
+/-
            
%
            
÷
            
7
            
8
            
9
            
×
            
4
            
5
            
6
            
-
            
1
            
2
            
3
            
+
            
0
            
保留
            
.
            
=
            
            
            

        
    

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