我的第一个html计算器_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:20:421052浏览
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>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn