百度前端学院第16天任务_百度前端学院任务十六-CSDN博客

本文链接：https://blog.csdn.net/weixin_43274526/article/details/105637765

百度前端学院第16天任务

加了点CSS，做了个简易计算器

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>简易计算器</title>
  <style>
    .main {
      position: relative;
      min-width: 800px;
      height: 600px;
    }

    .calculator {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 400px;
      height: 300px;
      padding: 6px;
      border: 2px dashed gray;
      background-color: yellowgreen;
    }

    h1 {
      text-align: center;
      /* border: 1px solid gray; */
    }

    .input-group {
      display: flex;
      justify-content: space-between;
    }

    #first-number {
      width: 180px;
      height: 40px;
      font-size: 24px;
      border: 1px solid black;
      text-align: center;
    }

    #second-number {
      width: 180px;
      height: 40px;
      font-size: 24px;
      border: 1px solid black;
      text-align: center;
    }

    .button-group {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
    }

    .btn {
      width: 40px;
      height: 35px;
    }

    .btn:hover {
      color: blue;
    }

    p {
      /* width: 160px; */
      height: 40px;
      font-size: 24px;
      margin-top: 40px;
      position: absolute;
      left: 32%;
      color: crimson;
      /* border: 1px solid black; */
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="calculator">
      <h1>简易计算器</h1>
      <div class="input-group">
        <input id="first-number" type="number" value=" " placeholder="第一个数字">
        <input id="second-number" type="number" value=" " placeholder="第二个数字">
      </div>

      <div class="button-group">
        <button id="add-btn" class="btn">加</button>
        <button id="minus-btn" class="btn">减</button>
        <button id="times-btn" class="btn">乘</button>
        <button id="divide-btn" class="btn">除</button>
      </div>

      <p id="result">运算结果=</p>
      <script>
        // 加函数
        function addNumber() {
          var a = parseInt(document.getElementById("first-number").value);
          var b = parseInt(document.getElementById("second-number").value);
          var c = a + b;
          document.getElementById("result").innerHTML = '运算结果= ' + c;
        }
        // 减函数
        function minusNumber() {
          var a = parseInt(document.getElementById("first-number").value);
          var b = parseInt(document.getElementById("second-number").value);
          var c = a - b;
          document.getElementById("result").innerHTML = '运算结果=' + c;
        }
        // 乘函数
        function timesNumber() {
          var a = parseInt(document.getElementById("first-number").value);
          var b = parseInt(document.getElementById("second-number").value);
          var c = a * b;
          document.getElementById("result").innerHTML = '运算结果=' + c;
        }
        // 除函数divide
        function divideNumber() {
          var a = parseInt(document.getElementById("first-number").value);
          var b = parseInt(document.getElementById("second-number").value);
          var c = a / b;
          document.getElementById("result").innerHTML = '运算结果=' + c;
        }
        var add_btn = document.getElementById("add-btn");
        add_btn.onclick = function () {
          addNumber();
        }

        var minus_btn = document.getElementById("minus-btn");
        minus_btn.onclick = function () {
          minusNumber();
        }

        var times_btn = document.getElementById("times-btn");
        times_btn.onclick = function () {
          timesNumber();
        }

        var divide_btn = document.getElementById("divide-btn");
        divide_btn.onclick = function () {
          divideNumber();
        }
      </script>
    </div>
  </div>
</body>

</html>