你的位置:首页 > Java教程

[Java教程]使用HTML+CSS,jQuery编写的简易计算器


 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2   pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset=" utf-8"> 7 <meta name="author" content="http://www.softwhy.com/" /> 8 <title>简易计算器</title> 9 <jsp:include page="inc/easyui.jsp"></jsp:include> 10 <style type="text/css"> 11 button { 12   font-size: 18px; 13   font-weight: bold; 14   width: 75px; 15 } 16 </style> 17 <script type="text/javascript"> 18   var yunSuan = 0;//运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 19   var change = 0;//属于运算符后需要清空上一数值 20   var num1 = 0;//运算第一个数据 21   var num2 = 0;//运算第二个数据 22   var cunChuValue = 0;//存储的数值 23   $(function() { 24     $(".number").click(function() {//点击数字触发事件 25       var num = $(this).attr('name'); 26       var oldValue = $("#jieguo").html(); 27       if (change == 1) { 28         oldValue = "0"; 29         change = 0; 30       } 31       var newValue = ""; 32       if (num == -1) { 33         oldValue = parseFloat(oldValue); 34         newValue = oldValue * -1; 35       } else if (num == ".") { 36         if (oldValue.indexOf('.') == -1) 37           newValue = oldValue + "."; 38         else 39           newValue = oldValue; 40       } else { 41         if (oldValue == 0 && oldValue.indexOf('.') == -1) { 42           newValue = num; 43         } else { 44           newValue = oldValue + num; 45         } 46       } 47       $("#jieguo").html(newValue); 48     }); 49     $("#qingPing").click(function() {//点击清屏触发事件 50       $("#jieguo").html("0"); 51       yunSuan = 0; 52       change = 0; 53       num1 = 0; 54       num2 = 0; 55     }); 56     $("#tuiGe").click(function() {//点击退格触发事件 57       if (change == 1) { 58         yunSuan = 0; 59         change = 0; 60       } 61       var value = $("#jieguo").html(); 62       if (value.length == 1) { 63         $("#jieguo").html("0"); 64       } else { 65         value = value.substr(0, value.length - 1); 66         $("#jieguo").html(value); 67       } 68     }); 69     $(".yunSuan").click(function() {//点击运算符号触发事件 70       change = 1; 71       yuSuan = $(this).attr('name'); 72       var value = $("#jieguo").html(); 73       var dianIndex = value.indexOf("."); 74       if (dianIndex == value.length) { 75         value = value.substr(0, value.length - 1); 76       } 77       num1 = parseFloat(value); 78     }); 79     $("#dengYu").click(function() {//点击等于符号触发事件 80       var value = $("#jieguo").html(); 81       var dianIndex = value.indexOf("."); 82       if (dianIndex == value.length) { 83         value = value.substr(0, value.length - 1); 84       } 85       num2 = parseFloat(value); 86       var sum = 0; 87       if (yuSuan == 1) { 88         sum = num1 + num2; 89       } else if (yuSuan == 2) { 90         sum = num1 - num2; 91       } else if (yuSuan == 3) { 92         sum = num1 * num2; 93       } else if (yuSuan == 4) { 94         sum = num1 / num2; 95       } else if (yuSuan == 0 || num1 == 0 || num2 == 0) { 96         sum = num1 + num2; 97       } 98       var re = /^[0-9]+.?[0-9]*$/; 99       if (re.test(sum)) {100         sum = sum.toFixed(2);101       }102       $("#jieguo").html(sum);103       change = 1;104       yuSuan = 0;105       num1 = 0;106       num2 = 0;107     });108     $("#cunChu").click(function() {//点击存储触发事件109       change = 1;110       var value = $("#jieguo").html();111       var dianIndex = value.indexOf(".");112       if (dianIndex == value.length) {113         value = value.substr(0, value.length - 1);114       }115       cunChuValue = parseFloat(value);116     });117     $("#quCun").click(function() {//点击取存触发事件118       change = 1;119       $("#jieguo").html(cunChuValue);120     });121     $("#qingCun").click(function() {//点击清存触发事件122       change = 1;123       cunChuValue = 0;124     });125     $("#leiCun").click(function() {//点击累存触发事件126       change = 1;127       var value = $("#jieguo").html();128       var dianIndex = value.indexOf(".");129       if (dianIndex == value.length) {130         value = value.substr(0, value.length - 1);131       }132       cunChuValue += parseFloat(value);133     });134     $("#jiCun").click(function() {//点击积存触发事件135       change = 1;136       var value = $("#jieguo").html();137       var dianIndex = value.indexOf(".");138       if (dianIndex == value.length) {139         value = value.substr(0, value.length - 1);140       }141       if (cunChuValue == 0) {142         cunChuValue = parseFloat(value);143       } else {144         cunChuValue = cunChuValue * parseFloat(value);145       }146     });147   });148 </script>149 </head>150 <body>151   <table>152     <tr>153       <td colspan="4">154         <div id="jieguo"155           style="width: 300px;height: 30px;font-size: 30px;text-align: right;font-weight:bold;color: red;">0</div>156       </td>157     </tr>158     <tr style="height: 40px;">159       <td>160         <button id="cunChu">&nbsp;存&nbsp;储&nbsp;</button>161       </td>162       <td>163         <button id="quCun">&nbsp;取&nbsp;存&nbsp;</button>164       </td>165       <td>166         <button id="tuiGe">&nbsp;退&nbsp;格&nbsp;</button>167       </td>168       <td>169         <button id="qingPing">&nbsp;清&nbsp;屏&nbsp;</button>170       </td>171     </tr>172     <tr style="height: 40px;">173       <td>174         <button id="leiCun">&nbsp;累&nbsp;存&nbsp;</button>175       </td>176       <td>177         <button id="jiCun">&nbsp;积&nbsp;存&nbsp;</button>178       </td>179       <td>180         <button id="qingCun">&nbsp;清&nbsp;存&nbsp;</button>181       </td>182       <td>183         <button id="Chuyi" class="yunSuan" name="4">&nbsp;&nbsp;÷&nbsp;&nbsp;</button>184       </td>185     </tr>186     <tr style="height: 40px;">187       <td>188         <button id="seven" class="number" name="7">&nbsp;&nbsp;7&nbsp;&nbsp;</button>189       </td>190       <td>191         <button id="eight" class="number" name="8">&nbsp;&nbsp;8&nbsp;&nbsp;</button>192       </td>193       <td>194         <button id="nine" class="number" name="9">&nbsp;&nbsp;9&nbsp;&nbsp;</button>195       </td>196       <td>197         <button id="chengYi" class="yunSuan" name="3">&nbsp;&nbsp;×&nbsp;&nbsp;</button>198       </td>199     </tr>200     <tr style="height: 40px;">201       <td>202         <button id="four" class="number" name="4">&nbsp;&nbsp;4&nbsp;&nbsp;</button>203       </td>204       <td>205         <button id="five" class="number" name="5">&nbsp;&nbsp;5&nbsp;&nbsp;</button>206       </td>207       <td>208         <button id="six" class="number" name="6">&nbsp;&nbsp;6&nbsp;&nbsp;</button>209       </td>210       <td>211         <button id="jianQu" class="yunSuan" name="2">&nbsp;&nbsp;-&nbsp;&nbsp;</button>212       </td>213     </tr>214     <tr style="height: 40px;">215       <td>216         <button id="one" class="number" name="1">&nbsp;&nbsp;1&nbsp;&nbsp;</button>217       </td>218       <td>219         <button id="two" class="number" name="2">&nbsp;&nbsp;2&nbsp;&nbsp;</button>220       </td>221       <td>222         <button id="three" class="number" name="3">&nbsp;&nbsp;3&nbsp;&nbsp;</button>223       </td>224       <td>225         <button id="jiaShang" class="yunSuan" name="1">&nbsp;&nbsp;+&nbsp;&nbsp;</button>226       </td>227     </tr>228     <tr style="height: 40px;">229       <td>230         <button id="zero" class="number" name="0">&nbsp;&nbsp;0&nbsp;&nbsp;</button>231       </td>232       <td>233         <button id="dian" class="number" name=".">&nbsp;&nbsp;.&nbsp;&nbsp;</button>234       </td>235       <td>236         <button id="zhengFu" class="number" name="-1">&nbsp;&nbsp;+/-&nbsp;&nbsp;</button>237       </td>238       <td>239         <button id="dengYu">&nbsp;&nbsp;=&nbsp;&nbsp;</button>240       </td>241     </tr>242   </table>243 </body>244 </html>

 计算器样式布局有所借鉴,代码均为原创,未经授权禁止转载;内容未经过严格测试,如遇BUG欢迎提出,谢谢!