绘制一个随着变量值k，init_temp，ambi_temp的更新而变动的曲线图
  X5zJxoD00Cah 2023年11月02日 54 0

text8 调整

<!DOCTYPE html>
<html>
<head>
    <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>
    <h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
    <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>
    <div id="floatWindow"></div>
    <!--添加cavas标题-->
    <div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
    <!-- 添加横坐标标签 -->
    <span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
    <!-- 添加纵坐标标签 -->
    <span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">温度（摄氏度）</span>

    <script>
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    var init_time = currentDate.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;

    //更新函数
    function updateFormula() {
        var formulaDiv = document.getElementById('formula');
        formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
    }

    function changeFunType(selectObject) {
        fun_type = selectObject.value;
        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;
        }
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        updateFormula(); // 更新函数
        drawGraph();
    }

    function calculateK() {
        var k1 = 0.03691591;
        var k2 = -0.01086697;
        var k3 = -0.02207111;
        var k4 = -0.04971315;
        var k5 = -0.06927802;
        var k6 = -0.00682166;
        window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
    }

    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
        var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
            ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
            ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
        }
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    function updateValue(elementId, elementValue) {
        switch(elementId) {
            case 'id_width':
                width = parseFloat(elementValue);
                break;
            case 'id_weight':
                weight = parseFloat(elementValue);
                break;
            case 'id_init_time':
                init_time = elementValue;
                break;
            case 'id_init_temp':
                init_temp = parseFloat(elementValue);
                break;
            case 'id_ambi_temp':
                ambi_temp = parseFloat(elementValue);
                break;
        }
        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);
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        updateFormula(); // 更新函数
        drawGraph();
    }

    window.onload = function() {
        calculateK();
        updateFormula(); // 更新函数
        drawGraph();
    }
    </script>

    <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>

text7 增加图像标题公式

<!DOCTYPE html>
<html>
<head>
    <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>
    <h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
    <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>
    <div id="floatWindow"></div>
    <!--添加cavas标题-->
    <div id="formula" style="position: absolute; left: 400px; top: 70px; font-size: 16px;"></div>
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
    <!-- 添加横坐标标签 -->
    <span style="position: absolute; left: 800px; top: 550px; font-size: 16px;">时间（小时）</span>
    <!-- 添加纵坐标标签 -->
    <span style="position: absolute; left: 310px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">温度（摄氏度）</span>

    <script>
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    var init_time = currentDate.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;

    //更新函数
    function updateFormula() {
        var formulaDiv = document.getElementById('formula');
        formulaDiv.innerHTML = "y = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * x) + " + ambi_temp;
    }

    function changeFunType(selectObject) {
        fun_type = selectObject.value;
        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;
        }
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        updateFormula(); // 更新函数
        drawGraph();
    }

    function calculateK() {
        var k1 = 0.03691591;
        var k2 = -0.01086697;
        var k3 = -0.02207111;
        var k4 = -0.04971315;
        var k5 = -0.06927802;
        var k6 = -0.00682166;
        window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
    }

    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
        var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
            ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
            ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
        }
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    function updateValue(elementId, elementValue) {
        switch(elementId) {
            case 'id_width':
                width = parseFloat(elementValue);
                break;
            case 'id_weight':
                weight = parseFloat(elementValue);
                break;
            case 'id_init_time':
                init_time = elementValue;
                break;
            case 'id_init_temp':
                init_temp = parseFloat(elementValue);
                break;
            case 'id_ambi_temp':
                ambi_temp = parseFloat(elementValue);
                break;
        }
        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);
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        updateFormula(); // 更新函数
        drawGraph();
    }

    window.onload = function() {
        calculateK();
        updateFormula(); // 更新函数
        drawGraph();
    }
    </script>

    <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>

text6 只修改了h1绝对位置

<!DOCTYPE html>
<html>
<head>
    <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>
    <h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
    <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>
    <div id="floatWindow"></div>
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
    <!-- 添加横坐标标签 -->
    <span style="position: absolute; left: 800px; top: 550px; font-size: 16px;">时间（小时）</span>
    <!-- 添加纵坐标标签 -->
    <span style="position: absolute; left: 310px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">温度（摄氏度）</span>

    <script>
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    var init_time = currentDate.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;

    function changeFunType(selectObject) {
        fun_type = selectObject.value;
        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;
        }
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    function calculateK() {
        var k1 = 0.03691591;
        var k2 = -0.01086697;
        var k3 = -0.02207111;
        var k4 = -0.04971315;
        var k5 = -0.06927802;
        var k6 = -0.00682166;
        window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
    }

    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
        var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
            ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
            ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
        }
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    function updateValue(elementId, elementValue) {
        switch(elementId) {
            case 'id_width':
                width = parseFloat(elementValue);
                break;
            case 'id_weight':
                weight = parseFloat(elementValue);
                break;
            case 'id_init_time':
                init_time = elementValue;
                break;
            case 'id_init_temp':
                init_temp = parseFloat(elementValue);
                break;
            case 'id_ambi_temp':
                ambi_temp = parseFloat(elementValue);
                break;
        }
        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);
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    window.onload = function() {
        calculateK();
        drawGraph();
    }
    </script>

    <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>

