1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title>简易计算器</title>
7 <style type="text/css">
8 .style1 {
9 border: 2px solid #C0C0C0;
10 background-color: #C0C0C0;
11 }
12 .style2 {
13 border: 3px solid #C0C0C0;
14 }
15 .style3 {
16 border-left: 2px solid #C0C0C0;
17 border-right: 2px solid #808080;
18 border-top: 2px solid #C0C0C0;
19 border-bottom: 2px solid #808080;
20 background-color: #C0C0C0;
21 }
22 .style4{
23 font-family: 华文新魏;
24 font-size: xx-large;
25 font-weight: bold;
26 background-color: #FFFFFF;
27 width: 80px; height: 50px;
28 }
29 #TextArea1
30 {
31 height: 63px;
32 width: 349px;
33 }
34 #txtResult
35 {
36 height: 61px;
37 width: 344px;
38 }
39 #Text1
40 {
41 height: 47px;
42 width: 343px;
43 }
44 </style>
45 </head>
46 <script language="javascript" >
47
48
49 //计算中要用到的变量
50 var formulaToShow=""; //要显示的计算式
51 var formulaToCalcu="";//要计算的计算式
52 var result=" "; //计算结果
53 var saved="0"; //存储的数
54
55
56 //生成计算式的函数
57 function TypeFormula(com)
58 {
59 //如果是已经求过值，则清屏并重新开始计算
60 if((result!=" "||result=="0") && com!="save"){
61 formulaToShow="";
62 result=" ";
63 }
64
65 //得到按钮信息
66 switch(com)
67 {
68 case "clear"://清空
69 formulaToShow="";
70 result=" ";
71 break;
72 case "back"://退格（这个写的有些冗余）
73 {var f=formulaToShow;
74 if(f.substring(f.length-5,f.length)=="asin("||f.substring(f.length-5,f.length)=="acos("||f.substring(f.length-5,f.length)=="atan("||f.substring(f.length-5,f.length)=="sqrt(")
75 formulaToShow=formulaToShow.substring(0,formulaToShow.length-5);
76 else if(f.substring(f.length-4,f.length)=="sin("||f.substring(f.length-4,f.length)=="cos("||f.substring(f.length-4,f.length)=="tan("||f.substring(f.length-4,f.length)=="exp(")
77 formulaToShow=formulaToShow.substring(0,formulaToShow.length-4);
78 else if(f.substring(f.length-3,f.length)=="ln(")
79 formulaToShow=formulaToShow.substring(0,formulaToShow.length-3);
80 else
81 formulaToShow=formulaToShow.substring(0,formulaToShow.length-1);
82 }
83 break;
84
85 case "sign":
86 {if (formulaToShow=="")formulaToShow="-";
87 else if(formulaToShow[0]=="-")formulaToShow=formulaToShow.substring(1,formulaToShow.length);
88 else formulaToShow="-"+formulaToShow;}
89 break;
90 case "save":
91 saved=formulaToShow;
92 break;
93 case "getsave":
94 formulaToShow=formulaToShow+saved;
95 break;
96 case "result"://计算结果
97 {if(formulaToShow=="") result=" ";
98 else {
99 formulaToCalcu=formulaToShow.toString();
100 formulaToCalcu=formulaToCalcu.replace(/sin/g, "Math.sin");
101 formulaToCalcu=formulaToCalcu.replace(/cos/g, "Math.cos");
102 formulaToCalcu=formulaToCalcu.replace(/tan/g, "Math.tan");
103 formulaToCalcu=formulaToCalcu.replace(/asin/g, "Math.asin");
104 formulaToCalcu=formulaToCalcu.replace(/aMath.sin/g, "Math.asin");
105 formulaToCalcu=formulaToCalcu.replace(/acos/g, "Math.acos");
106 formulaToCalcu=formulaToCalcu.replace(/aMath.cos/g, "Math.acos");
107 formulaToCalcu=formulaToCalcu.replace(/atan/g, "Math.atan");
108 formulaToCalcu=formulaToCalcu.replace(/aMath.tan/g, "Math.atan");
109 formulaToCalcu=formulaToCalcu.replace(/exp/g, "Math.exp");
110 formulaToCalcu=formulaToCalcu.replace(/ln/g, "Math.log");
111 formulaToCalcu=formulaToCalcu.replace(/sqrt/g, "Math.sqrt");
112
113 try {result=eval(formulaToCalcu);}
114 catch (exception) {
115 window.alert(exception); }
116 }
117 }
118 break;
119 default:
120 formulaToShow+=com;
121 break;
122 }
123
124 txtShow.innerHTML=formulaToShow+"<br/>"+result+"<br/>";
125 }
126
127 </script>
128 <body>
129
130 <form id="calculator" action="" method="post">
131 <table align="center" class="style2" style="width: 24%">
132 <tr>
133 <td class="style3" style="height: 27px; font-family: 华文新魏; font-size: medium; font-weight: bold; background-color: #FFFFFF;" colspan="7">
134 <div id="txtShow"
135 style="font-family: 华文新魏; font-size: xx-large; font-weight: bold; text-align: right">
136 <br/><br/>
137 </div>
138 </td>
139 </tr>
140 <tr>
141 <td class="style3" style="width: 20px">
142 <input name="btnResult" class="style4" type="button" value="=" id="btnResult" onclick="TypeFormula('result')"/></td>
143 <td class="style1" style="width: 75px">
144 <input name="btnLeft" class="style4" type="button" value="(" id="btnLeft" onclick="TypeFormula('(')"/></td>
145 <td class="style1" style="width: 75px">
146 <input name="btnRight" class="style4" type="button" value=")" id="btnRight" onclick="TypeFormula(')')"/></td>
147 <td class="style1" style="width: 55px">
148 <input name="btnBack" class="style4" type="button" value="退格" id="btnBack" onclick="TypeFormula('back')"/></td>
149 <td class="style1" style="width: 55px">
150 <input name="btnClear" class="style4" type="button" value="清屏" id="btnClear" onclick="TypeFormula('clear')"/></td>
151 <td class="style1" style="width: 55px">
152 <input name="btnSave" class="style4" type="button" value="存储" id="btnSave" onclick="TypeFormula('save')"/></td>
153 <td class="style1" style="width: 55px">
154 <input name="btnGetSave" class="style4" type="button" value="取存" id="btnGetSave" onclick="TypeFormula('getsave')"/></td>
155 </tr>
156 <tr>
157 <td class="style1" style="width: 20px">
158 <input name="btnNo7" class="style4" type="button" value="7" id="btnNo7" onclick="TypeFormula('7')"/></td>
159 <td class="style1" style="width: 75px">
160 <input name="btnNo8" class="style4" type="button" value="8" id="btnNo8" onclick="TypeFormula('8')"/></td>
161 <td class="style1" style="width: 75px">
162 <input name="btnNo9" class="style4" type="button" value="9" id="btnNo9" onclick="TypeFormula('9')"/></td>
163 <td class="style1" style="width: 55px">
164 <input name="btnAdd" class="style4" type="button" value="+" id="btnAdd" onclick="TypeFormula('+')"/></td>
165 <td class="style1" style="width: 55px">
166 <input name="btnMod" class="style4" type="button" value="%" id="btnMod" onclick="TypeFormula('%')"/></td>
167 <td class="style1" style="width: 55px">
168 </td>
169 <td class="style1" style="width: 55px">
170 </td>
171 </tr>
172 <tr>
173 <td class="style1" style="width: 20px">
174 <input name="btnNo4" class="style4" type="button" value="4" id="btnNo4" onclick="TypeFormula('4')"/></td>
175 <td class="style1" style="width: 75px">
176 <input name="btnNo5" class="style4" type="button" value="5" id="btnNo5" onclick="TypeFormula('5')"/></td>
177 <td class="style1" style="width: 75px">
178 <input name="btnNo6" class="style4" type="button" value="6" id="btnNo6" onclick="TypeFormula('6')"/></td>
179 <td class="style1" style="width: 55px">
180 <input name="btnSub" class="style4" type="button" value="-" id="btnSub" onclick="TypeFormula('-')"/></td>
181 <td class="style1" style="width: 55px">
182 <input name="btnSqrt" class="style4" type="button" value="sqrt" id="btnSqrt" onclick="TypeFormula('sqrt(')"/></td>
183 <td class="style1" style="width: 55px">
184 <input name="btnLn" class="style4" type="button" value="ln" id="btnLn" onclick="TypeFormula('ln(')"/></td>
185 <td class="style1" style="width: 55px">
186 <input name="btnExp" class="style4" type="button" value="exp" id="btnExp" onclick="TypeFormula('exp(')"/></td>
187 </tr>
188 <tr>
189 <td class="style1" style="width: 20px">
190 <input name="btnNo1" class="style4" type="button" value="1" id="btnNo1" onclick="TypeFormula('1')"/></td>
191 <td class="style1" style="width: 75px">
192 <input name="btnNo2" class="style4" type="button" value="2" id="btnNo2" onclick="TypeFormula('2')"/></td>
193 <td class="style1" style="width: 75px">
194 <input name="btnNo3" class="style4" type="button" value="3" id="btnNo3" onclick="TypeFormula('3')"/></td>
195 <td class="style1" style="width: 55px">
196 <input name="btnMul" class="style4" type="button" value="*" id="btnMul" onclick="TypeFormula('*')"/></td>
197 <td class="style1" style="width: 55px">
198 <input name="btnSin" class="style4" type="button" value="sin" id="btnSin" onclick="TypeFormula('sin(')"/></td>
199 <td class="style1" style="width: 55px">
200 <input name="btnCos" class="style4" type="button" value="cos" id="btnCos" onclick="TypeFormula('cos(')"/></td>
201 <td class="style1" style="width: 55px">
202 <input name="btnTan" class="style4" type="button" value="tan" id="btnTan" onclick="TypeFormula('tan(')"/></td>
203 </tr>
204 <tr>
205 <td class="style1" style="width: 20px">
206 <input name="btnNo0" class="style4" type="button" value="0" id="btnNo0" onclick="TypeFormula(0)"/></td>
207 <td class="style1" style="width: 75px">
208 <input name="btnPoint" class="style4" type="button" value="." id="btnPoint" onclick="TypeFormula('.')"/></td>
209 <td class="style1" style="width: 75px">
210 <input name="btnPoint" class="style4" type="button" value="+/-" id="btnSign" onclick="TypeFormula('sign')"/></td>
211 <td class="style1" style="width: 55px">
212 <input name="btnDiv" class="style4" type="button" value="/" id="btnDiv" onclick="TypeFormula('/')"/></td>
213 <td class="style1" style="width: 55px">
214 <input name="btnAsin" class="style4" type="button" value="asin" id="btnAsin" onclick="TypeFormula('asin(')"/></td>
215 <td class="style1" style="width: 55px">
216 <input name="btnacos" class="style4" type="button" value="acos" id="btnacos" onclick="TypeFormula('acos(')"/></td>
217 <td class="style1" style="width: 55px">
218 <input name="btnAtan" class="style4" type="button" value="atan" id="btnAtan" onclick="TypeFormula('atan(')"/></td>
219 </tr>
220 </table>
221 </form>
222
223 </body>
224
225 </html>
