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;">0div> 156 td> 157 tr> 158 <tr style="height: 40px;"> 159 <td> 160 <button id="cunChu"> 存 储 button> 161 td> 162 <td> 163 <button id="quCun"> 取 存 button> 164 td> 165 <td> 166 <button id="tuiGe"> 退 格 button> 167 td> 168 <td> 169 <button id="qingPing"> 清 屏 button> 170 td> 171 tr> 172 <tr style="height: 40px;"> 173 <td> 174 <button id="leiCun"> 累 存 button> 175 td> 176 <td> 177 <button id="jiCun"> 积 存 button> 178 td> 179 <td> 180 <button id="qingCun"> 清 存 button> 181 td> 182 <td> 183 <button id="Chuyi" class="yunSuan" name="4"> ÷ button> 184 td> 185 tr> 186 <tr style="height: 40px;"> 187 <td> 188 <button id="seven" class="number" name="7"> 7 button> 189 td> 190 <td> 191 <button id="eight" class="number" name="8"> 8 button> 192 td> 193 <td> 194 <button id="nine" class="number" name="9"> 9 button> 195 td> 196 <td> 197 <button id="chengYi" class="yunSuan" name="3"> × button> 198 td> 199 tr> 200 <tr style="height: 40px;"> 201 <td> 202 <button id="four" class="number" name="4"> 4 button> 203 td> 204 <td> 205 <button id="five" class="number" name="5"> 5 button> 206 td> 207 <td> 208 <button id="six" class="number" name="6"> 6 button> 209 td> 210 <td> 211 <button id="jianQu" class="yunSuan" name="2"> - button> 212 td> 213 tr> 214 <tr style="height: 40px;"> 215 <td> 216 <button id="one" class="number" name="1"> 1 button> 217 td> 218 <td> 219 <button id="two" class="number" name="2"> 2 button> 220 td> 221 <td> 222 <button id="three" class="number" name="3"> 3 button> 223 td> 224 <td> 225 <button id="jiaShang" class="yunSuan" name="1"> + button> 226 td> 227 tr> 228 <tr style="height: 40px;"> 229 <td> 230 <button id="zero" class="number" name="0"> 0 button> 231 td> 232 <td> 233 <button id="dian" class="number" name="."> . button> 234 td> 235 <td> 236 <button id="zhengFu" class="number" name="-1"> +/- button> 237 td> 238 <td> 239 <button id="dengYu"> = button> 240 td> 241 tr> 242 table> 243 body> 244 html>
计算器样式布局有所借鉴，代码均为原创，未经授权禁止转载；内容未经过严格测试，如遇BUG欢迎提出，谢谢！