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日