简单的JS实现简单功能的计算器

简单的JS实现简单功能的计算器
尽可能的不用JS修饰html网页代码。
View Code 
  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 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>计算</title>
  6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
  7 <style type="text/css">
  8 td {
  9 width: 60px;
 10 height: 50px;
 11 cursor: pointer;
 12 }
 13 </style>
 14 <script type="text/javascript">
 15 $(document).ready(function() {
 16 var array = {
 17 0 : { 0 : "NumLock" , 1 : "/", 2 : "*", 3 : "-" },
 18 1 : { 0 : 7 , 1 : 8 , 2 : 9, 3 : "+" },
 19 2 : { 0 : 4 , 1 : 5 , 2 : 6 },
 20 3 : { 0 : 1 , 1 : 2 , 2 : 3 , 3 : "Enter"},
 21 4 : { 0 : 0 , 1 : "." , 2 : "*"}
 22 };
 23 var com = {
 24 0 : 0,
 25 1 : 0,
 26 2 : ""
 27 };
 28 var opera = {
 29 opera_c : false,
 30 opera : function() {
 31 if(!((com[0] != undefined && com[0] != 0) && (com[1] != undefined && com[1] != 0 ) && (com[2] != undefined && com[2].length != 0))) {
 32 return;
 33 }
 34 a = com[2];
 35 switch(a) {
 36 case "+":
 37 com[0] = opera.add();
 38 break;
 39 case "-":
 40 com[0] = opera.min();
 41 break;
 42 case "*":
 43 com[0] = opera.mult();
 44 break;
 45 case "/":
 46 com[0] = opera.chu();
 47 break;
 48 }
 49 com[1] = 0;
 50 com[2] = "";
 51 opera.opera_c = false;
 52 $("#com").html(com[0]);
 53 $("#res").html(com[0]);
 54 },
 55 add : function() {
 56 var com0 = parseInt(com[0]);
 57 var com1 = parseInt(com[1]);
 58 return com0 + com1;
 59 },
 60 min : function() {
 61 var com0 = parseInt(com[0]);
 62 var com1 = parseInt(com[1]);
 63 return com0 - com1;
 64 },
 65 mult : function() {
 66 var com0 = parseInt(com[0]);
 67 var com1 = parseInt(com[1]);
 68 if(com1 == 0) {
 69 alert("ERROR：For 0 ");
 70 }
 71 return com0 * com1;
 72 },
 73 chu : function() {
 74 var com0 = parseInt(com[0]);
 75 var com1 = parseInt(com[1]);
 76 if(com1 == 0) {
 77 alert("ERROR：For 0 ");
 78 }
 79 return com0 / com1;
 80 }
 81 };
 82 $("td").bind({
 83 click : function() {
 84 var a = array[$(this).parent().index()][$(this).index()];
 85 if( typeof (a) == "number") {
 86 if(!opera.opera_c) {
 87 com[0] = com[0] * 10 + a;
 88 } else {
 89 com[1] = com[1] * 10 + a;
 90 }
 91 } else if( typeof (a) == "string") {
 92 switch(a) {
 93 case "+":
 94 case "-":
 95 case "*":
 96 case "/":
 97 if(opera.opera_c) {
 98 var text = $("#com").text();
 99 text = text.substring(0, text.length - 1);
100 $("#com").html(text);
101 }
102 opera.opera_c = true;
103 opera.opera();
104 com[2] = a;
105 break;
106 case "Enter":
107 opera.opera();
108 a = "";
109 break;
110 }
111 }
112 $("#com").append(a);
113 },
114 mousemove : function() {
115 $(this).css({
116 "background-color" : "#FD9"
117 });
118 },
119 mouseout : function() {
120 $(this).css({
121 "background-color" : "white"
122 });
123 },
124 mousedown : function() {
125 $(this).css({
126 "background-color" : "#FF3"
127 });
128 },
129 mouseup : function() {
130 $(this).css({
131 "background-color" : "white"
132 });
133 }
134 });
135 });
136 </script>
137 </head>
138 <body>
139 <center>
140 <table style="border-collapse:collapse;text-align: center; padding: 5px 5px 5px 5px;" width="260px" border="2px" >
141 <thead>
142 <div style="height:50px;width:260px;border: 1px #000 inset;text-align:right;">
143 <div id="com" style="background-color:#CF9;height:25px;">
144 &nbsp;
145 </div>
146 <div id="res" style="background-color:#EBEBEB;height:25px;">
147 &nbsp;
148 </div>
149 </div>
150 </thead>
151 <tr>
152 <td>NumLock</td>
153 <td>/</td>
154 <td>*</td>
155 <td>-</td>
156 </tr>
157 <tr>
158 <td>7</td>
159 <td>8</td>
160 <td>9</td>
161 <td rowspan="2" >+</td>
162 </tr>
163 <tr>
164 <td>4</td>
165 <td>5</td>
166 <td>6</td>
167 </tr>
168 <tr>
169 <td>1</td>
170 <td>2</td>
171 <td>3</td>
172 <td rowspan="2">Enter</td>
173 </tr>
174 <tr>
175 <td colspan="2" >0</td>
176 <td>.</td>
177 </tr>
178 </table>
179 </center>
180 </body>
181 </html>
posted @ 2012-06-01 15:03  呆呆木鸡  阅读(336)  评论(0)  编辑  收藏  举报