首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想创建两个计算器并排放置与html

为了创建两个计算器并排放置在HTML中,您可以使用HTML、CSS和JavaScript来实现。下面是一个示例代码,展示了如何创建两个计算器并将它们并排放置在HTML页面中:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <style>
    .calculator {
      float: left;
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <h2>计算器1</h2>
    <input type="text" id="num1" placeholder="输入第一个数字">
    <input type="text" id="num2" placeholder="输入第二个数字">
    <button onclick="add()">相加</button>
    <button onclick="subtract()">相减</button>
    <p id="result1"></p>
  </div>

  <div class="calculator">
    <h2>计算器2</h2>
    <input type="text" id="num3" placeholder="输入第一个数字">
    <input type="text" id="num4" placeholder="输入第二个数字">
    <button onclick="multiply()">相乘</button>
    <button onclick="divide()">相除</button>
    <p id="result2"></p>
  </div>

  <script>
    function add() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
      var result = num1 + num2;
      document.getElementById("result1").innerHTML = "结果:" + result;
    }

    function subtract() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
      var result = num1 - num2;
      document.getElementById("result1").innerHTML = "结果:" + result;
    }

    function multiply() {
      var num3 = parseFloat(document.getElementById("num3").value);
      var num4 = parseFloat(document.getElementById("num4").value);
      var result = num3 * num4;
      document.getElementById("result2").innerHTML = "结果:" + result;
    }

    function divide() {
      var num3 = parseFloat(document.getElementById("num3").value);
      var num4 = parseFloat(document.getElementById("num4").value);
      var result = num3 / num4;
      document.getElementById("result2").innerHTML = "结果:" + result;
    }
  </script>
</body>
</html>

这段代码创建了两个计算器,每个计算器都有两个输入框用于输入数字,以及相应的操作按钮和结果显示区域。您可以根据需要进行样式和功能的调整。

请注意,这只是一个简单的示例,用于演示如何创建两个计算器并排放置在HTML页面中。在实际开发中,您可能需要更复杂的逻辑和功能来实现完整的计算器应用程序。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券