计算机JQuery

最新推荐文章于 2022-11-04 14:40:09 发布

雨落风暖晴

最新推荐文章于 2022-11-04 14:40:09 发布

阅读量231

点赞数

分类专栏： java 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43490398/article/details/105258749

版权

java 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   input {
    width: 395px;
    height: 80px;
    color: #FDA252;
    font-size: 40px;
    background: #41A1CB;
    border: none;
   }
   table {
    font-size: 30px;
   }
   tr {
    text-align: center;
   }
   td {
    width: 90px;
   }
   td:hover {
    background: greenyellow;
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <center>
   <input type="text" id="show_result" value="0" disabled="disabled" />
  </center>
  <table border="1" cellspacing="0" align="center" width="400px" height="500px">
   <tr>
    <td id="clear">C</td>
    <td id="del">退格</td>
    <td>%</td>
    <td class="ysf">/</td>
   </tr>
   <tr>
    <td class="num">7</td>
    <td class="num">8</td>
    <td class="num">9</td>
    <td class="ysf">*</td>
   </tr>
   <tr>
    <td class="num">4</td>
    <td class="num">5</td>
    <td class="num">6</td>
    <td class="ysf">-</td>
   </tr>
   <tr>
    <td class="num">1</td>
    <td class="num">2</td>
    <td class="num">3</td>
    <td class="ysf">+</td>
   </tr>
   <tr>
    <td colspan="2" class="num">0</td>
    <td class="num">.</td>
    <td id="result">=</td>
   </tr>
  </table>
 </body>
 <script type="text/javascript">
  //1.布局页面
  //2.做功能
  //3.把数字和小数点归为一类 设class
  //4.把运算符归为一类 设置class
  //5.= input显示框，删除键 归零键，等单独设置id
  //6.获取DOM元素
  //7.先不要考虑四则元素，先实现最简单的，用点第一个数，然后点一个运算符，再点第二个数，最后点等号，我们给他算出结果展示。
  //8.首先来说，我们得三个变量，记录 第一个数，第二个数，还有运算符。
  //9.当用户点击一个数字，我们得展示这个用户点击的数字。
  var numValue1 = '';
  var numValue2 = '';
  var opr = '';
  var show_result = document.getElementById("show_result");
  var clear = document.getElementById("clear");
  var del = document.getElementById("del");
  var result = document.getElementById("result");
  //获取所有的数字
  var nums = document.getElementsByClassName("num");
  //循环给数字绑定点击事件
  //
  for (var i = 0; i < nums.length; i++) {
   nums[i].onclick = function() {
    //判断他在点这个小数点
    if (this.innerText == '.') {
     //当你输入 .3 会自动补0
     if (numValue1.indexOf('.') == -1) {
      //用户点击数字进行展示，注意+=的使用
      numValue1 += this.innerText;
      //这里不要*1
      show_result.value = numValue1;
      }
    } else {
     //没有点数点正常元素
     //用户点击数字进行展示，注意+=的使用
     numValue1 += this.innerText;
     //如果*1 他会去掉首尾无效的0
     //show_result.value = numValue1*1; 
     show_result.value = numValue1*1;
    }
    }
  }
  //获取所有的操作符
  var czfs = document.getElementsByClassName("ysf");
  //我们给所有的运算符绑定点击事件
  for (var i = 0; i < czfs.length; i++) {
   czfs[i].onclick = function() {
    //当用户点击了运算符，我们把第一个数字numValue1 给numValue2 
    //然后把numValue1 清空，让他接受第二个数字。
    //始终numValue1 接收的是用户的最后一次输出，numValue2这个变量，只需保存上一次的结果
    //四则的判断
    if (numValue2 == '') {
     numValue2 = numValue1;
     numValue1 = '';
     //获取运算符
     opr = this.innerText;
    } else {
     //要么点击= 要么点击点击其他运算符
     //alert("要么点击=号，要么做四则");
     //我们要把上次的结果，算出来，之后，再赋值给
     if(numValue1!=''){
      funResult();
     }   
     //再次存储运算符
     opr = this.innerText;
    }
   }
  }
  //下来你等号绑定点击事件，然后根据运算符进行不用的运算，你要numValue2和numValue1 转成数字
  result.onclick = function() {
   //alert("等号");
   funResult(); //抽取个方法，进行运算结果
  }
  function funResult() {
   //把字符串的数字，转换成数字
   var one = Number(numValue2);
   var two = Number(numValue1);
   //定义一个变量来接收结果
   var r = null;
   switch (opr) {
    case '+':
     r = one + two;
     break;
    case '-':
     r = one - two;
     break;
    case '*':
     r = one * two;
     break;
    case '/':
     // //除数为0处理
     if (two == 0) {
      alert("除数不能为0")
      numValue1 = '';
      numValue2 = '';
      opr = '';
      r = 0;
     } else {
      r = one / two;
     }
     break;
   }
   //把上次的运算结果给numValue2 把numValue1清空
   numValue2 = r;
   numValue1 = ''; //空串转成0
   //展示运算结果。如果*1 他会去掉首尾无效的0
   //show_result.value =numValue2*1; 解决 1.2*3=5.9999999996 这种情况
   show_result.value = numValue2.toFixed(5)*1;
  }
  //归零键
  clear.onclick = function() {
   //把数据置为初始状态
   numValue1 = ''; 
   numValue2 = '';
   opr = '';
   show_result.value = '0';
  }
  //退格键
  del.onclick = function() {
   //截取字符串 numValue1 把最后一个字符去掉不要
   if (numValue1 != '' && numValue1.length > 1) {
    numValue1 = numValue1.substring(0, numValue1.length - 1);
    show_result.value = numValue1;
   } else if (numValue1.length == 1) {
    numValue1 = '0';
    show_result.value = numValue1;
   }
  }
 </script>
</html>

雨落风暖晴

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
计算机JQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { width: 395px; height: 80px; color: ...
复制链接

扫一扫