我的第一个html计算器
|
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>7li> <li>8li> <li>9li> <li>+li> <li>4li> <li>5li> <li>6li> <li>-li> <li>1li> <li>2li> <li>3li> <li>*li> <li>0li> <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>代码
|
