简单的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 145 </div> 146 <div id="res" style="background-color:#EBEBEB;height:25px;"> 147 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>