好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

我的第一个html计算器-珍惜des

html代码。

   DOCTYPE HTML  > 
   html  > 
   head  > 
   style   type  ="text/css"  >  
body,#content,#te,#sa,#main-content,ul,li  {  margin  :  0 auto  ;  padding  :  0  ;  font-weight  :  bold  ;  font-size  :  50px  ;  }  
#content  {  width  :  300px  ;  height  :  400px  ;  border  :  1px solid gray  ;  padding  :  0px  ;  }  
.main-content  {  width  :  300px  ;  height  :  250px  ;  border  :  1px solid red  ;  overflow  :  hidden  ;  background-color  :  #BC8F8F  ;  }  
#te  {  width  :  300px  ;  height  :  80px  ;  border  :  1px solid black  ;  background  :  #FFD700  ;  text-align  :  right  ;  }  
.main-content ul li  {  list-style  :  none  ;  
                    width  :  60px  ;  
                    height  :  50px  ;  
                    border  :  1px solid black  ;  
                    border-radius  :  10px  ;  
                    display  :  block  ;  
                    float  :  left  ;  
                    text-align  :  center  ;  
                    cursor  :  pointer  ;  margin  :  4px  ;  background-color  :  #C0C0C0  ;  }  
#mybtn  {  width  :  80px  ;  height  :  40px  ;  } 
   style  > 
   head  > 
   BODY  > 
   label  >  label  > 
   div   id  ="content"  > 
    div   id  ="te"  >  p   id  ="sa"  />  p  >     div  > 
    div   class  ="main-content"  > 
      ul   class  ="ulclass"  > 
       li  > 7   li  > 
       li  > 8   li  > 
       li  > 9   li  > 
       li  > +   li  > 
       li  > 4   li  > 
       li  > 5   li  > 
       li  > 6   li  > 
       li  > -   li  > 
       li  > 1   li  > 
       li  > 2   li  > 
       li  > 3   li  > 
       li  > *   li  > 
       li  > 0   li  > 
       li  > .   li  > 
       li  > =   li  > 
       li  > /   li  > 
      ul  > 
   div  > 
   input   type  ="button"   value  ="清除"  id  ="mybtn"  /> 
   div  > 




   script   type  ="text/javascript"  > 

 var   lk  =  document.getElementById(  "  sa  "  );
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  0  ];
btn.onclick  =  function  (){
lk.textContent  +=  "  7  "  ; 

};

  var   btn  =  document.getElementsByTagName(  "  li  "  )[  1  ];
btn.onclick  =  function  (){
lk.textContent  +=  "  8  "  ; 
};

  var   btn  =  document.getElementsByTagName(  "  li  "  )[  2  ];
btn.onclick  =  function  (){
lk.textContent  +=  "  9  "  ; 
};
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  3  ];
btn.onclick  =  function  (){
lk.textContent  +=  "  +  "  ; 
};

  var   btn  =  document.getElementsByTagName(  "  li  "  )[  4  ];
btn.onclick  =  function  (){
lk.textContent  +=  "  4  "  ; 
};
num5:  var   btn  =  document.getElementsByTagName(  "  li  "  )[  5  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  5  "  ; 
   };
mum6:  var   btn  =  document.getElementsByTagName(  "  li  "  )[  6  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  6  "  ; 
   };
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  7  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  -  "  ; 
   };
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  8  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  1  "  ; 
   };
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  9  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  2  "  ; 
   };
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  10  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  3  "  ; 
   };
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  11  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  *  "  ; 
   };
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  15  ];
   btn.onclick  =  function  (){
   lk.textContent  +=  "  /  "  ; 
   };
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  12  ];
    btn.onclick  =  function  (){
    lk.textContent  +=  "  0  "  ; 
};
  var   btn  =  document.getElementsByTagName(  "  li  "  )[  13  ];
    btn.onclick  =  function  (){
    lk.textContent  +=  "  .  "  ; 
};

  
result:  var   btn  =  document.getElementsByTagName(  "  li  "  )[  14  ];
        btn.onclick  =  function  (){
          lk.textContent  =  (lk.textContent  +  "  =  "  ).toString()  +  eval(lk.textContent);
};

clear:  var   gg  =  document.getElementById(  '  mybtn  '  )
        gg.onclick  =  function  (){
         lk.innerHTML  =  ""  ;              
}


    script  > 
   body  > 
   html  >  

查看更多关于我的第一个html计算器-珍惜des的详细内容...

  阅读:36次