首頁 > 開發者 > JavaScript
我的第一個html計算機，第一個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>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>代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
