РАСЧЕТ 1 ДЗ ОСНОВЫ ТЕОРИИ 

In this example below you will see how to do a РАСЧЕТ 1 ДЗ ОСНОВЫ ТЕОРИИ  with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by andreyxdd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andreyxdd ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>РАСЧЕТ 1 ДЗ ОСНОВЫ ТЕОРИИ ТЕПЛОМАССООБЕМНА</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body style="background-color:#F0F8FF;">
    <div class="container">
        <h1>РАСЧЕТ 1 ДЗ ОСНОВЫ ТЕОРИИ ТЕПЛОМАССООБЕМНА</h1>
        <div>
            Введите начальные данные своего варианта (*в формах введены данные разобранного примера из методички Рыжкова):
        </div>

        <form id="form1" action="">
            Коэффициент B:
            <input type="text" value="39">
            <br> Коэффициент p:
            <input type="text" value="0.65">
            <br> Коэффициент C:
            <input type="text" value="720">
            <br> Коэффициент H:
            <input type="text" value="56">
            <br> Коэффициент E:
            <input type="text" value="1015.6">
        </form>
        <br>
        <p>Нажмите кнопку "проверить" для проверки введеных данных</p>
        <button onclick="prove()">Проверить</button>
        <br>
        <br>
        <p>Нажмите кнопку "Рассчитать"</p>
        <button onclick="foo()">Рассчитать</button>
        <br>
        <h3>Температура окружающей среды и коэффициенты теплоотдачи: </h3>
        <p id="demo1"></p>
        <h3>Результаты распределения температуры в двухслойной стенке</h3>
        <table id="tbl">
            <tr>
                <td>

                </td>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
                <td>
                    4
                </td>
                <td>
                    5
                </td>
                <td>
                    6
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr id="Ai">

            </tr>
            <tr id="Di">

            </tr>
            <tr id="Fi">

            </tr>
            <tr id="Gi">

            </tr>
            <tr id="Ri">

            </tr>
            <tr id="G_ARi">

            </tr>
            <tr id="T0">

            </tr>
            <tr id="Q1i">

            </tr>
            <tr id="T1i">

            </tr>
            <tr id="Q2i">

            </tr>
            <tr id="T2i">

            </tr>
            <tr id="Q3i">

            </tr>
            <tr id="T3i">

            </tr>
            <tr id="Q4i">

            </tr>
            <tr id="T4i">

            </tr>
            <tr id="Q5i">

            </tr>
            <tr id="T5i">

            </tr>
            <tr id="Q6i">

            </tr>
            <tr id="T6i">

            </tr>
            <tr id="Q7i">

            </tr>
            <tr id="T7i">

            </tr>
            <tr id="Q8i">

            </tr>
            <tr id="T8i">

            </tr>
            <tr id="Q9i">

            </tr>
            <tr id="T9i">

            </tr>
            <tr id="Q10i">

            </tr>
            <tr id="T10i">

            </tr>

        </table>
        <br>

        <div id="myDiv" style="width: 600px; height: 900px;">
            <!-- Plotly chart will be drawn inside this DIV -->
        </div>
    </div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/andreyxdd/andx420andx410andx421andx427andx415andx422-1-andx414andx417-andx41eandx421andx41dandx41eandx412andx42b-andx422andx415andx41eandx420andx418andx418-andx4-peyqKj */
