0
点赞
收藏
分享

微信扫一扫

计算器代码

回溯 2022-02-21 阅读 169

<!DOCTYPE html>
<html>
<head>
<title>14th_test</title>
<meta charset="gb2312">
</head>
  
<body>
<p>计算器:</p>
<table border="1" style="position:center;">
  <tr>
    <td>第一个数:</td>
    <td><input type="text" id="first"/></td>
  </tr>
  <tr>
    <td>第二个数:</td>
    <td><input type="text" id="twice"/></td>
  </tr>
  <tr>
    <td colspan="2" >
      &nbsp;
      <button style="width:inherit" οnclick="add()">+</button>
      &nbsp;
      <button style="width:inherit" οnclick="subtract()">-</button>
      &nbsp;
      <button style="width:inherit" οnclick="ride()">*</button>
      &nbsp;
      <button style="width:inherit" οnclick="devide()">/</button>
    </td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">
      <p id="result"></p>
    </td>
  </tr>
</table>
</body>
<script type="text/javascript">
    var result_1;
    //加法
    function add() {
      var a = getFirstNumber();
      var b = getTwiceNumber();
      var re =Number( a) +Number( b);
      sendResult(re);
    }
    
    //减法
    function subtract() {
      var a = getFirstNumber();
      var b = getTwiceNumber();
      var re = a - b;
      sendResult(re);
    }
    
    //乘法
    function ride() {
      var a = getFirstNumber();
      var b = getTwiceNumber();
      var re = a * b;
      sendResult(re);
    }
    
    //除法
    function devide() {
      var a = getFirstNumber();
      var b = getTwiceNumber();
      var re = a / b;
      sendResult(re);
    }
    
    //给p标签传值
    function sendResult(result_1) {
      var num = document.getElementById("result")
      num.innerHTML = result_1;
    }
    
    //获取第一位数字
    function getFirstNumber() {
      var firstNumber = document.getElementById("first").value;
      return firstNumber;
    }
    
    //获取第二位数字
    function getTwiceNumber() {
      var twiceNumber = document.getElementById("twice").value;
      return twiceNumber;
    }
</script>
</html>

举报
0 条评论