开头含自己很好的首创方法！JS计算器（完善功能，首创的创新美化界面）【诗书画唱】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#all{
margin: 0px auto; width: 200px; height: 300px;
border: 1px solid red;background-color: blue;}
#wenBenKuang{
width: 170px; height: 40px;line-height: 40px;
text-align: center;margin: 0px auto;margin-top: 20px;
border: 1px solid red;
border-radius: 90%;
}
#anNiuID{
width: 170px;margin: 0px auto;border:
1px solid blue; margin-top: 10px;
}
#anNiuID input {
width: 27px; height: 27px;
margin:5px;
}
input{
border-radius: 90%;
}
#wenBenKuang input{
height: 25px;width: 150px;text-align: right;
padding-right: 10px;
}
</style>
<script>
window. onload=function(){
var wenBenWenZi=document . getElementById("wenBenWenZiID")
var anNiu=document . getElementById("anNiuID");
var allAnNiu=anNiu . getElementsByTagName("input");
var firstWenBenWenZi,fuHao;
for(var i of allAnNiu){
i.onclick=function(){
if(!isNaN(this .value)){
//1.判断txt中是否包含.
//2.txt内容转换为数字后是不是为0
if(Number(this.value)==0){
if(wenBenWenZi.value.indexOf(".")!=-1){
wenBenWenZi.value=wenBenWenZi.value+this . value;
}
}else{
wenBenWenZi. value= (Number(wenBenWenZi.
value+this . value))*1;
}
}
else
{
switch(this.value){
case "+":
case "-":
case "*":
case "/":
firstWenBenWenZi=wenBenWenZi.value;
wenBenWenZi.value="0";
fuHao=this. value;
break;
case "c":
wenBenWenZi. value="0" ;break;
case "←":
wenBenWenZi. value=wenBenWenZi. value . length>1?wenBenWenZi.
value . substr(0, wenBenWenZi. value. length-1):"0" ;break;
case "+/-":
wenBenWenZi.value=wenBenWenZi. value. indexOf("-")==-1?"-"
+wenBenWenZi.value :wenBenWenZi.value .substr(1);break;
case ".":
wenBenWenZi. value=wenBenWenZi. value. indexOf(".")==-1?
wenBenWenZi. value+".": wenBenWenZi. value; break;
case "=":
var secondWenBenWenZi=wenBenWenZi. value;
switch(fuHao){
case "+":
wenBenWenZi.value=Number(firstWenBenWenZi)+Number(secondWenBenWenZi)
break;
case "-":
var jieguo=Number(firstWenBenWenZi)-Number(secondWenBenWenZi);
wenBenWenZi. value=jieguo;break;
break;
case "*":
wenBenWenZi.value=Number(firstWenBenWenZi)*Number(secondWenBenWenZi)
break;
case "/":
wenBenWenZi.value=Number(firstWenBenWenZi)/Number(secondWenBenWenZi)
break;}break;
}
}
}
}
}
</script>
</head>
<body>
<div id="all">
<div id="wenBenKuang">
<input type="text" readonly=" readonly" value="0"id="wenBenWenZiID" />
</div>
<div id="anNiuID">
<input type= "button" value="c" />
<input type="button" value="←" />
<input type="button" value="+/-" />
<input type="button" value="+" />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="-" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="*" />
<input type="button" value="7" />
<input type= "button" value="8" />
<input type= "button" value="9" />
<input type="button" value="/" />
<input type="button" value="0" />
<input type="button" value="." />
<input type="button" value="=" />
<!--“ms”存储显示的数字。“mr”再次调用存储的数字。
“m+”将当前显示的数与存储区中的数相加，
结果存入存储器 “mc”用于清除存储区中的数值-->
<input type="button" value="c" />
</div>
</div>
</body>
</html>
