文章

这么使用jQuery实现简易计算器功能

这篇文章主要讲解了“这么使用jQuery实现简易计算器功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“这么使用jQuery实现简易计算器功能”吧！页面效果:源码：<!D

这篇文章主要讲解了“这么使用jQuery实现简易计算器功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“这么使用jQuery实现简易计算器功能”吧！

页面效果:

这么使用jQuery实现简易计算器功能

源码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <meta charset="utf-8" />
  7.     <style>
  8.         #all {
  9.             width: 600px;
  10.             margin: 0px auto;
  11.             background-color: deepskyblue;
  12.             height: 400px;
  13.             padding-top: 20px;
  14.         }
  15.  
  16.         #myCal {
  17.             width: 500px;
  18.             height: 300px;
  19.             margin: 0px auto;
  20.         }
  21.  
  22.         table {
  23.             border-collapse: collapse;
  24.             text-align: center;
  25.         }
  26.  
  27.         td {
  28.             border: 1px solid white;
  29.         }
  30.  
  31.         button {
  32.             width: 96px;
  33.             height: 40px;
  34.             font-size: 26px;
  35.             font-family: "宋体";
  36.             color: navy;
  37.             background-color:white;
  38.         }
  39.     </style>
  40.     <script src="js/jquery-1.8.2.min.js"></script>
  41.     <script>
  42.         var Num1 = "";  //存放数字1
  43.         var Num2 = "";  //存放数字2
  44.         var Char = "";  //存放运算符
  45.         var Result = "";//存放结果
  46.         $(function () {//页面加载时绑定事件
  47.             $("button").hover(function () {
  48.                 $(this).css({"background-color":"orange","color":"white"});//鼠标悬停时更改背景颜色与字体颜色
  49.             }, function () {
  50.                 $(this).css({ "background-color": "white", "color": "navy" });
  51.             });
  52.             //给运算符添加点击事件
  53.             $('.char').click(function () {
  54.                 if (Num2 == "") {
  55.                     Char = $(this).text();
  56.                     $('#content').val(Num1 + Char);
  57.                 } else if(Num2!="") {
  58.                     switch (Char) {//当Num2存在时 代表两个数字已存在,并点了一个新运算符  则直接进行运算
  59.                         case "+":
  60.                             Result = parseFloat(Num1) + parseFloat(Num2);
  61.                             break;
  62.                         case "-":
  63.                             Result = parseFloat(Num1) - parseFloat(Num2);
  64.                             break;
  65.                         case "*":
  66.                             Result = parseFloat(Num1) * parseFloat(Num2);
  67.                             break;
  68.                         case "/":
  69.                             Result = parseFloat(Num1) / parseFloat(Num2);
  70.                             break;
  71.                     }
  72.                     Num2 = "";//清空Num2的值
  73.                     Num1 = Result;//将结果的值赋值给Num1
  74.                     Char = $(this).text();//更新下一次点击 的运算符
  75.                     $('#content').val(Num1 + Char);//将更新完的运算符 和结果一起拼接到文本框中
  76.                 }
  77.  
  78.             });
  79.  
  80.             //给数字添加点击事件
  81.             $('.num').click(function () {
  82.                 var txt = $(this).text();//拿到当前点击的数字按钮
  83.                 if (Char == "") {//如果运算符为空 则代表第一次点击 或者点击了等于号 
  84.                     if (Result != Num1) {//如果Result!=Num1 则代表 没有点击=号
  85.                         Num1 = Num1 + txt;//正常拼接
  86.                         $('#content').val(Num1);//显示
  87.                     } else {//点击了=号
  88.                         Num1 = "";//清空Num1值  以免 等于号计算出的结果直接拼接了新的值
  89.                         Num1 = Num1 + txt;//拼接新的输入值
  90.                         $('#content').val(Num1);//显示
  91.                     }
  92.                 }else {
  93.                     Num2 = Num2 + txt;//如果运算符已存在 则输入的是第二个数
  94.                     $('#content').val(Num1 + Char + Num2);//拼接
  95.                 }
  96.             });
  97.             $(".clear").click(function () {//归零按钮 清空所有值 并将输入框按钮的值还原成0 
  98.                 Num1 = "";
  99.                 Num2 = "";
  100.                 Char = "";
  101.                 Result = "";
  102.                 $('#content').val("0");
  103.             });
  104.             $(".result").click(function () {
  105.                 switch (Char) {//做一个判断，不同的运算符做不同的运算
  106.                     case "+":
  107.                         Result = parseFloat(Num1) + parseFloat(Num2);
  108.                         break;
  109.                     case "-":
  110.                         Result = parseFloat(Num1) - parseFloat(Num2);
  111.                         break;
  112.                     case "*":
  113.                         Result = parseFloat(Num1) * parseFloat(Num2);
  114.                         break;
  115.                     case "/":
  116.                         Result = parseFloat(Num1) / parseFloat(Num2);
  117.                         break;
  118.                 }
  119.                 $('#content').val(Result);
  120.                 Num1 = Result;//将计算结果赋值给Num1
  121.                 Char = "";//在这里清空原有的运算符 以跟直接点击+-/*运算符区分开
  122.                 Num2 = "";//清空Num2的值
  123.             });
  124.         });
  125.     </script>
  126. </head>
  127. <body>
  128.     <div id="all">
  129.         <div id="myCal">
  130.             <div >jQuery简易计算器</div>
  131.             <table >
  132.                 <tr>
  133.                     <td colspan="4"><input id="content" value="0"  /></td>
  134.                 </tr>
  135.                 <tr>
  136.                     <td><button class="num">7</button></td>
  137.                     <td><button class="num">8</button></td>
  138.                     <td><button class="num">9</button></td>
  139.                     <td><button class="char">+</button></td>
  140.                 </tr>
  141.                 <tr>
  142.                     <td><button class="num">4</button></td>
  143.                     <td><button class="num">5</button></td>
  144.                     <td><button class="num">6</button></td>
  145.                     <td><button class="char">-</button></td>
  146.                 </tr>
  147.                 <tr>
  148.                     <td><button class="num">1</button></td>
  149.                     <td><button class="num">2</button></td>
  150.                     <td><button class="num">3</button></td>
  151.                     <td><button class="char">*</button></td>
  152.                 </tr>
  153.                 <tr>
  154.                     <td><button class="num">0</button></td>
  155.                     <td><button class="clear">C</button></td>
  156.                     <td><button class="char">/</button></td>
  157.                     <td><button class="result">=</button></td>
  158.                 </tr>
  159.             </table>
  160.         </div>
  161.     </div>
  162. </body>
  163. </html>

