axxsl 2023-06-21 22:17 采纳率: 100%
浏览 98
已结题

求按图制作一个html网页代码

输入长度和宽度 实时显示计算结果。 可在代码里设置不同材质立方值。

img

  • 写回答

3条回答 默认 最新

  • PhoenixRiser 2023-06-21 22:25
    关注

    TechWhizKid参考GPT回答：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>木材计算器</title>
  <style>
    .container {
      margin: 20px;
    }
    label {
      display: inline-block;
      width: 100px;
    }
    input {
      width: 100px;
    }
    button {
      margin-top: 10px;
    }
    #result {
      margin-top: 20px;
    }
  </style>
  <script>
    function calculateCostAndPrice() {
      var length = parseFloat(document.getElementById('length').value);
      var width = parseFloat(document.getElementById('width').value);
      var thickness = parseFloat(document.getElementById('thickness').value);
      var material = document.getElementById('material').value;

      var cubicValue = 0;
      var cost = 0;
      var sellingPrice = 0;

      // Set different cubic values based on the material
      if (material === 'pine') {
        cubicValue = 10000;
      } else if (material === 'beech') {
        cubicValue = 15000;
      }

      // Calculate cost and selling price
      cost = (length * width * thickness * cubicValue) / 1000000;
      sellingPrice = cost * 1.5;

      // Display the results
      document.getElementById('cost').textContent = cost.toFixed(2);
      document.getElementById('sellingPrice').textContent = sellingPrice.toFixed(2);
    }
  </script>
</head>
<body>
  <div class="container">
    <h1>木材计算器</h1>
    <div>
      <label for="length">长度：</label>
      <input type="text" id="length" value="100">
    </div>
    <div>
      <label for="width">宽度：</label>
      <input type="text" id="width" value="100">
    </div>
    <div>
      <label for="thickness">厚度：</label>
      <select id="thickness">
        <option value="2">2cm</option>
        <option value="3">3cm</option>
        <option value="5">5cm</option>
        <option value="8">8cm</option>
      </select>
    </div>
    <div>
      <label for="material">材质：</label>
      <select id="material">
        <option value="pine">松木</option>
        <option value="beech">白腊木</option>
      </select>
    </div>
    <button onclick="calculateCostAndPrice()">计算</button>
    <div id="result">
      <p>成本：<span id="cost"></span>元</p>
      <p>卖价：<span id="sellingPrice"></span>元</p>
    </div>
  </div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 6月29日
  • 已采纳回答 6月21日
  • 创建了问题 6月21日