ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML+CSS と jQuery_html/css_WEB-ITnose を使用して書かれた簡単な計算機
HTML+CSS と jQuery_html/css_WEB-ITnose を使用して書かれた簡単な計算機
- WBOYオリジナル
- 2016-06-24 11:31:481645ブラウズ
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"> 存 储 </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> コードはすべてオリジナルであり、無断転載は禁止されています。バグに遭遇した場合は、ご報告ください。あなた！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。