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

집

웹 프론트엔드

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의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM

부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.

HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AM

HTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.

HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AM

HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.

마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AM

HTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.

HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

See all articles