天天看點
傳回

JQ 之簡單電腦

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            padding: ;
            margin: px;

        }

     #calculater{
         margin: auto;
         margin-top: px;
         border:solid px #AAAAAA;
         border-spacing: ;

     }
     #show{
        width: %;
        height: px;
        border-bottom:solid px #AAAAAA; 
       font-weight: bold;
       color: #193D83;
        font-family: 黑體;
        padding-left: px;

     }
     .numberkey{
         cursor: pointer;
        width: px;
        height: px;
        border: solid px #FFFFFF;
        background: #AAAAAA;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: '黑體';

     }

        #equality{
       cursor: pointer;
       width: px; 
       height: %;
       background: #AAAAAA;
        border: solid px #FFFFFF;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: 黑體; 

    }

    .numberkey:hover{
       background: #EA6F30; 

    }

    #equality:hover{
       background: #EA6F30; 

    }



    </style>
</head>
<body>

 <table id="calculater"  >
    <tr>
        <td  id="show" colspan="5">0</td>
    </tr>
 <tr>
    <td class="numberkey" value="33">1</td>
    <td class="numberkey">2</td>
    <td class="numberkey">3</td>
    <td class="numberkey">+</td>
    <td class="numberkey" id="delete">c</td>
 </tr>    
 <tr>
    <td class="numberkey" >4</td>
    <td class="numberkey">5</td>
    <td class="numberkey">6</td>
    <td class="numberkey">-</td>
    <td rowspan="3"  id="equality" >=</td>
 </tr>
 <tr>
    <td class="numberkey">7</td>
    <td class="numberkey">8</td>
    <td class="numberkey">9</td>
    <td class="numberkey">*</td>

 </tr>
  <tr>
    <td class="numberkey">+/-</td>
    <td class="numberkey">0</td>
    <td class="numberkey">.</td>
    <td class="numberkey">/</td>
 </tr>


 </table>
</body>
<script src="http://code.jquery.com/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var a="";/*點選的數字*/
var tag='=';
$("#calculater").click(function(e){
        if(e.srcElement.innerText=='='){
             return;
        }
        if(e.srcElement.innerText=='c'){
             return;  
        }
        a+=e.srcElement.innerText; 
　　    if(a.indexOf(tag)!=-){
    　　   a=e.srcElement.innerText;
　　    }
        $("#show").text(a);
});

$("#equality").click(function(){
     /*eval()函數計算字元串的值*/
      results=eval(a);
      a+="="+results;
      $("#show").text(a);
 });
/*清零*/
$("#delete").click(function(){
    a="";
  $("#show").text("0");
 });


});


</script>
</html>
jquery
上一篇: 融合GPT大模型産品，WakeData新一輪産品更新
下一篇: PIE SDK歸一化水體指數法

繼續閱讀