界面：
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网页，水平低低、冗余多多，望批评指正。