界面:
index.html:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js计算器</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <script src="js/a.js" type="text/javascript"></script> </head> <body> <div id="count"> <textarea readonly="readonly"></textarea> <input type="button" value="←"> <input type="button" value="CE"> <input type="button" value="C"> <input type="button" value="±"> <input type="button" value="√"> <br /> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="÷"> <input type="button" value="%"> <br /> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="*"> <input type="button" value="1/x"> <br /> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="-"> <input type="button" value="=" class="result"> <br /> <input type="button" value="0" style="85px;"> <input type="button" value="."> <input type="button" value="+"> <br /> </div> </body> </html>
a.js:
var show=""; /*用于文本域的显示*/ var x=""; /*输入值*/ var a=0; /*数值暂存*/ var fh=""; /*运算符*/ var yn=false; /*文本域是否需要清零*/ window.onload=dy; function dy(){ var count=document.getElementById("count"); var count_input=count.getElementsByTagName("input"); for(var i=0;i<count_input.length;i++){ count_input[i].onclick=function(){ press(event); } } } function press(e){ /*主函数*/ var txt=document.getElementsByTagName("textarea")[0]; var e=e.target.value; if(e>=0&&e<=9) sz(e); if(e>=0&&e<=9&&yn==true) sz1(e); if(e=="←") bback(); if(e=="CE") del(); if(e=="C") ql(); if(e=="+") sum(); if(e=="-") subtraction(); if(e=="*") multiplication(); if(e=="÷") division(); if(e=="=") show=results(e); if(e==".") decimals(); if(e=="±") plusMinus(); if(e=="√") radical(); if(e=="1/x") reciprocal(); txt.value=show; } function sz(e){ /*字符相连成变量x*/ x=x+e; show=show+e; } function sz1(e){ /*输出结果后直接输入数字,显示归零*/ show=e; x=e; yn=false; } function decimals(){ /*小数点相连*/ if(x.lastIndexOf(".")!==1){ x=x+"."; show=show+"."; } } function bback(){ /*后退*/ show=show.substring(0,show.length-1); x=x.substring(0,x.length-1); } function ql(){ /*所有归零*/ x=""; a=""; show=""; } /*删除右操作数*/ function del(){ show=show.substring(0,show.length-x.length); x=""; } function sum(){ /*求和*/ if(a!=""){ show=results(); x=Number(a)+Number(x); show=x; a=""; yn=true; } else{ yn=false; a=x; x=""; fh="+"; show=show+"+"; } } function subtraction(){ /*求减*/ if(a!=""){ show=results(); show=x; a=""; yn=true; } else{ yn=false; a=x; x=""; fh="-"; show=show+"-"; } } function multiplication(){ /*乘法*/ if(a!=""&&x!=""){ show=results(); a=""; yn=true; } else{ yn=false; a=x; x=""; fh="*"; show=show+"*"; } } function division(){ /*除法*/ if(a!=""){ if(x==0) show="除数不能为0"; else{ show=results(); show=x; a=""; yn=true; } } else{ yn=false; a=x; x=""; fh="÷"; show=show+"÷"; } } function radical(){ /*根号*/ if(a!="") show=results(); show=Math.sqrt(show); x=Math.sqrt(x); } function reciprocal(){ /*倒数*/ if(a!=""){ show=results(); show=1/x; x=1/x; } else{ if(x==0) show="除数不能为0"; else{ x=1/x; show=x; yn=true; } } } function results(){ /*输出结果*/ if(fh=="+") x=Number(a)+Number(x); if(fh=="-") x=Number(a)-Number(x); if(fh=="*") x=Number(a)*Number(x); if(fh=="÷"){ if(x==0){ x="除数不能为0"; } else x=Number(a)/Number(x); } yn=true; a=""; return x; } function plusMinus(){ /*正负数转换*/ if(a!="") show=results(); show=show*-1; x=x*-1; }
style.css:
body{ text-align:center; } #count{ margin:10px auto; text-align:center; font:12px "微软雅黑"; 225px; } #count textarea{ margin:0 auto; 210px; height:50px; display:block; margin-bottom:5px; } #count input{ 40px; height:25px; cursor:pointer; } #count input.result{ float:right; height:50px; margin-right:5px; }
这是我做的第一个javascript dom网页,水平低低、冗余多多,望批评指正。