1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Insert title here</title>
6 <script>
7 var str;
8 var num;
9 function count(ch)
10 {
11 str=document.getElementById("show");
12 if(ch=="C")
13 {
14 str.value="0";
15 }
16 else if(ch=="←")
17 {
18 str.value=str.value.substr(0,str.value.length-1);
19 if(str.value.length==0)
20 str.value="0";
21 }
22 else if(ch=='%'&&str.value=="0")
23 {
24 ;
25 }
26 else
27 {
28 if(str.value=="0")
29 str.value="";
30 str.value=str.value+ch;
31 }
32 }
33 function ans()
34 {
35 str=document.getElementById("show");
36 num=eval(str.value);
37 str.value=num;
38 }
39 </script>
40 </head>
41 <body>
42 <form action="" name="cal">
43 <h1 align="center" style="color:#FF00FF;">计算器</h1>
44 <p align="center"> <input type="text" id="show" value="0" style="text-align: right;width: 250px; height: 30px;color:#0000FF;"></input></p>
45 <p align="center"> <input type="button" name="cal_cle" value="C" style="width: 70px; height: 30px;font-size:20px;" onClick="count('C')"></input>
46 <input type="button" name="cal_pre" value="←" style="width: 70px; height: 30px;font-size:20px;" onClick="count('←')"></input>
47 <input type="button" name="cal_pre" value="%" style="width: 70px; height: 30px;font-size:20px;" onClick="count('%')"></input>
48 </p>
49 <p align="center"> <input type="button" name="cal_1" value="1" style="width: 50px; height: 30px;font-size:20px;" onClick="count(1)"></input>
50 <input type="button" name="cal_2" value="2" style="width: 50px; height: 30px;font-size:20px;" onClick="count(2)"></input>
51 <input type="button" name="cal_3" value="3" style="width: 50px; height: 30px;font-size:20px;" onClick="count(3)"></input>
52 <input type="button" name="cal_mul" value="*" style="width: 50px; height: 30px;font-size:20px;" onClick="count('*')"></input>
53 </p>
54 <p align="center"> <input type="button" name="cal_4" value="4" style="width: 50px; height: 30px;font-size:20px;" onClick="count(4)"></input>
55 <input type="button" name="cal_5" value="5" style="width: 50px; height: 30px;font-size:20px;" onClick="count(5)"></input>
56 <input type="button" name="cal_6" value="6" style="width: 50px; height: 30px;font-size:20px;" onClick="count(6)"></input>
57 <input type="button" name="cal_div" value="/" style="width: 50px; height: 30px;font-size:20px;" onClick="count('/')"></input>
58 </p>
59 <p align="center"> <input type="button" name="cal_7" value="7" style="width: 50px; height: 30px;font-size:20px;" onClick="count(7)"></input>
60 <input type="button" name="cal_8" value="8" style="width: 50px; height: 30px;font-size:20px;" onClick="count(8)"></input>
61 <input type="button" name="cal_9" value="9" style="width: 50px; height: 30px;font-size:20px;" onClick="count(9)"></input>
62 <input type="button" name="cal_add" value="+" style="width: 50px; height: 30px;font-size:20px;" onClick="count('+')"></input>
63 </p>
64 <p align="center"> <input type="button" name="cal_0" value="0" style="width: 50px; height: 30px;font-size:20px;" onClick="count(0)"></input>
65 <input type="button" name="cal_dot" value="." style="width: 50px; height: 30px;font-size:20px;" onClick="count('.')"></input>
66 <input type="button" name="cal_equ" value="=" style="width: 50px; height: 30px;font-size:20px;" onClick="ans()"></input>
67 <input type="button" name="cal_sub" value="-" style="width: 50px; height: 30px;font-size:20px;" onClick="count('-')"></input>
68 </p>
69 </form>
70 </body>
71 </html>
