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

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

img

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>
不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7683966
  • 这篇博客你也可以参考下：前端基础入门教程之html网页代码大全
  • 除此之外, 这篇博客: 致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载中的 作品代码展示 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    说明：本作品为LILIXING.com原创作品，为了保障作品原创性，以下仅为首页部分代码供参考

    <div id="container">
  <div id="banner"> <img src="img/banner.jpg"> </div>
  <div id="globallink"> <!--制作横向导航条，鼠标经过时荧光效果-->
    <ul>
      <li><a href="index.html">网站首页</a></li>
      <li><a href="renwu.html">感动人物</a></li>
      <li><a href="shunjian.html">动人瞬间</a></li>
      <li><a href="shipin.html">感人视频</a></li>
      <li><a href="tuji.html">感动图集</a></li>
    </ul>
  </div>
  <div id="news">
    <h3><span>英雄赞歌</span></h3>
    <ul>
      <li><span><a href="newsa.html"> - 最美方舱播音员</a></li>
      <li><span><a href="newsb.html"> - 可爱的志愿者</a></li>
      <li><span><a href="newsc.html"> - 勇挑重任的90后</a></li>
    </ul>
    <p><img src="img/t5.jpg" ><br>
	<img src="img/t3.jpg" ></p>
  </div>
  <div id="story">
    <h3>向英雄致敬</h3>
    <p> <img src="img/t9.jpg" style="float:right;margin-left: 30px; width:200px;"> 在抗击新冠病毒疫情中，总有那么一些镜头让人泪目和深感温暖。每一个平凡的日子，都有那么一些人为了更好的明天，铭记着初心、担负着使命，选择了逆行，向这些逆风而行的勇士、奋斗在疫情防控一线的逆行天使致以崇高的敬意和衷心的感谢。感谢他们默默的坚守！
      这世上哪有什么岁月静好，只是因为有人在替我们负重前行罢了，这世上哪有什么天生的英雄，只有因为人们需要，才有人愿意牺牲自己成为英雄。每个时代有每个时代的英雄，灾难面前，他们毅然逆向前行，不畏生死，他们当之无愧是这个时代的英雄，向英雄致敬。
    <p>
    <h3>疫情中的温暖和力量</h3>
    <p> <img src="img/t4.jpg" style="float:right;margin-left: 30px; width:200px;"> 武汉老百姓在这场疫情中遭受了疫情带来的苦难，很多人为了亲情、友情付出了自己巨大的爱。还有很多人冒着生命的危险，冲在抗疫第一线。特别是当地的医护人员，他们是伟大的战士，是了不起的英雄。他们从疫情萌芽至今仍在坚守，仍在一线作战，他们的付出、牺牲、奉献，给了我们最大的感动，值得我们给予最高的礼遇，给予英雄的赞美。那些为我们雪地抱薪、深夜提灯的人，不仅值得我们感恩，更值得我。 </p>
  </div>
  <div id="thank">
    <h3>永远铭记</h3>
    <p>一方有难、八方支援，在这场没有硝烟的战场上，一张张冲到第一线的"最美逆行者"的照片刷屏朋友圈，他们毅然决然的背影让人感动、给人力量！历史将会铭记逆行者的无私付出，铭记逆行者的砥砺担当
      。你们是中国坚实的脊梁！ </p>
  </div>
  <div id="footer">
    <p>抗击疫情</p>
  </div>
</div>
  • 以下回答来自chatgpt:

    根据问题和参考资料，可以创建一个动态HTML网页，其可以在用户输入长度和宽度时实时计算并显示结果，同时可以允许不同材料的立方值被设置。下面是一个示例代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dynamic HTML Page</title>
    <style>
        #container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        #inputForm {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #f0f0f0;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        input[type="number"], select {
            margin: 10px 0;
            padding: 5px;
            font-size: 16px;
            text-align: center;
            width: 100%;
        }
        input[type="button"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 20px;
            cursor: pointer;
            width: 100%;
        }
        input[type="button"]:hover {
            background-color: #3e8e41;
        }
        #result {
            margin: 20px 0;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
    <script>
        function calculate() {
            // get input values
            var length = document.getElementById("length").value;
            var width = document.getElementById("width").value;
            var material = document.getElementById("material").value;

            // calculate volume
            var volume = length * width * material;

            // display result
            document.getElementById("result").innerHTML = "The volume of the object is: " + volume;
        }
    </script>
</head>
<body>
    <div id="container">
        <div id="inputForm">
            <form>
                <label for="length">Length:</label>
                <input type="number" name="length" id="length" onchange="calculate()" required>

                <label for="width">Width:</label>
                <input type="number" name="width" id="width" onchange="calculate()" required>

                <label for="material">Material:</label>
                <select name="material" id="material" onchange="calculate()" required>
                    <option value="1.0">Option 1</option>
                    <option value="1.5">Option 2</option>
                    <option value="2.0">Option 3</option>
                </select>

                <input type="button" value="Calculate" onclick="calculate()">
            </form>

            <div id="result">Please enter the dimensions and select the material to calculate the volume.</div>
        </div>
    </div>
</body>
</html>

    代码的具体注释如下：

    • 第1行开始为HTML文档模板，包括标准DOCTYPE声明、html标签和head标签。
    • 在head标签中设置字符编码和页面标题，并添加style标签用于设置CSS样式（参考资料段落2）。
    • 接着添加script标签，用于编写计算方法calculate()（参考资料段落3）。
    • 在body标签中添加一个容器div#container用于占满整个屏幕。
    • 在之中添加一个表单div#inputForm，用于接收用户输入。
    • 在表单中添加三个input元素和一个select元素，用于输入长度、宽度和材料类型，以及提交计算（参考资料段落4）。
    • 在计算功能中使用getElementById()方法获取输入的值，使用计算公式来计算体积，并将结果显示在页面上（参考资料段落5）。
    • 通过innerHTML方法更新id为result的div元素，展示计算结果。
    • 最后，关闭html标签，完成代码编写。

    需要注意的是，以上示例代码仅供参考，具体实现可以根据实际需求进行调整。同时，为了确保用户输入正确和程序运行稳定，可以添加更多的验证和异常处理功能。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

不是不想回答,只是这个太费时间了...