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日

悬赏问题

  • ¥15 yolov5目标检测并显示目标出现的时间或视频帧
  • ¥15 电视版的优酷可以设置电影连续播放吗？
  • ¥50 复现论文；matlab代码编写
  • ¥30 echarts 3d地图怎么实现一进来页面散点数据和卡片一起轮播
  • ¥15 数字图像的降噪滤波增强
  • ¥15 心碎了，为啥我的神经网络训练的时候第二个批次反向传播会报错呀，第一个批次都没有问题
  • ¥15 MSR2680-XS路由器频繁卡顿问题
  • ¥15 VB6可以成功读取的文件，用C#读不了
  • ¥15 如何使用micpyhon解析Modbus RTU返回指定站号的湿度值，并确保正确？
  • ¥15 C++ 句柄后台鼠标拖动如何实现