JQ 之简单计算器


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

        }

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

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

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

     }

        #equality{
       cursor: pointer;
       width: 40px; 
       height: 100%;
       background: #AAAAAA;
        border: solid 1px #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">0td>
    tr>
 <tr>
    <td class="numberkey" value="33">1td>
    <td class="numberkey">2td>
    <td class="numberkey">3td>
    <td class="numberkey">+td>
    <td class="numberkey" id="delete">ctd>
 tr>    
 <tr>
    <td class="numberkey" >4td>
    <td class="numberkey">5td>
    <td class="numberkey">6td>
    <td class="numberkey">-td>
    <td rowspan="3"  id="equality" >=td>
 tr>
 <tr>
    <td class="numberkey">7td>
    <td class="numberkey">8td>
    <td class="numberkey">9td>
    <td class="numberkey">*td>

 tr>
  <tr>
    <td class="numberkey">+/-td>
    <td class="numberkey">0td>
    <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)!=-1){
         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)