使用CSS、HTML、JQuery编写计算器

最新推荐文章于 2022-11-04 14:40:09 发布

weixin_30258027

最新推荐文章于 2022-11-04 14:40:09 发布

阅读量177

点赞数

文章标签： javascript xhtml 前端 ViewUI

原文链接：http://www.cnblogs.com/clean/p/7591695.html

版权

终于学会了firefox的调试，在毫无前端基础下写了个笨笨的计算器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

 
</head>

<style>

body{
    /*width:350px;
    height:200px;*/
    font-size:14px;
    width: 350px;
    margin: 0 auto;

}
.counter{
    background:#C4FFFF;
    /*padding:15px ;*/
    text-align: center;
    border-radius:15px;
}


table{
    width:350px;
    height:201px;
    padding:15px;    
}



input
{ 

    width: 58px;
    height: 35px;
    text-align: center;
    cursor: pointer;
    background: #E9E9E9;
    font-family: 黑体;
    font-size: 20px;
    margin: 0 auto;
    border-radius: 10px;

}
.countershow{
    width: 265px;
    height: 50px;
    color: #193D83;
    padding-left: 2px;
    margin-top: 20px;
    background-color:#FFFFFF;
    text-align:left;
}


/*td:hover{
    background:#66CCFF; 
}
*/
</style>



<body>
  <h1 align="center">智能计算器</h1>
   <div  class="counter">
        <!--<div class="numkey">-->
            <table >   
                  <input id="result" type="text" name="counter"  class="countershow"  value="0"/>
              <tr>
                <td ><input  class="num"type="button" value="1" /></td>
                <td ><input  class="num"type="button" value="2"  /></td>
                <td ><input  class="num"type="button" value="3"  /></td>
                <td ><input  class="operator" type="button" value="+"  /></td>
              </tr>
              <tr>
               <td ><input  class="num" type="button" value="4"  /></td>
                <td ><input class="num" type="button" value="5"  /></td>
                <td ><input class="num" type="button" value="6"  /></td>
                <td ><input class="operator"type="button" value="-" /></td>
             </tr>
             <tr>
               <td ><input   class="num" type="button" value="7"  /></td>
                <td ><input  class="num" type="button" value="8"  /></td>
                <td ><input  class="num" type="button" value="9"  /></td>
                <td ><input  class="operator" type="button" value="*"  /></td>
            </tr>
            
             <tr>
                <td ><input class="num" type="button" value="0"/></td>
                <td ><input id="clean" type="button" value="C" /></td>
                <td ><input id="eq" type="button" value="=" /></td>
                <td ><input class="operator" type="button" value="/"/></td>
             </tr>
        </table>
        </div>
     <!--</div>-->
     
    

<script type="text/javascript"  src="jquery.js"></script>
<script >


$(document).ready(function()
{
    var status = 0;
    var operat;
    var firstnum;
    var secondnum;
    
     $(".num").click(function()
    {
        var Num=$(this).attr('value');//获取点击值
        
         if(status == '0')
         {
             if($("#result").val()=='0')
             {
                // $("#result").val($("input").html());
                 $("#result").val(Num);
                 
             }         
             else
             {
                     $("#result").val($("#result").val()+ Num);
             }
             firstnum = $("#result").val();
        }
        else
        {    
            if(secondnum=='0')
           {         
             $("#result").val("");
           }
            $("#result").val($("#result").val()+ Num);
            secondnum=$("#result").val();    
        }
    });
    
    $("#clean").click(function(){

         status = 0;
         $("#result").val(0);
         firstnum = 0;
         secondnum = 0;
     });
    
     $(".operator").click(function(){
         status = 1;
         operat = $(this).attr('value');
         secondnum=0;
     });
    
     $("#eq").click(function()
     {
         var tmp=0;
         if(operat == '+')
         {
             $("#result").val(parseFloat(firstnum)+parseFloat(secondnum));
            
         }
         else if(operat == '-')
         {
             $("#result").val(parseFloat(firstnum)-parseFloat(secondnum));
         }
         else if(operat == '*')
         {
            $("#result").val(parseFloat(firstnum)*parseFloat(secondnum));
         }
         else
         {
             $("#result").val(parseFloat(firstnum)/parseFloat(secondnum));
         }
         firstnum = $("#result").val();
         status = 0;
     });
});

</script>

</body>
</html>