HTML练习（网页计算器） 

 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>
View Code

 

posted @ 2017-06-05 21:25  Wally的博客  阅读(199)  评论(0)    收藏  举报