变量更新 输入框 浮动窗口
  X5zJxoD00Cah 2023年11月02日 36 0
在以上代码的基础上,给出完整修改后代码,并在更新处注释,需求如下:
生成变量z6, 计算规则如下:
由输入框(id_width, id_weight)分别获取变量(width, weight), 定义变量density = 2.7*(10**-6),inner_radius = 665,生成变量outer_radius = np.sqrt(
        weight/density/width/np.pi + inner_radius**2
    ),其中np是python中的numpy模块,请转化为对应js语言函数;再生成变量surface_area = 2 * np.pi * (
        outer_radius*width + inner_radius*width + outer_radius**2 - inner_radius**2
    ) / 10**6,其中np是python中的numpy模块,请转化为对应js语言函数;再生成变量z6 = surface_area / weight * 10**4, 其中np是python中的numpy模块,请转化为对应js语言函数;
随着输入框(id_width, id_weight)内的输入值变动,更新变量(width, weight,outer_radius ,surface_area ,z6),并在页面正上方半透明1秒后消失浮窗显示文字,文字内容为“比表面积”+变量z6的值
在以上代码的基础上,给出完整修改后代码,并在更新处注释,需求如下:
生成变量k, 计算规则如下:
默认参数k1, k2, k3, k4, k5, k6 = (0.03691591, -0.01086697, -0.02207111, -0.04971315, -0.06927802, -0.00682166)
k = k1 + np.dot([k2, k3, k4, k5, k6], [z2, z3, z4, z5, z6])
其中np是python中的numpy模块,请转化为对应js语言函数
<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
    <style>
        /* 定义浮动窗口的样式 */
        #floatWindow {
            position: absolute;
            top: 50px;
            left: 100px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框,并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200,y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <!-- 创建一个浮动窗口来显示fun_type的值 -->
    <div id="floatWindow"></div>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var init_time = new Date().toISOString().slice(0, 16); // 当前日期的零点零分
    var init_temp = 310;
    var ambi_temp = 36;
    var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
    var z6 = 19.5;

    // 定义函数changeFunType,当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;

        // 根据fun_type的值设置z2、z3、z4和z5
        switch(fun_type) {
            case '自然冷却':
                z2 = z3 = z4 = z5 = 0;
                break;
            case '单个大风机':
                z2 = 1;
                z3 = z4 = z5 = 0;
                break;
            case '单4风机':
                z3 = 1;
                z2 = z4 = z5 = 0;
                break;
            case '大风机+单4风机':
                z4 = 1;
                z2 = z3 = z5 = 0;
                break;
            case '双4风机':
                z5 = 1;
                z2 = z3 = z4 = 0;
                break;
        }

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);

        // 计算k值
        var k1 = 0.03691591;
        var k2 = -0.01086697;
        var k3 = -0.02207111;
        var k4 = -0.04971315;
        var k5 = -0.06927802;
        var k6 = -0.00682166;
        var k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);

        // 打印k值到控制台
        console.log("k: " + k);
    }

    // 定义函数updateValue,当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }

        // 计算z6
        var density = 2.7 * Math.pow(10, -6);
        var inner_radius = 665;
        var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
        var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
        z6 = surface_area / weight * Math.pow(10, 4);

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }
    </script>

    <!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width" style="font-size: 20px;">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight" style="font-size: 20px;">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
    </div>
</body>
</html>



根据下面的代码更新了上面的代码,但是没有更新默认的输入框的出炉时间

