设计一个网页, 包含两个页面, 可进行翻页. 第一页包含一个下拉选择框A, 包含A1,A2两个选项; 还包含6个输入框B,分别为B1宽度,B2重量,B3车间温度,B4出炉温度,B5出炉时间(灰色默认显-摩杜云开发者社区

设计一个网页, 包含两个页面, 可进行翻页. 第一页包含一个下拉选择框A, 包含A1,A2两个选项; 还包含6个输入框B,分别为B1宽度,B2重量,B3车间温度,B4出炉温度,B5出炉时间(灰色默认显示为今日的00:00分),B6目标温度(灰色默认显示为50摄氏度); 还包含3个结果框C, 分别为C1当前温度, C2目标温度的时间, C3目标温度的时长. 第二页画出一只小猫.

<!DOCTYPE html>
<html>
<head>
    <title>翻页网页</title>
    <style>
        /* CSS 样式可以在这里定义 */
    </style>
</head>
<body>
    <!-- 第一页 -->
    <div id="page1">
        <h1>第一页</h1>
        <select id="dropdownA">
            <option value="A1">A1</option>
            <option value="A2">A2</option>
        </select>
        <br>
        <label for="inputB1">宽度:</label>
        <input type="text" id="inputB1">
        <br>
        <label for="inputB2">重量:</label>
        <input type="text" id="inputB2">
        <br>
        <label for="inputB3">车间温度:</label>
        <input type="text" id="inputB3">
        <br>
        <label for="inputB4">出炉温度:</label>
        <input type="text" id="inputB4">
        <br>
        <label for="inputB5">出炉时间:</label>
        <input type="text" id="inputB5" placeholder="默认显示为今日的00:00分">
        <br>
        <label for="inputB6">目标温度:</label>
        <input type="text" id="inputB6" placeholder="默认显示为50摄氏度">
        <br>
        <button onclick="calculateResult()">计算结果</button>
        <br>
        <div id="resultC">
            <p>C1当前温度: <span id="outputC1"></span></p>
            <p>C2目标温度的时间: <span id="outputC2"></span></p>
            <p>C3目标温度的时长: <span id="outputC3"></span></p>
        </div>
        <button onclick="goToPage2()">去第二页</button>
    </div>

    <!-- 第二页 -->
    <div id="page2" style="display: none;">
        <h1>第二页</h1>
        <img src="cat.jpg" alt="一只小猫">
        <button onclick="goToPage1()">返回第一页</button>
    </div>

    <script>
        // JavaScript 函数可以在这里定义
        function calculateResult() {
            // 在此处计算结果并更新 C1, C2 和 C3 的内容
        }

        function goToPage2() {
            document.getElementById("page1").style.display = "none";
            document.getElementById("page2").style.display = "block";
        }

        function goToPage1() {
            document.getElementById("page2").style.display = "none";
            document.getElementById("page1").style.display = "block";
        }
    </script>
</body>
</html>