我的第一个html计算器 - 珍惜des
程序员文章站
2022-04-23 11:30:43
...
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>
推荐阅读
-
我的第一个html计算器_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面_html/css_WEB-ITnose
-
我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面_html/css_WEB-ITnose
-
为啥我写的active第一个按钮没高亮?_html/css_WEB-ITnose
-
我的第一个html计算器 - 珍惜des
-
我的第一个HTML的程序_html/css_WEB-ITnose
-
我的第一个html计算器 - 珍惜des
-
菜鸟自学建站 HTML 第三课 制作我的第一个网页_html/css_WEB-ITnose
-
菜鸟自学建站 HTML 第三课 制作我的第一个网页_html/css_WEB-ITnose