上面的test

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
    <style>
        /* 定义浮动窗口的样式 */
        #floatWindow {
            position: absolute;
            top: 50px;
            left: 100px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框,并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200,y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <!-- 创建一个浮动窗口来显示fun_type的值 -->
    <div id="floatWindow"></div>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var init_time = new Date().toISOString().slice(0, 16); // 当前日期的零点零分
    var init_temp = 310;
    var ambi_temp = 36;
    var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
    var z6 = 19.5;

    // 定义函数changeFunType,当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;

        // 根据fun_type的值设置z2、z3、z4和z5
        switch(fun_type) {
            case '自然冷却':
                z2 = z3 = z4 = z5 = 0;
                break;
            case '单个大风机':
                z2 = 1;
                z3 = z4 = z5 = 0;
                break;
            case '单4风机':
                z3 = 1;
                z2 = z4 = z5 = 0;
                break;
            case '大风机+单4风机':
                z4 = 1;
                z2 = z3 = z5 = 0;
                break;
            case '双4风机':
                z5 = 1;
                z2 = z3 = z4 = 0;
                break;
        }

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }

    // 定义函数updateValue,当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }

        // 计算z6
        var density = 2.7 * Math.pow(10, -6);
        var inner_radius = 665;
        var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
        var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
        z6 = surface_area / weight * Math.pow(10, 4);

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }
    </script>

    <!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width" style="font-size: 20px;">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight" style="font-size: 20px;">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
    </div>

</body>
</html>

下面的test2

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
    <style>
        /* 定义浮动窗口的样式 */
        #floatWindow {
            position: absolute;
            top: 50px;
            left: 100px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框,并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200,y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <!-- 创建一个浮动窗口来显示fun_type的值 -->
    <div id="floatWindow"></div>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var init_time = new Date().toISOString().slice(0, 16); // 当前日期的零点零分
    var init_temp = 310;
    var ambi_temp = 36;
    var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
    var z6;

    // 定义函数changeFunType,当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;

        // 根据fun_type的值设置z2、z3、z4和z5
        switch(fun_type) {
            case '自然冷却':
                z2 = z3 = z4 = z5 = 0;
                break;
            case '单个大风机':
                z2 = 1;
                z3 = z4 = z5 = 0;
                break;
            case '单4风机':
                z3 = 1;
                z2 = z4 = z5 = 0;
                break;
            case '大风机+单4风机':
                z4 = 1;
                z2 = z3 = z5 = 0;
                break;
            case '双4风机':
                z5 = 1;
                z2 = z3 = z4 = 0;
                break;
        }

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }

    // 定义函数updateValue,当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }

        // 计算z6
        var density = 2.7 * Math.pow(10, -6);
        var inner_radius = 665;
        var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
        var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
        z6 = surface_area / weight * Math.pow(10, 4);

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }
    </script>

    <!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width" style="font-size: 20px;">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight" style="font-size: 20px;">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="2023-10-24T00:00" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
    </div>

</body>
</html>


我为变量再次增加了默认值

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
    <style>
        /* 定义浮动窗口的样式 */
        #floatWindow {
            position: absolute;
            top: 50px;
            left: 100px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框,并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200,y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <!-- 创建一个浮动窗口来显示fun_type的值 -->
    <div id="floatWindow"></div>

    <script>
    // 初始化变量
    // 初始化变量
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var init_time = new Date().toISOString().slice(0, 16); // 当前日期的零点零分
    var init_temp = 310;
    var ambi_temp = 36;
    var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
    var z6 = 19.5;

    // 定义函数changeFunType,当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;

        // 根据fun_type的值设置z2、z3、z4和z5
        switch(fun_type) {
            case '自然冷却':
                z2 = z3 = z4 = z5 = 0;
                break;
            case '单个大风机':
                z2 = 1;
                z3 = z4 = z5 = 0;
                break;
            case '单4风机':
                z3 = 1;
                z2 = z4 = z5 = 0;
                break;
            case '大风机+单4风机':
                z4 = 1;
                z2 = z3 = z5 = 0;
                break;
            case '双4风机':
                z5 = 1;
                z2 = z3 = z4 = 0;
                break;
        }

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }

    // 定义函数updateValue,当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }

        // 计算z6
        var density = 2.7 * Math.pow(10, -6);
        var inner_radius = 665;
        var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
        var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
        z6 = surface_area / weight * Math.pow(10, 4);

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }
    </script>

    <!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width" style="font-size: 20px;">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight" style="font-size: 20px;">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
    </div>

</body>
</html>