text5

<!DOCTYPE html>
<html>
<head>
    <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>
    <h1 style="text-align: left;">料温预测</h1>
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
    <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>
    <div id="floatWindow"></div>
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
    <!-- 添加横坐标标签 -->
    <span style="position: absolute; left: 800px; top: 550px; font-size: 16px;">时间（小时）</span>
    <!-- 添加纵坐标标签 -->
    <span style="position: absolute; left: 310px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">温度（摄氏度）</span>

    <script>
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    var init_time = currentDate.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;

    function changeFunType(selectObject) {
        fun_type = selectObject.value;
        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;
        }
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    function calculateK() {
        var k1 = 0.03691591;
        var k2 = -0.01086697;
        var k3 = -0.02207111;
        var k4 = -0.04971315;
        var k5 = -0.06927802;
        var k6 = -0.00682166;
        window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
    }

    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
        var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
            ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
            ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
        }
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    function updateValue(elementId, elementValue) {
        switch(elementId) {
            case 'id_width':
                width = parseFloat(elementValue);
                break;
            case 'id_weight':
                weight = parseFloat(elementValue);
                break;
            case 'id_init_time':
                init_time = elementValue;
                break;
            case 'id_init_temp':
                init_temp = parseFloat(elementValue);
                break;
            case 'id_ambi_temp':
                ambi_temp = parseFloat(elementValue);
                break;
        }
        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);
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    window.onload = function() {
        calculateK();
        drawGraph();
    }
    </script>

    <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>


text4

<!DOCTYPE html>
<html>
<head>
    <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>
    <h1 style="text-align: left;">料温预测</h1>
    <label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
    <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>
    <div id="floatWindow"></div>
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
    <!-- 添加横坐标标签 -->
    <span style="position: absolute; left: 800px; top: 550px; font-size: 16px;">时间（小时）</span>
    <!-- 添加纵坐标标签 -->
    <span style="position: absolute; left: 310px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">温度（摄氏度）</span>

    <script>
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    var init_time = currentDate.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;

    function changeFunType(selectObject) {
        fun_type = selectObject.value;
        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;
        }
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    function calculateK() {
        var k1 = 0.03691591;
        var k2 = -0.01086697;
        var k3 = -0.02207111;
        var k4 = -0.04971315;
        var k5 = -0.06927802;
        var k6 = -0.00682166;
        window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
    }

    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
        }
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    function updateValue(elementId, elementValue) {
        switch(elementId) {
            case 'id_width':
                width = parseFloat(elementValue);
                break;
            case 'id_weight':
                weight = parseFloat(elementValue);
                break;
            case 'id_init_time':
                init_time = elementValue;
                break;
            case 'id_init_temp':
                init_temp = parseFloat(elementValue);
                break;
            case 'id_ambi_temp':
                ambi_temp = parseFloat(elementValue);
                break;
        }
        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);
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    window.onload = function() {
        calculateK();
        drawGraph();
    }
    </script>

    <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>

text3

<!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>
    <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>
    <div id="floatWindow"></div>
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>

    <script>
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720;
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    var init_time = currentDate.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;

    function changeFunType(selectObject) {
        fun_type = selectObject.value;
        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;
        }
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = fun_type;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    function calculateK() {
        var k1 = 0.03691591;
        var k2 = -0.01086697;
        var k3 = -0.02207111;
        var k4 = -0.04971315;
        var k5 = -0.06927802;
        var k6 = -0.00682166;
        window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
    }

    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
        }
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    function updateValue(elementId, elementValue) {
        switch(elementId) {
            case 'id_width':
                width = parseFloat(elementValue);
                break;
            case 'id_weight':
                weight = parseFloat(elementValue);
                break;
            case 'id_init_time':
                init_time = elementValue;
                break;
            case 'id_init_temp':
                init_temp = parseFloat(elementValue);
                break;
            case 'id_ambi_temp':
                ambi_temp = parseFloat(elementValue);
                break;
        }
        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);
        var floatWindow = document.getElementById('floatWindow');
        floatWindow.innerHTML = "比表面积: " + z6;
        floatWindow.style.display = 'block';
        setTimeout(function() {
            floatWindow.style.display = 'none';
        }, 1000);
        calculateK();
        drawGraph();
    }

    window.onload = function() {
        calculateK();
        drawGraph();
    }
    </script>

    <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>

