最近在学js,我是菜鸟，有没有一起学的同学！！加我Q328584523

js+html代码

 
    
     
         
  1. <html> 
    2.  
         
  2.  <head> 
    3.  
         
  3.   <link href="cal.css" rel="stylesheet" type="text/css"/> 
    4.  
         
  4. <script type="text/javascript"> 
    5.  
         
  5.   var num1=0,num2,num3; 
    6.  
         
  6.   var oper; 
    7.  
         
  7. function Focus() 
    8.  
         
  8.   { 
    9.  
         
  9.     document.getElementById('Input').focus(); 
    10.  
         
  10.  
    11.  
         
  11.   } 
    12.  
         
  12.   function Calcutor() 
    13.  
         
  13.   { 
    14.  
         
  14.     var total; 
    15.  
         
  15.     var num1; 
    16.  
         
  16.     this.numb=function(num1,num2,oper,i){ 
    17.  
         
  17.         //if(i==0) 
    18.  
         
  18.         //this.num1=num1; 
    19.  
         
  19.  
    20.  
         
  20.         if(oper=="+") 
    21.  
         
  21.             { 
          total=num1+num2;} 
    22.  
         
  22.         else if(oper=="-") 
    23.  
         
  23.             { 
          total=num1-num2;} 
    24.  
         
  24.         else if(oper=="*") 
    25.  
         
  25.             { 
          total=num1*num2;} 
    26.  
         
  26.         else if(oper=="/") 
    27.  
         
  27.             { 
          total=num1/num2;} 
    28.  
         
  28.         else if(oper=="Power") 
    29.  
         
  29.         { total=Math.pow(num1,num2);} 
    30.  
         
  30.     } 
    31.  
         
  31.     this.result=function(){ 
    32.  
         
  32.         return total; 
    33.  
         
  33.     } 
    34.  
         
  34.      
    35.  
         
  35.   } 
    36.  
         
  36.   var cal=new Calcutor(); 
    37.  
         
  37.   function init(eventObj) 
    38.  
         
  38.   { 
    39.  
         
  39.          
    40.  
         
  40.         var num=document.getElementById('Input'); 
    41.  
         
  41.          
    42.  
         
  42.         if(eventObj.value=="Clear") 
    43.  
         
  43.         { 
    44.  
         
  44.             num.value="0"; 
    45.  
         
  45.         }else if(eventObj.value=="Backspace") 
    46.  
         
  46.         { 
    47.  
         
  47.             num.value=(num.value).substr(0,(num.value).length-1); 
    48.  
         
  48.              
    49.  
         
  49.         }else if((Number(eventObj.value))||eventObj.value=="."||eventObj.value=="0"){ 
    50.  
         
  50.              
    51.  
         
  51.             //num3=Number(num.value); 
    52.  
         
  52.             numnum3=num.value+eventObj.value; 
    53.  
         
  53.             //window.alert("00000") 
    54.  
         
  54.             if(eventObj.value==".") 
    55.  
         
  55.             { 
    56.  
         
  56.                 //num3num3=num3.substr(1,num3.length)+num3.charAt(0); 
    57.  
         
  57.                 num.value=num3;  
    58.  
         
  58.             } 
    59.  
         
  59.             else num.value=Number(num3); 
    60.  
         
  60.         }else if(eventObj.value=="+"||eventObj.value=="-"||eventObj.value=="*"||eventObj.value=="/"||eventObj.value=="Power"){ 
    61.  
         
  61.             num1=Number(num.value); 
    62.  
         
  62.             num.value=""; 
    63.  
         
  63.             oper=eventObj.value; 
    64.  
         
  64.             }else if(eventObj.value=="="){ 
    65.  
         
  65.             num2=Number(num.value); 
    66.  
         
  66.             cal.numb(num1,num2,oper); 
    67.  
         
  67.             var  str=cal.result().toString(); 
    68.  
         
  68.             if(cal.result()<0) 
    69.  
         
  69.             { 
    70.  
         
  70.                 var s0=str.charAt(0); 
    71.  
         
  71.                 strstr=str.substr(1,str.length)+s0; 
    72.  
         
  72.             } 
    73.  
         
  73.             num.value=str; 
    74.  
         
  74.         } 
    75.  
         
  75.  } 
    76.  
         
  76. </script> 
    77.  
         
  77. </head> 
    78.  
         
  78. <body onload="Focus()" > 
    79.  
         
  79. <div class="s"> 
    80.  
         
  80. <span class="s1">简易计算器</span> 
    81.  
         
  81. <table border=2px class="TableStyle"> 
    82.  
         
  82. <tr class="TextStyle1"> 
    83.  
         
  83.     <td colspan="4"><input type="text" value="0" class="TextStyle2" id="Input"></td> 
    84.  
         
  84.   </tr> 
    85.  
         
  85.   <tr> 
    86.  
         
  86.     <td><input type="button" value="Power" class="bt" onclick="init(this)" /></td> 
    87.  
         
  87.     <td><input type="button" value="Clear" class="bt" onclick="init(this)"/></td> 
    88.  
         
  88.     <td colspan="2"><input type="button" value="Backspace" style="height:30px;width:130px" onclick="init(this)"/></td> 
    89.  
         
  89. <!--<td>&nbsp;</td>--> 
    90.  
         
  90.   </tr> 
    91.  
         
  91.   <tr> 
    92.  
         
  92.     <td><input type="button" value="1" class="bt"onclick="init(this)"/></td> 
    93.  
         
  93.     <td><input type="button" value="2" class="bt"onclick="init(this)"/></td> 
    94.  
         
  94.     <td><input type="button" value="3" class="bt"onclick="init(this)"/></td> 
    95.  
         
  95.     <td><input type="button" value="4" class="bt"onclick="init(this)"/></td> 
    96.  
         
  96.   </tr> 
    97.  
         
  97.   <tr> 
    98.  
         
  98.     <td><input type="button" value="5" class="bt"onclick="init(this)"/></td> 
    99.  
         
  99.     <td><input type="button" value="6" class="bt"onclick="init(this)"/></td> 
    100.  
         
  100.     <td><input type="button" value="7" class="bt"onclick="init(this)"/></td> 
    101.  
         
  101.     <td><input type="button" value="8" class="bt"onclick="init(this)"/></td> 
    102.  
         
  102.   </tr> 
    103.  
         
  103.   <tr> 
    104.  
         
  104.     <td><input type="button" value="9" class="bt"onclick="init(this)"/></td> 
    105.  
         
  105.     <td><input type="button" value="0" class="bt"onclick="init(this)"/></td> 
    106.  
         
  106.     <td><input type="button" value="." class="bt"onclick="init(this)"/></td> 
    107.  
         
  107.     <td><input type="button" value="=" class="bt"onclick="init(this)"/></td> 
    108.  
         
  108.   </tr> 
    109.  
         
  109.   <tr> 
    110.  
         
  110.     <td><input type="button" value="+" class="bt"onclick="init(this)"/></td> 
    111.  
         
  111.     <td><input type="button" value="-" class="bt"onclick="init(this)"/></td> 
    112.  
         
  112.     <td><input type="button" value="*" class="bt"onclick="init(this)"/></td> 
    113.  
         
  113.     <td><input type="button" value="/" class="bt"onclick="init(this)"/></td> 
    114.  
         
  114.   </tr> 
    115.  
         
  115.   </table> 
    116.  
         
  116. <p>★只实现了简单的四则运算,连乘,没有实现,总感觉代码比较混乱</p> 
    117.  
         
  117. </div> 
    118.  
         
  118.  </body> 
    119.  
         
  119. </html> 
    120.  
        
 
    