感谢各位的阅读，以上就是“这么使用jQuery实现简易计算器功能”的内容了，经过本文的学习后，相信大家对这么使用jQuery实现简易计算器功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是恰卡网，小编将为大家推送更多相关知识点的文章，欢迎关注！

本站部分文章来自网络或用户投稿，如无特殊说明或标注，均为本站原创发布。涉及资源下载的，本站旨在共享仅供大家学习与参考，如您想商用请获取官网版权，如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
0 0
jquery
开发者

怎么使用Redis缓存淘汰策略和事务实现乐观锁

2022-7-23 1:16:42

开发者

微信小程序转换uniapp的迁移步骤及遇到的问题怎么解决

2022-7-23 1:16:48

请输入验证码

请输入图片中的验证码
点击发送按钮获取验证码

取消
×
×
￥undefined
请打开手机使用微信扫码支付
「」
×

....支付确认中....

「」
×
支付金额

￥

undefined
×
积分支付
您当前的积分为0

检测到您未绑定微信账户，请先绑定微信

立刻绑定
确定
×

举报

请选择举报类型*

政治有害
不友善
垃圾广告
违法违规
色情低俗
涉嫌侵权
网络暴力
涉未成年
自杀自残
不实信息
引人不适
抄袭
扰乱社区秩序
请输入举报内容 *

举报提交后，我们会以邮件的形式向您反馈处理结果。

×

打开微信扫一扫

扫码并「关注我们的公众号」安全快捷登录

×

下载海报：

搜索

  • 扫码打开当前页

返回顶部