text2

<!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>
    
    <!-- 添加canvas元素 -->
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>

    <script>
    // 初始化变量
    var fun_type = "自然冷却";
    var width = 1680;
    var weight = 12720; // 修正变量名
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0); // 设置时间为零点零分
    var init_time = currentDate.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);
        // 调用绘图函数
        drawGraph();
    }

    // 绘制曲线图的函数
    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');

        // 清除之前的绘制内容
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制灰色半透明网格线
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
        }

        // 绘制曲线
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    // 定义函数updateValue，当输入框的值改变时更新对应的变量
    function updateValue(elementId, elementValue) {
        switch(elementId) {
            case 'id_width':
                width = elementValue;
                break;
            case 'id_weight':
                weight = elementValue;
                break;
            case 'id_init_time':
                init_time = elementValue;
                break;
            case 'id_init_temp':
                init_temp = elementValue;
                break;
            case 'id_ambi_temp':
                ambi_temp = elementValue;
                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);

        // 调用绘图函数
        drawGraph();
    }

    // 页面加载完成后，首次绘制图形
    window.onload = function() {
        drawGraph();
    }
    </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>

text1

<!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>
在以上代码的基础上，给出完整修改后代码，并在更新处注释，需求如下：
以页面的x=400，y=100的位置为图片的左上角顶点，在高度400，宽度800的canvas上绘制一个随着变量值k，init_temp，ambi_temp的更新而变动的曲线图，横坐标为x，纵坐标为y，x在0到70范围, y在0到410范围，根据公式y = (init_temp-ambi_temp) * np.exp(k*x) + ambi_temp绘制曲线图，并添加灰色半透明网格线用以标识坐标，其中np是python中的numpy模块，请转化为对应js语言函数

以页面的x=400，y=100的位置为图片的左上角顶点，在高度400，宽度800的canvas上绘制一个随着变量值k，init_temp，ambi_temp的更新而变动的曲线图，横坐标为x，纵坐标为y，x在0到70范围, y在0到410范围，根据公式y = (init_temp-ambi_temp) * np.exp(k*x) + ambi_temp绘制曲线图，并添加灰色半透明网格线用以标识坐标，其中np是python中的numpy模块，请转化为对应js语言函数

为了实现上述需求，我们需要做以下几个步骤：

  1. 在HTML中添加一个<canvas>元素来绘制图形。
  2. 在JavaScript中，添加一个函数来绘制曲线图。
  3. 在changeFunType和updateValue函数中，每次变量更新后调用上述绘图函数。

以下是修改后的代码：

<!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>
    <!-- ...原有的HTML内容... -->

    <!-- 添加canvas元素 -->
    <canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>

    <script>
    // ...原有的JavaScript内容...

    // 绘制曲线图的函数
    function drawGraph() {
        var canvas = document.getElementById('graphCanvas');
        var ctx = canvas.getContext('2d');

        // 清除之前的绘制内容
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制灰色半透明网格线
        ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
        for (var i = 0; i <= canvas.width; i += 40) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
        }
        for (var j = 0; j <= canvas.height; j += 40) {
            ctx.beginPath();
            ctx.moveTo(0, j);
            ctx.lineTo(canvas.width, j);
            ctx.stroke();
        }

        // 绘制曲线
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        for (var x = 0; x <= 70; x += 1) {
            var y = (init_temp - ambi_temp) * Math.exp(k * x) + ambi_temp;
            if (x === 0) {
                ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            } else {
                ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
            }
        }
        ctx.stroke();
    }

    // 在changeFunType和updateValue函数的末尾调用drawGraph函数
    function changeFunType(selectObject) {
        // ...原有的代码...
        
        console.log("k: " + k);

        drawGraph(); // 调用绘图函数
    }

    function updateValue(id, value) {
        // ...原有的代码...

        drawGraph(); // 调用绘图函数
    }

    // 页面加载完成后，首次绘制图形
    window.onload = function() {
        drawGraph();
    }
    </script>

    <!-- ...原有的HTML内容... -->
</body>
</html>

在上述代码中，我添加了一个<canvas>元素，并在JavaScript中定义了一个drawGraph函数来绘制曲线图。每次fun_type、init_temp或ambi_temp的值发生变化时，都会调用这个函数来更新图形。

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

暂无评论