css代码
 
    
 
    
     
         
  1. .s{ 
    2.  
         
  2.     margin:0 auto; 
    3.  
         
  3.      
    4.  
         
  4.     width:400px; 
    5.  
         
  5.     height:400px; 
    6.  
         
  6.     background-color:pink; 
    7.  
         
  7.     border:none solid blue; 
    8.  
         
  8. } 
    9.  
         
  9. .s1{ 
    10.  
         
  10.     font-weight:bold; 
    11.  
         
  11.     font-size:20px; 
    12.  
         
  12.     font-family:"隶书"; 
    13.  
         
  13.     padding-bottom:-20px; 
    14.  
         
  14.     margin-left:145px; 
    15.  
         
  15. } 
    16.  
         
  16. .TextStyle2{ 
    17.  
         
  17.     width:240px; 
    18.  
         
  18.     direction:rtl; 
    19.  
         
  19.      
    20.  
         
  20. } 
    21.  
         
  21. .TableStyle{ 
    22.  
         
  22.     table-layout:fixed; 
    23.  
         
  23.     width:350px; 
    24.  
         
  24.     height:300px; 
    25.  
         
  25.     background-color:#E0E0ED; 
    26.  
         
  26.     border-spacing:0px; 
    27.  
         
  27.     border-collapse:collapse; 
    28.  
         
  28.     text-align:center; 
    29.  
         
  29.     margin-top:20px; 
    30.  
         
  30.     margin-left:20px; 
    31.  
         
  31.      
    32.  
         
  32. } 
    33.  
         
  33. td{ 
    34.  
         
  34.     border:5px #E0E0ED inset; 
    35.  
         
  35. } 
    36.  
         
  36. .TextStyle1{ 
    37.  
         
  37.      
    38.  
         
  38.     background-color:blue; 
    39.  
         
  39. } 
    40.  
         
  40. .bt{ 
    41.  
         
  41.     width:50px; 
    42.  
         
  42.     height:30px; 
    43.  
         
  43. } 
    44.