table {
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        td {
            text-align: center;
            border: 1px solid black;
            border-collapse: collapse;
            width: 50px;
        }

/*Downloaded from https://www.codeseek.co/andreyxdd/andx420andx410andx421andx427andx415andx422-1-andx414andx417-andx41eandx421andx41dandx41eandx412andx42b-andx422andx415andx41eandx420andx418andx418-andx4-peyqKj */
function prove() {
            var arr = document.getElementById("form1");
            if (!(/^\d{2}$/g.test(arr.elements[0].value))) {
                alert("Коэффицент B введен нееверно!");
            } else if (!(/^\d{1}\.(\d{2}|\d{1})$/g.test(arr.elements[1].value))) {
                alert("Коэффицент p введен нееверно!");
            } else if (!(/^\d{3}$/g.test(arr.elements[2].value))) {
                alert("Коэффицент C введен нееверно!");
            } else if (!(/^\d{2}$/g.test(arr.elements[3].value))) {
                alert("Коэффицент H введен нееверно!");
            } else if (!(/^(\d{3}|\d{4})(\.|\d{0})(\d{1}|\d{0})$/g.test(arr.elements[4].value))) {
                alert("Коэффицент E введен нееверно!");
            } else {
                alert("Данные введены верно!");
            }
        }
        
        
        function clearCell(str){
            document.getElementById(str).innerHTML = "";
        }
        
        function foo() {
            
            clearCell("Ai");
            clearCell("Di");
            clearCell("Fi");
            clearCell("Gi");
            clearCell("Ri");
            clearCell("G_ARi");
            clearCell("T0");
            
            for (var j = 0; j < 10; j++) {
                var str = "Q" + (j + 1).toString() + "i";
                clearCell(str);
            }

            for (var j = 0; j < 10; j++) {
                var str = "T" + (j + 1).toString() + "i";
                clearCell(str);
            }
            
            
            
            var B = Number(document.getElementById("form1").elements[0].value);
            var p = Number(document.getElementById("form1").elements[1].value);
            var C = Number(document.getElementById("form1").elements[2].value);
            var H = Number(document.getElementById("form1").elements[3].value);
            var E = Number(document.getElementById("form1").elements[4].value);

            function T(t) {
                return B * Math.pow(t, p) + C;
            }

            function alpha(t) {
                return H * t + E;
            }

            var alphaArr = [];
            var TArr = [];
            var text1 = "";
            var text2 = "";
            for (var i = 1; i <= 10; i++) {
                TArr.push(T(i));
                alphaArr.push(alpha(i));
                text1 += "T(" + i + ")=" + B + "*" + i+"<sup>"+p+"</sup>" + "+" + C + "=" + T(i).toFixed(1) + " K" + "<br>";
                text2 += "α(" + i + ")=" + H + "*" + i + "+" + E + "=" + alpha(i).toFixed(1) + " Вт/(К*м^2)" + "<br>";
            }



            document.getElementById("demo1").innerHTML = "<br>" + text1 + "<br>" + text2;


            var A = [0.116, 0.116, 0.116, 0.116, (14.5).toFixed(2), (14.5).toFixed(2), "-"],
                D = ["-", 0.116, 0.116, 0.116, 0.116, (14.5).toFixed(2), (14.5).toFixed(2)],
                F = ["-", 0.133, 0.133, 0.133, 0.565, 0.997, "-"],
                G = ["-", 0.365, 0.365, 0.365, 15.18, (30).toFixed(2), "-"],
                R = [0.359, 0.355, 0.324, 0.057, 0.907, 0.967, "-"],
                G_AR = ["-", 0.324, 0.327, 0.358, 2.026, 15.98, "-"],
                k1 = 0.0344,
                k2 = 0.03326,
                k3 = 232.0000,
                k4 = 132.6000,
                k5 = 281.4048;

            var Ai = document.getElementById("Ai");
            var Di = document.getElementById("Di");
            var Fi = document.getElementById("Fi");
            var Gi = document.getElementById("Gi");
            var Ri = document.getElementById("Ri");
            var G_ARi = document.getElementById("G_ARi");

            Ai.insertCell(-1).innerHTML = "<p>A<sub>i</sub><p>";
            Di.insertCell(-1).innerHTML = "<p>D<sub>i</sub><p>";
            Fi.insertCell(-1).innerHTML = "<p>F<sub>i</sub><p>";
            Gi.insertCell(-1).innerHTML = "<p>G<sub>i</sub><p>";
            Ri.insertCell(-1).innerHTML = "<p>R<sub>i</sub><p>";
            G_ARi.insertCell(-1).innerHTML = "<p>G<sub>i</sub>-A<sub>i</sub>R<sub>i</sub><p>";

            for (var i = 0; i < 7; i++) {
                Ai.insertCell(-1).innerHTML = A[i];
                Di.insertCell(-1).innerHTML = D[i];
                Fi.insertCell(-1).innerHTML = F[i];
                Gi.insertCell(-1).innerHTML = G[i];
                Ri.insertCell(-1).innerHTML = R[i];
                G_ARi.insertCell(-1).innerHTML = G_AR[i];
            }

            var T0 = 290;
            var Q1 = {
                6: (k2 * T0).toFixed(3)
            };

            for (var i = 5; i > 0; --i) {
                if ((A[i] * Q1[i + 1] + F[i] * T0) / (G[i] - A[i] * R[i]) < 10) {
                    Q1[i] = ((A[i] * Q1[i + 1] + F[i] * T0) / (G[i] - A[i] * R[i])).toFixed(3);
                } else if ((A[i] * Q1[i + 1] + F[i] * T0) / (G[i] - A[i] * R[i]) < 100) {
                    Q1[i] = ((A[i] * Q1[i + 1] + F[i] * T0) / (G[i] - A[i] * R[i])).toFixed(2);
                } else {
                    Q1[i] = ((A[i] * Q1[i + 1] + F[i] * T0) / (G[i] - A[i] * R[i])).toFixed(1);
                }
            }

            var T1 = {
                1: ((alphaArr[0] * TArr[0] + k3 * Q1[1] + k4 * T0) / (alphaArr[0] + k5)).toFixed(1)
            };

            for (var i = 2; i <= 7; i++) {
                T1[i] = (T1[i - 1] * R[i - 2] + Number(Q1[i - 1])).toFixed(1);
            }


            function Qj(Tj_1) {
                if ((k2 * Tj_1[7]) < 10) {
                    var Qj = {
                        6: (k2 * Tj_1[7]).toFixed(3)
                    }
                } else {
                    var Qj = {
                        6: (k2 * Tj_1[7]).toFixed(2)
                    }
                }

                for (var i = 5; i > 0; --i) {
                    if ((A[i] * Qj[i + 1] + F[i] * Tj_1[i + 1]) / (G[i] - A[i] * R[i]) < 10) {
                        Qj[i] = ((A[i] * Qj[i + 1] + F[i] * Tj_1[i + 1]) / (G[i] - A[i] * R[i])).toFixed(3);
                    } else if ((A[i] * Qj[i + 1] + F[i] * Tj_1[i + 1]) / (G[i] - A[i] * R[i]) < 100) {
                        Qj[i] = ((A[i] * Qj[i + 1] + F[i] * Tj_1[i + 1]) / (G[i] - A[i] * R[i])).toFixed(2);
                    } else {
                        Qj[i] = ((A[i] * Qj[i + 1] + F[i] * Tj_1[i + 1]) / (G[i] - A[i] * R[i])).toFixed(1);
                    }
                }
                return Qj;
            }

            function Tj(Qj, Tj_1, j) {
                var Tj = {
                    1: ((alphaArr[j - 1] * TArr[j - 1] + k3 * Qj[1] + k4 * Tj_1[1]) / (alphaArr[j - 1] + k5)).toFixed(1)
                }
                for (var i = 2; i <= 7; i++) {
                    Tj[i] = (Tj[i - 1] * R[i - 2] + Number(Qj[i - 1])).toFixed(1);
                }
                return Tj;
            }


            var Q2 = Qj(T1);
            var T2 = Tj(Q2, T1, 2);

            var Q3 = Qj(T2);
            var T3 = Tj(Q3, T2, 3);

            var Q4 = Qj(T3);
            var T4 = Tj(Q4, T3, 4);

            var Q5 = Qj(T4);
            var T5 = Tj(Q5, T4, 5);

            var Q6 = Qj(T5);
            var T6 = Tj(Q6, T5, 6);

            var Q7 = Qj(T6);
            var T7 = Tj(Q7, T6, 7);

            var Q8 = Qj(T7);
            var T8 = Tj(Q8, T7, 8);

            var Q9 = Qj(T8);
            var T9 = Tj(Q9, T8, 9);

            var Q10 = Qj(T9);
            var T10 = Tj(Q10, T9, 10);


            function takeData(set) {
                var arr = [];
                for (var i = 1; i <= 7; i++)
                    arr.push(set[i]);
                return {
                    x: [1, 2, 3, 4, 5, 6, 7],
                    y: arr,
                    type: 'scatter'
                };
            }

            function takeDataQ(set) {
                var arr = [];
                for (var i = 1; i < 7; i++)
                    arr.push(set[i]);
                return arr;
            }

            var data = [takeData(T2), takeData(T4), takeData(T6), takeData(T8), takeData(T10)];

            var dataT = [takeData(T1), takeData(T2), takeData(T3), takeData(T4), takeData(T5), takeData(T6), takeData(T7), takeData(T8), takeData(T9), takeData(T10)];

            var dataQ = [takeDataQ(Q1), takeDataQ(Q2), takeDataQ(Q3), takeDataQ(Q4), takeDataQ(Q5), takeDataQ(Q6), takeDataQ(Q7), takeDataQ(Q8), takeDataQ(Q9), takeDataQ(Q10)];

            data[0].name = "2-я секунда";
            data[1].name = "4-я секунда";
            data[2].name = "6-я секунда";
            data[3].name = "8-я секунда";
            data[4].name = "10-я секунда";

            var layout = {
                showlegend: true,
                legend: {
                    "orientation": "h"
                }
            };

            Plotly.newPlot('myDiv', data);





            var indexRow = document.getElementById("T0");

            indexRow.insertCell(-1).innerHTML = "<p>T<sub>i</sub><sup>0</sup></p>";

            for (var i = 0; i < data[0].y.length; i++) {
                indexRow.insertCell(-1).innerHTML = "290.0";
            }



            function inCellQ(arr, str, n) {
                var idRow = document.getElementById(str);
                idRow.insertCell(-1).innerHTML = "<p>Q<sub>i</sub><sup>" + n.toString() + "</sup></p>";
                for (var i = 0; i < 6; i++) {
                    idRow.insertCell(-1).innerHTML = arr[i];
                }
                idRow.insertCell(-1).innerHTML = "-";
            }

            function inCellT(arr, str, n) {
                var idRow = document.getElementById(str);
                idRow.insertCell(-1).innerHTML = "<p>T<sub>i</sub><sup>" + n.toString() + "</sup></p>";
                for (var i = 0; i < 7; i++) {
                    idRow.insertCell(-1).innerHTML = arr[i];
                }
            }

            for (var j = 0; j < dataQ.length; j++) {
                var str = "Q" + (j + 1).toString() + "i";
                inCellQ(dataQ[j], str, j + 1);
            }

            for (var j = 0; j < dataT.length; j++) {
                var str = "T" + (j + 1).toString() + "i";
                inCellT(dataT[j].y, str, j + 1);
            }
        }

Comments