jQuery实现简单计算器_jquery_

                         
         
                 
                 
     
         
                 
                              白色                 绿色                 蓝色                 灰色                 橙色                      
                 
             
清屏
         
                 
             
记录
         
                 
             
退出
         
     
         
                 
             
1
         
                 
             
2
         
                 
             
3
         
                 
             
+
         
                 
             
4
         
                 
             
5
         
                 
             
6
         
                 
             
-
         
                 
             
7
         
                 
             
8
         
                 
             
9
         
                 
             
%
         
                 
             
*
         
                 
             
0
         
                 
             
/
         
                 
             
=
         
     

*{     padding: 0; } .top{     width:400px;     height:480px;     border: 1px solid black;     margin-left: 525px;     margin-top:20px; } .top_top{     width:392px;     height:65px;     border: 1px solid black;     margin: 5px auto; } .top_center{     width:392px;     height:45px;     border:1px solid black;     margin:5px auto; } .top_bottom{     width:392px;     height:344px;     border:1px solid black;     margin:5px auto; } .btn{     width:86px;     height:37px;     border:1px solid black;     margin:3px 5px;     float: left; } .numb_1{     width:70px;     height:70px;     border:1px solid black;     margin:10px 13px;     float:left; } .numb_2{     width:70px;     height:70px;     border:1px solid black;     margin:6px 13px;     float:left; } .numb_3{     width:70px;     height:70px;     border:1px solid black;     margin:6px 13px;     float:left; } .numb_4{     width:70px;     height:70px;     border:1px solid black;     margin:6px 13px;     float:left; } .Skin_change{     border: 0 solid black;     width:82px;     height:33px;     margin: 2px 2px;     font-size: larger; } .btn_a{     margin:0;     padding: 0;     width:86px;     height:37px;     border: 0;     font-size: larger;     text-align: center;     opacity: 0.8;     display: block;     line-height: 37px; } .btn_b{     margin:0;     padding: 0;     width:86px;     height:37px;     border: 0;     font-size: larger;     text-align: center;     opacity: 0.8;     display: block;     line-height: 37px; } .btn_c{     margin:0;     padding: 0;     width:86px;     height:37px;     border: 0;     font-size: larger;     text-align: center;     opacity: 0.8;     display: block;     line-height: 37px; } .top_bottom p{     margin: 0;     width:70px;     height:70px;     font-size: 160%;     text-align: center;     opacity: 0.7;     display: block;     line-height: 70px; } p:hover{     cursor: pointer;     background-color:#CECBCB; } h3{     float: left;     line-height:39px;     font-weight: normal; } #get_one{     margin:12px 0 0 5px;     width:240px;     border:0 solid black;     height:39px; } #get_two{     margin:12px 0 0 5px;     width:130px;     border:0 solid black;     height:39px; }

$(document).ready(function (){     var qian,zhong,hou,count,result,content,num=1;    // 换肤功能    $(".Skin_change").change(function () {        var change=$(this).val();        switch (change){            case "white":                $(".top,.Skin_change").css("background-color","white");break;            case "green":                $(".top,.Skin_change").css("background-color","#429B47");break;            case "blue":                $(".top,.Skin_change").css("background-color","#0083B9");break;            case "grey":                $(".top,.Skin_change").css("background-color","#E6E6E6");break;            case "orange":                $(".top,.Skin_change").css("background-color","#EAD714");break;            default:break;        }    });    //获取当前元素内容     $(".top_bottom div p").click(function () {         var s = $(this).text();         $("#get_one").append(s);         content = $("#get_one").text();         //console.log(content);  //测试数据         if((s=="+")||(s=="-")||(s=="*")||(s=="/")||(s=="%")){             var f = content;             count=f.length;             qian=Number(f.substring(0,f.length-1)); //前半部分             zhong=f.substring(f.length-1,f.length);             //console.log("前:"+qian);  //测试运算符前的数字显示             //console.log("中:"+zhong);  //测试运算符是否正常显示         }         if(s=="="){             var g = content;             hou = Number(g.substring(count,g.length-1));             //console.log("后:"+hou);   //测试运算符后面的代码             switch(zhong){                 case "+":result=qian+hou;break;                 case "-":result=qian-hou;break;                 case "*":result=qian*hou;break;                 case "/":result=String(qian/hou).substring(0,10);break;                 case "%":result=String(qian%hou).substring(0,10);break;             }             $("#get_two").append(result);         }     });     //清屏功能     $(".btn_a").click(function () {         $("#get_one,#get_two").empty();     });     //退出功能     $(".btn_c").click(function () {         if(confirm("您确定要退出当前网页计算器吗？")){             window.opener=null;             window.open('','_self');             window.close();         }         else{             confirm("欢迎您继续使用网页计算器!");         }     });     //记录功能     $(".btn_b").click(function () {         alert("请按F12或打开控制台查看！");         var text1 = $("#get_one").text();         var text2 = $("#get_two").text();         console.log("第"+num+"次历史运算记录:"+text1+text2);         console.log("时间:"+Date());         num++;     }) });