增加默认值

以下是修改后的代码,我已经添加了变量z6,并根据width和weight的值来计算它。当width或weight改变时,我也添加了一个浮动窗口来显示z6的新值。这个窗口会在1秒后自动消失。以下是更新的部分:

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
    <style>
        /* 定义浮动窗口的样式 */
        #floatWindow {
            position: absolute;
            top: 50px;
            left: 100px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框,并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200,y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <!-- 创建一个浮动窗口来显示fun_type的值 -->
    <div id="floatWindow"></div>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width=1680, weight=12720, init_time, init_temp=310, ambi_temp=36;
    var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
    var z6;

    // 定义函数changeFunType,当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;

        // 根据fun_type的值设置z2、z3、z4和z5
        switch(fun_type) {
            case '自然冷却':
                z2 = z3 = z4 = z5 = 0;
                break;
            case '单个大风机':
                z2 = 1;
                z3 = z4 = z5 = 0;
                break;
            case '单4风机':
                z3 = 1;
                z2 = z4 = z5 = 0;
                break;
            case '大风机+单4风机':
                z4 = 1;
                z2 = z3 = z5 = 0;
                break;
            case '双4风机':
                z5 = 1;
                z2 = z3 = z4 = 0;
                break;
        }

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }

    // 定义函数updateValue,当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }

        // 计算z6
        var density = 2.7 * Math.pow(10, -6);
        var inner_radius = 665;
        var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
        var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
        z6 = surface_area / weight * Math.pow(10, 4);

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }
    </script>

    <!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width" style="font-size: 20px;">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight" style="font-size: 20px;">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
    </div>

</body>
</html>

这段代码将在页面上创建五个新的输入框和对应的标签,每个输入框都有一个默认值,并且它们的结果都绑定到了一个变量。每个输入框上方都有一个标签,显示了输入框的内容。这些输入框和标签都位于一个名为inputFields<div>元素中,并且它们的位置已经被设置为x=100,y=150。然后,我在每个输入框和标签之间添加了一些边距,以确保它们不会相互遮挡。如果您希望更改这些元素的布局或样式,您可以修改这个<div>元素或其中的任何子元素。如果用户更改了输入框中的值,相应的变量就会被更新。这是通过将每个输入框的onchange事件处理器设置为updateValue函数来实现的。这个函数会根据输入框的ID来更新对应的变量。最后,请注意,我已经将出炉时间的输入类型设置为datetime-local,这将允许用户选择日期和时间。然而,HTML不支持将此输入类型的默认值设置为当前日期和时间,因此我将其默认值留空。如果您希望在页面加载时自动填充当前日期和时间,您可能需要使用JavaScript来实现这一点。

此外,我还添加了一个浮动窗口来显示z6的







在以上代码的基础上,给出完整修改后代码,并在更新处注释,需求如下:

生成变量z2,z3,z4,z5;如果变量fun_type = “自然冷却”,则z2,z3,z4,z5均为0;如果变量fun_type=“单个大风机”,则z2=1,z3,z4,z5均为0;如果变量fun_type="单4风机“,则z3=1,z2,z4,z5均为0;如果变量fun_type="大风机+单4风机",则z4=1,z2,z3,z5均为0;如果变量fun_type="双4风机", 则z5=1,z2,z3,z4均为0;当输入框id_fan_type发生变动时,页面正上方半透明1秒后消失浮窗显示文字,文字内容为变量fun_type的值

https://blog.51cto.com/u_16055028/8000211

以下是修改后的代码,我已经添加了变量z2、z3、z4和z5,并根据fun_type的值来设置它们。当fun_type改变时,我也添加了一个浮动窗口来显示fun_type的新值。这个窗口会在1秒后自动消失。以下是更新的部分:

<!DOCTYPE html>
<html>
<head>
    <title>风机类型选择</title>
    <style>
        /* 定义浮动窗口的样式 */
        #floatWindow {
            position: absolute;
            top: 50px;
            left: 100px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>

    <!-- 创建一个下拉选择框,并将字体大小设置为20px -->
    <!-- 将下拉选择框的位置移动到x=200,y=100 -->
    <select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
        <!-- 设置下拉选项 -->
        <option value="自然冷却" selected>自然冷却</option>
        <option value="单个大风机">单个大风机</option>
        <option value="单4风机">单4风机</option>
        <option value="大风机+单4风机">大风机+单4风机</option>
        <option value="双4风机">双4风机</option>
    </select>

    <!-- 创建一个浮动窗口来显示fun_type的值 -->
    <div id="floatWindow"></div>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width, weight, init_time, init_temp, ambi_temp;
    var z2 = 0, z3 = 0, z4 = 0, z5 = 0;

    // 定义函数changeFunType,当选择项改变时更新fun_type的值
    function changeFunType(selectObject) {
        fun_type = selectObject.value;

        // 根据fun_type的值设置z2、z3、z4和z5
        switch(fun_type) {
            case '自然冷却':
                z2 = z3 = z4 = z5 = 0;
                break;
            case '单个大风机':
                z2 = 1;
                z3 = z4 = z5 = 0;
                break;
            case '单4风机':
                z3 = 1;
                z2 = z4 = z5 = 0;
                break;
            case '大风机+单4风机':
                z4 = 1;
                z2 = z3 = z5 = 0;
                break;
            case '双4风机':
                z5 = 1;
                z2 = z3 = z4 = 0;
                break;
        }

        // 显示浮动窗口,并在1秒后自动隐藏
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
    }

    // 定义函数updateValue,当输入框的值改变时更新对应的变量
    function updateValue(id, value) {
        switch(id) {
            case 'id_width':
                width = value;
                break;
            case 'id_weight':
                weight = value;
                break;
            case 'id_init_time':
                init_time = value;
                break;
            case 'id_init_temp':
                init_temp = value;
                break;
            case 'id_ambi_temp':
                ambi_temp = value;
                break;
        }
    }
    </script>

    <!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
    <div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
        <div style="margin-bottom: 20px;">
            <label for="id_width" style="font-size: 20px;">宽度mm</label><br>
            <input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_weight" style="font-size: 20px;">重量kg</label><br>
            <input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
            <input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
            <input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
        <div style="margin-bottom: 20px;">
            <label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
            <input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
        </div>
    </div>

</body>
</html>

这段代码将在页面上创建五个新的输入框和对应的标签,每个输入框都有一个默认值,并且它们的结果都绑定到了一个变量。每个输入框上方都有一个标签,显示了输入框的内容。这些输入框和标签都位于一个名为inputFields<div>元素中,并且它们的位置已经被设置为x=100,y=150。然后,我在每个输入框和标签之间添加了一些边距,以确保它们不会相互遮挡。如果您希望更改这些元素的布局或样式,您可以修改这个<div>元素或其中的任何子元素。如果用户更改了输入框中的值,相应的变量就会被更新。这是通过将每个输入框的onchange事件处理器设置为updateValue函数来实现的。这个函数会根据输入框的ID来更新对应的变量。最后,请注意,我已经将出炉时间的输入类型设置为datetime-local,这将允许用户选择日期和时间。然而,HTML不支持将此输入类型的默认值设置为当前日期和时间,因此我将其默认值留空。如果您希望在页面加载时自动填充当前日期和时间,您可能需要使用JavaScript来实现这一点。

此外,我还添加了一个浮动窗口来显示fun_type的新值。当fun_type改变时,这个窗口会显示出来,并在1秒后自动消失。这是通过在changeFunType函数中使用setTimeout函数来实现的。如果您希望更改浮动窗口的样式或行为,您可以修改CSS样式或JavaScript代码。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  X5zJxoD00Cah   2023年11月19日   37   0   0 管理系统githtml
  X5zJxoD00Cah   2023年11月26日   45   0   0 Pythonhtml
  zhRhucGD3dLm   2023年11月22日   40   0   0 属性选择器选择器html
X5zJxoD00Cah