0
点赞
收藏
分享

微信扫一扫

绘制一个随着变量值k，init_temp，ambi_temp的更新而变动的曲线图

萨科潘 2023-10-24 阅读 47
MathhtmlHTML软件研发

<!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的值发生变化时，都会调用这个函数来更新图形。

举报

相关推荐

vue：引用传递参数值，更改其中一个变量值,另一个变量值同步改变

vue.jsjavascript前端

python绘制曲线图,设置图标x轴的标签

python数据Python后端开发

2023.1.10交换两个变量值的函数

cC/C++编程语言

写一个html的代码，使用js绘制一个可交互的指数曲线图，默认是y=e^-x，可以在网页上根据提示输入参数k，曲线自动更新为y=e^-kx

输入框htmljs库软件研发

使用js去控制css中的变量值完成一个简单的换肤功能

工作上遇过的问题点前端开发那些事儿

一个执行计划异常变更的案例 - 外传之查看绑定变量值的几种方法

绑定变量sqlSQLHarmonyOS后端开发

使用python 绘制不同冷却方式下 物料温度随时间的变化曲线图

Time数据图例软件研发

使用R绘制气泡图、带有显著性标记的热力图、渐变曲线图

linuxvim运维

实现两个变量值的互换[C语言和C++的区别]

C++C传值c语言c++编程语言

Leetcode2011. 执行操作后的变量值(可以,一次过)

字符串数组编程语言i++Linux系统/运维
0 条评论