使用HTML+CSS,jQuery编写的简易计算器_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:31:48
Original
1627 Leute haben es durchsucht

  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">  &divide;  </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">  &times;  </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>
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage