使用HTML+CSS，jQuery编写的简易计算器_html/css

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

  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>

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。