推荐阅读
  X5zJxoD00Cah   2023年12月12日   33   0   0 Windows下拉列表框html
  X5zJxoD00Cah   2023年12月06日   30   0   0 重命名Pythonhtml
  X5zJxoD00Cah   2023年11月19日   41   0   0 Pythonhtml字符串
  X5zJxoD00Cah   2023年11月19日   37   0   0 管理系统githtml
  X5zJxoD00Cah   2023年11月13日   38   0   0 d3html
  Qp5JTyIxtbwu   2023年12月06日   40   0   0 githubgithtml
  X5zJxoD00Cah   2023年11月28日   32   0   0 极客缺失值html
  1A7r4m76aU2o   2023年11月19日   31   0   0 CSS绑定js操作多class事件或样式htmlcss样式
  X5zJxoD00Cah   2023年11月13日   33   0   0 DjangoPythonhtml
  X5zJxoD00Cah   2023年11月26日   45   0   0 Pythonhtml
  1A7r4m76aU2o   2023年11月22日   30   0   0 js定时器mathsetInterval随机数setTimeout
  X5zJxoD00Cah   2023年11月19日   41   0   0 个人网站CSShtml
  mI9UAoKRV29B   2023年12月12日   33   0   0 软件开发html管理工具
  ma7STf0DFGgR   2023年11月24日   36   0   0 输入框html插件开发
  zhRhucGD3dLm   2023年11月22日   40   0   0 属性选择器选择器html
  X5zJxoD00Cah   2023年11月28日   38   0   0 时间戳html数据集
  X5zJxoD00Cah   2023年12月06日   32   0   0 快捷键知乎html
  X5zJxoD00Cah   2023年12月06日   39   0   0 Pythonhtml字符串
  X5zJxoD00Cah   2023年11月13日   36   0   0 HTML5html
  zhRhucGD3dLm   2023年12月06日   33   0   0 响应式布局CSShtml
X5zJxoD00Cah
X5zJxoD00Cah
作者其他文章 更多
通过cmd运行脚本 输入变量 输出变量

2023-12-12

你的代码中出现的错误`NameError: name '__file__' is not defined`表示Python无法找到`__file__`这个变量。`__file__`是一个特殊的变量，它

2023-12-12

在Python中，你可以使用`pymssql`库来连接到Microsoft SQL Server数据库¹²³⁴⁵。以下是一个示例： ```python import pymssql # 连接参数

2023-12-12

如何为防火墙添加运行执行的例外程序？-

2023-12-12

使用Python开发一个操作系统是一项复杂的任务，因为操作系统通常需

2023-12-12

在CMD中运行Python脚本时，如果出现中文乱码

2023-12-12

python查看库版本

2023-12-12

要安装特定版本的Python库，您可以使用pip命令并指定所需的版本。例如，如果您想安装特定版本的numpy，比如1.21.0，您可以使用以下命令： ```bash pip install nump

2023-12-12

pymssql访问数据库时报错20002

2023-12-12

用pyodbc 代替 pymssql 连接 mssql

2023-12-12

最新推荐 更多
Hexo发布管理工具

2024-03-28

GitLab (v16.x) 简述及安装部署

2024-03-13

开源无代码 / 低代码平台 NocoBase 0.20：支持多数据源

2024-03-11

易6画 - 在线海报ppt制作平台

2024-03-02

解读 平 台工程，DevOps真的死了吗？不，它只是换了个马甲而已，弥补了DevOps空心理论，让DevOps继续发展壮大

2024-02-27

Docker

2024-02-27

mdbook安装使用实录

2024-02-22

【更新公告】AirtestIDE更新至1.2.17版本

2024-02-22

在线图片生成工具：定制化占位图片的利器

2024-02-20

1、Git简介

2024-02-19

发布、部署，傻傻分不清楚？从概念到实际场景，再到工具应用，一篇文章让你彻底搞清楚

2024-02-19

2、Git之Windows版本的安装

2024-02-19

使用Git向Gitee仓库推送项目的完整流程

2024-02-19

测试

2024-01-22

[【stars-one】Android图标生成器 PC工具

2024-01-21

ai文章创作助手，大模型原创助手，已对接rpcms

2024-01-15

如何写好技术文档 - 排版格式和规范(一)

2024-01-12

还在用Jekins？快来试试这款比Jekins简而轻的自动部署软件！

2023-12-29

绿色Windows版gvim

2023-12-29

Golang实现JAVA虚拟机-运行时数据区

2023-12-25

常用标签
数据数据数据数据javalinuxlinuxpythonCentOSredisJavapython区块链技术区块链信息系统字符串MySQL资讯项目管理mysql教程MySQL