Колебания энергий в одномерном кристалле — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Строка 3: Строка 3:
 
Данная программа демонстрирует колебания кинетической, потенциальной и полной энергий в одномерном кристалле.
 
Данная программа демонстрирует колебания кинетической, потенциальной и полной энергий в одномерном кристалле.
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/Bessel_fluctuations/Bessel_fluctuations_v2.3_no_realiz/Bessel_fluctuations.html |width=1030 |height=640 |border=0 }}
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/Bessel_fluctuations/Bessel_fluctuations_v2.3_no_realiz/Bessel_fluctuations.html |width=1030 |height=640 |border=0 }}
 +
 +
Скачать программу: [[Медиа:Bessel_fluctuations_v2.3_no_realiz.zip|Bessel_fluctuations_v2.3_no_realiz.zip]]
 +
<div class="mw-collapsible mw-collapsed" style="width:100%" >
 +
'''Текст программы на языке JavaScript (разработчик [[Цветков Денис]]):''' <div class="mw-collapsible-content">
 +
Файл '''"Bessel_fluctuations.js"'''
 +
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 +
window.addEventListener("load", main_BF, false);
 +
function main_BF() {
 +
 +
    // Предварительные установки
 +
    var a0 = 1;                            // масштаб расстояния
 +
    var t0 = 1;                            // масштаб времени
 +
    var m0 = 1;                            // масштаб массы
 +
 +
    var k0 = 2 * Math.PI / t0;              // масштаб частоты
 +
    var C0 = m0 * k0 * k0;                  // масштаб жесткости
 +
 +
    var m = 1 * m0;                    // масса
 +
    var C = 0.02 * C0;                    // жесткость
 +
 +
    var dx = 1 * a0;                        // шаг сетки по оси x
 +
    var dt = 0.02 * t0;                    // шаг интегрирования по времени
 +
 +
    var N = 100000;                          // количество частиц в каждой реализации
 +
    var T = 15;                            // время расчета
 +
 +
    var koeff = C / (dx * dx) / m * dt;    // коэффициент для уравнения динамики частиц
 +
 +
    // интерфейс программы
 +
    N_number.value = N;
 +
    N_number.oninput = function() {N = parseInt(N_number.value);};
 +
    T_number.value = T;
 +
    T_number.oninput = function() {T = parseInt(T_number.value);};
 +
    button_start.onclick = calculate_new_system;
 +
 +
    checkbox_K.onchange = function() {if (first_calc) draw();};
 +
    checkbox_P.onchange = function() {if (first_calc) draw();};
 +
    checkbox_E.onchange = function() {if (first_calc) draw();};
 +
 +
    var ctx = BF_canvas.getContext("2d");                // на context происходит рисование
 +
    var w = BF_canvas.width;                              // ширина окна в расчетных координатах
 +
    var h = BF_canvas.height;                            // высота окна в расчетных координатах
 +
 +
    // основная расчетная функция
 +
    var data_K, data_P, data_E;            // данные для графика
 +
    var first_calc = false;                // произведен ли первый расчет
 +
    var t, n;
 +
    var t_start;
 +
    function calculate_new_system() {
 +
        first_calc = true;
 +
        t = 0;
 +
        n = N + 2;                          // количество узлов по оси x + 2 для ГУ
 +
        span_time_calc.innerHTML = "";
 +
        div_calc_speed.style.display = "none";
 +
 +
        // задание начальных условий
 +
        var P = [];
 +
        for (var i = 1; i < n - 1; i++) {
 +
            P[i] = {};
 +
            P[i].u = 0;
 +
            P[i].v = (2 * Math.random() - 1) * 0.25;
 +
        }
 +
        // периодические граничные условия
 +
        P[0] = P[n - 2];
 +
        P[n - 1] = P[1];
 +
 +
        data_K = []; data_P = []; data_E = [];
 +
 +
        // основной расчет
 +
        t_start = performance.now();
 +
        calculate(P);
 +
    }
 +
 +
    function calculate(P) {
 +
        var t1 = performance.now();
 +
 +
        while (t < T) {
 +
            // расчет энергий для графиков
 +
            var Kin = 0;
 +
            var Pot = 0;
 +
            for (var j = 1; j < n - 1; j++) {Kin += P[j].v * P[j].v;}
 +
            for (var j = 1; j < n - 1; j++) {Pot += Math.pow(P[j].u - P[j - 1].u, 2);}
 +
            Kin = Kin * m;
 +
            Pot = Pot * C;
 +
            data_K.push(Kin);
 +
            data_P.push(Pot);
 +
            data_E.push(Kin + Pot);
 +
 +
            // расчет состояния системы на следующем шаге
 +
            for (var i = 1; i < n - 1; i++) {
 +
                P[i].v += (P[i + 1].u - 2 * P[i].u + P[i - 1].u) * koeff;
 +
            }
 +
            for (var i = 1; i < n - 1; i++) {
 +
                P[i].u += P[i].v * dt;
 +
            }
 +
 +
            t += dt;
 +
            if ((performance.now() - t1) > 200) {
 +
                draw();
 +
                setTimeout( function(){calculate(P); }, 10);
 +
                div_container_progress.style.display = "block";
 +
                button_start.style.display = "none";
 +
                progress_bar.style.width = Math.round(t / T * 100) + "%";
 +
                span_progress.innerHTML = (t / T * 100).toFixed(2) + "%";
 +
                return;
 +
            }
 +
        }
 +
        draw();
 +
        div_container_progress.style.display = "none";
 +
        button_start.style.display = "inline";
 +
        div_calc_speed.style.display = "block";
 +
        span_time_calc.innerHTML = ((performance.now() - t_start) / N * 1000 / Math.ceil(T/t)).toFixed(2);
 +
        return true;
 +
    }
 +
 +
    function draw() {
 +
        ctx.clearRect(0, 0, w, h);              // очистка экрана
 +
 +
        // подпись к оси ("х")
 +
        ctx.font = "20pt Arial";
 +
        ctx.textAlign = "right";
 +
        ctx.textBaseline = "bottom";
 +
        ctx.fillStyle = "#666666";
 +
        ctx.fillText("x", w - 4, h);
 +
 +
        var title_y = 3;                        // начальный отступ для подписи
 +
        var title_y_plus = 30;                  // на столько увеличивается отступ для каждой следующей подписи
 +
 +
        if (checkbox_K.checked) {
 +
            // Кинетическая энергия
 +
            ctx.strokeStyle = "#ff0000";
 +
            ctx.lineWidth = 1;
 +
            ctx.beginPath();
 +
            ctx.moveTo(0, 0);
 +
            for (var i = 1; i < data_K.length; i++) {
 +
                ctx.lineTo(i / (data_K.length - 1) * w, h - data_K[i] / data_K[0] * h);
 +
            }
 +
            ctx.stroke();
 +
 +
            // подпись
 +
            ctx.textAlign = "center";
 +
            ctx.textBaseline = "top";
 +
            ctx.fillStyle = "#ff0000";
 +
            ctx.fillText("K", w - 24, title_y);
 +
            title_y += title_y_plus;
 +
        }
 +
 +
        if (checkbox_P.checked) {
 +
            // Потенциальная энергия
 +
            ctx.strokeStyle = "#0000ff";
 +
            ctx.lineWidth = 1;
 +
            ctx.beginPath();
 +
            ctx.moveTo(0, h - data_P[0] / data_K[0] * h);
 +
            for (var i = 1; i < data_P.length; i++) {
 +
                ctx.lineTo(i / (data_P.length - 1) * w, h - data_P[i] / data_K[0] * h);
 +
            }
 +
            ctx.stroke();
 +
 +
            ctx.textAlign = "center";
 +
            ctx.textBaseline = "top";
 +
            ctx.fillStyle = "#0000ff";
 +
            ctx.fillText("П", w - 24, title_y);
 +
            title_y += title_y_plus;
 +
        }
 +
 +
        if (checkbox_E.checked) {
 +
            // Полная энергия
 +
            ctx.strokeStyle = "#880088";
 +
            ctx.lineWidth = 2;
 +
            ctx.beginPath();
 +
            ctx.moveTo(0, h - data_E[0] / 2 / data_K[0] * h);
 +
            for (var i = 1; i < data_E.length; i++) {
 +
                ctx.lineTo(i / (data_E.length - 1) * w, h - data_E[i] / 2 / data_K[0] * h);
 +
            }
 +
            ctx.stroke();
 +
 +
            ctx.textAlign = "center";
 +
            ctx.textBaseline = "top";
 +
            ctx.fillStyle = "#880088";
 +
            ctx.fillText("E/2", w - 24, title_y);
 +
            title_y += title_y_plus;
 +
        }
 +
 +
    }
 +
}
 +
</syntaxhighlight>
 +
 +
Файл '''"Lang.js"'''
 +
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 +
strings = {
 +
    span_kin_energy:{
 +
        field:"innerHTML",
 +
        en:"Kinetic energy",
 +
        ru:"Кинетическая энергия"
 +
    }, span_pot_energy:{
 +
        field:"innerHTML",
 +
        en:"Potential energy",
 +
        ru:"Потенциальная энергия"
 +
    }, span_full_energy:{
 +
        field:"innerHTML",
 +
        en:"Full energy",
 +
        ru:"Полная энергия"
 +
    }, button_start:{
 +
        field:"value",
 +
        en:"Start",
 +
        ru:"Старт"
 +
    }, span_progress_txt:{
 +
        field:"innerHTML",
 +
        en:"Progress: ",
 +
        ru:"Прогресс: "
 +
    }, abbr_speed:{
 +
        field:"title",
 +
        en:"The calculation of this speed includes the time for processing interface and drawing the intermediate states of the system",
 +
        ru:"Расчет данной скорости включает в себя время на обработку интерфейса и прорисовку промежуточных состояний системы"
 +
    }, span_txt_nubmer_of_particles:{
 +
        field:"innerHTML",
 +
        en:"Number of particles",
 +
        ru:"Количество частиц"
 +
    }, span_txt_calc_time:{
 +
        field:"innerHTML",
 +
        en:"Calculation time",
 +
        ru:"Время расчета"
 +
    }, span_txt_calc_speed:{
 +
        field:"innerHTML",
 +
        en:"Calculation speed",
 +
        ru:"Скорость расчета"
 +
    }, span_txt_ns_particle_step:{
 +
        field:"innerHTML",
 +
        en:"ns/(particle&#8901;step)",
 +
        ru:"нс/(частица&#8901;шаг)"
 +
    }
 +
};
 +
 +
function set_lang(lang){
 +
    for (var s in strings) {
 +
        document.getElementById(s)[strings[s].field] = strings[s][lang];
 +
    }
 +
}
 +
</syntaxhighlight>
 +
 +
Файл '''"Bessel_fluctuations.html"'''
 +
<syntaxhighlight lang="html5" enclose="div">
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
    <meta charset="UTF-8" />
 +
    <title>Bessel fluctuations</title>
 +
    <script src="Bessel_fluctuations.js"></script>
 +
    <script src="Lang/Lang.js"></script>
 +
    <style>
 +
        table.outer td, table.outer tr {border: 1px solid #ddd; padding-right: 10px; padding-left: 5px}
 +
        table.inner td, table.inner tr {border: 0}
 +
    </style>
 +
</head>
 +
<body>
 +
    <canvas id="BF_canvas" width="1000" height="500" style="border:1px solid #000000;"></canvas><br>
 +
 +
    <table class="outer" style="border-collapse: collapse; width:1002px">
 +
        <tr>
 +
            <td style="width: 300px">
 +
                <input type="checkbox" id="checkbox_K" checked/><font color="#ff0000" size="5"><B>—</B></font> <span id="span_kin_energy"></span> <br>
 +
                <input type="checkbox" id="checkbox_P" checked/><font color="#0000ff" size="5"><B>—</B></font> <span id="span_pot_energy"></span> <br>
 +
                <input type="checkbox" id="checkbox_E" checked/><font color="#880088" size="5"><B>—</B></font> <span id="span_full_energy"></span> <br>
 +
            </td><td>
 +
                <input type="button" id="button_start" style="background:#fb4;border-radius: 5px;color:#000; font-weight: bold;"/><br>
 +
                <input type="image" src="Lang/RU.png" onclick="set_lang('ru')"/>
 +
                <input type="image" src="Lang/GB.png" onclick="set_lang('en')"/><br>
 +
                <div id="div_container_progress" style="display: none;">
 +
                    <span id="span_progress_txt"></span><span id="span_progress"></span>
 +
                    <div id="container_bar" style="width:200px; height:20px; border:1px solid black;">
 +
                        <div id="progress_bar" style="width:10%;background-color: orange; height:20px;"></div>
 +
                    </div>
 +
                </div>
 +
 +
                <div id="div_calc_speed" style="display: none">
 +
                    <abbr id="abbr_speed" style="border-bottom: 1px dotted black;" title="Данная скорость включает в себя время на обработку интерфейса и прорисовку промежуточных состояний системы">
 +
                        <span id="span_txt_calc_speed"></span> <span id="span_time_calc"></span> <span id="span_txt_ns_particle_step"></span>
 +
                    </abbr>
 +
                </div>
 +
 +
            </td><td  style="width: 300px">
 +
                <table class="inner">
 +
                    <tr>
 +
                        <td><span id="span_txt_nubmer_of_particles"></span></td>
 +
                        <td><input type="number" id="N_number" step="1" style="width: 70px;"/></td>
 +
                    </tr>
 +
                    <tr>
 +
                        <td><span id="span_txt_calc_time"></span></td>
 +
                        <td><input type="number" id="T_number" step="1" style="width: 70px;"/> t0</td>
 +
                    </tr>
 +
                </table>
 +
            </td>
 +
        </tr>
 +
    </table>
 +
    <script>set_lang("ru")</script>
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
</div>
 +
</div>
  
 
[[Category: Виртуальная лаборатория]]
 
[[Category: Виртуальная лаборатория]]
 
[[Category: Программирование]]
 
[[Category: Программирование]]

Версия 16:52, 18 октября 2015

Виртуальная лаборатория > Колебания энергий в одномерном кристалле

Данная программа демонстрирует колебания кинетической, потенциальной и полной энергий в одномерном кристалле.

Скачать программу: Bessel_fluctuations_v2.3_no_realiz.zip

Текст программы на языке JavaScript (разработчик Цветков Денис):

Файл "Bessel_fluctuations.js" 

  1 window.addEventListener("load", main_BF, false);
  2 function main_BF() {
  3 
  4     // Предварительные установки
  5     var a0 = 1;                             // масштаб расстояния
  6     var t0 = 1;                             // масштаб времени
  7     var m0 = 1;                             // масштаб массы
  8 
  9     var k0 = 2 * Math.PI / t0;              // масштаб частоты
 10     var C0 = m0 * k0 * k0;                  // масштаб жесткости
 11 
 12     var m = 1 * m0;                 	    // масса
 13     var C = 0.02 * C0;                 	    // жесткость
 14 
 15     var dx = 1 * a0;                        // шаг сетки по оси x
 16     var dt = 0.02 * t0;                     // шаг интегрирования по времени
 17 
 18     var N = 100000;                          // количество частиц в каждой реализации
 19     var T = 15;                             // время расчета
 20 
 21     var koeff = C / (dx * dx) / m * dt;     // коэффициент для уравнения динамики частиц
 22 
 23     // интерфейс программы
 24     N_number.value = N;
 25     N_number.oninput = function() {N = parseInt(N_number.value);};
 26     T_number.value = T;
 27     T_number.oninput = function() {T = parseInt(T_number.value);};
 28     button_start.onclick = calculate_new_system;
 29 
 30     checkbox_K.onchange = function() {if (first_calc) draw();};
 31     checkbox_P.onchange = function() {if (first_calc) draw();};
 32     checkbox_E.onchange = function() {if (first_calc) draw();};
 33 
 34     var ctx = BF_canvas.getContext("2d");                 // на context происходит рисование
 35     var w = BF_canvas.width;                              // ширина окна в расчетных координатах
 36     var h = BF_canvas.height;                             // высота окна в расчетных координатах
 37 
 38     // основная расчетная функция
 39     var data_K, data_P, data_E;             // данные для графика
 40     var first_calc = false;                 // произведен ли первый расчет
 41     var t, n;
 42     var t_start;
 43     function calculate_new_system() {
 44         first_calc = true;
 45         t = 0;
 46         n = N + 2;                          // количество узлов по оси x + 2 для ГУ
 47         span_time_calc.innerHTML = "";
 48         div_calc_speed.style.display = "none";
 49 
 50         // задание начальных условий
 51         var P = [];
 52         for (var i = 1; i < n - 1; i++) {
 53             P[i] = {};
 54             P[i].u = 0;
 55             P[i].v = (2 * Math.random() - 1) * 0.25;
 56         }
 57         // периодические граничные условия
 58         P[0] = P[n - 2];
 59         P[n - 1] = P[1];
 60 
 61         data_K = []; data_P = []; data_E = [];
 62 
 63         // основной расчет
 64         t_start = performance.now();
 65         calculate(P);
 66     }
 67 
 68     function calculate(P) {
 69         var t1 = performance.now();
 70 
 71         while (t < T) {
 72             // расчет энергий для графиков
 73             var Kin = 0;
 74             var Pot = 0;
 75             for (var j = 1; j < n - 1; j++) {Kin += P[j].v * P[j].v;}
 76             for (var j = 1; j < n - 1; j++) {Pot += Math.pow(P[j].u - P[j - 1].u, 2);}
 77             Kin = Kin * m;
 78             Pot = Pot * C;
 79             data_K.push(Kin);
 80             data_P.push(Pot);
 81             data_E.push(Kin + Pot);
 82 
 83             // расчет состояния системы на следующем шаге
 84             for (var i = 1; i < n - 1; i++) {
 85                 P[i].v += (P[i + 1].u - 2 * P[i].u + P[i - 1].u) * koeff;
 86             }
 87             for (var i = 1; i < n - 1; i++) {
 88                 P[i].u += P[i].v * dt;
 89             }
 90 
 91             t += dt;
 92             if ((performance.now() - t1) > 200) {
 93                 draw();
 94                 setTimeout( function(){calculate(P); }, 10);
 95                 div_container_progress.style.display = "block";
 96                 button_start.style.display = "none";
 97                 progress_bar.style.width = Math.round(t / T * 100) + "%";
 98                 span_progress.innerHTML = (t / T * 100).toFixed(2) + "%";
 99                 return;
100             }
101         }
102         draw();
103         div_container_progress.style.display = "none";
104         button_start.style.display = "inline";
105         div_calc_speed.style.display = "block";
106         span_time_calc.innerHTML = ((performance.now() - t_start) / N * 1000 / Math.ceil(T/t)).toFixed(2);
107         return true;
108     }
109 
110     function draw() {
111         ctx.clearRect(0, 0, w, h);              // очистка экрана
112 
113         // подпись к оси ("х")
114         ctx.font = "20pt Arial";
115         ctx.textAlign = "right";
116         ctx.textBaseline = "bottom";
117         ctx.fillStyle = "#666666";
118         ctx.fillText("x", w - 4, h);
119 
120         var title_y = 3;                        // начальный отступ для подписи
121         var title_y_plus = 30;                  // на столько увеличивается отступ для каждой следующей подписи
122 
123         if (checkbox_K.checked) {
124             // Кинетическая энергия
125             ctx.strokeStyle = "#ff0000";
126             ctx.lineWidth = 1;
127             ctx.beginPath();
128             ctx.moveTo(0, 0);
129             for (var i = 1; i < data_K.length; i++) {
130                 ctx.lineTo(i / (data_K.length - 1) * w, h - data_K[i] / data_K[0] * h);
131             }
132             ctx.stroke();
133 
134             // подпись
135             ctx.textAlign = "center";
136             ctx.textBaseline = "top";
137             ctx.fillStyle = "#ff0000";
138             ctx.fillText("K", w - 24, title_y);
139             title_y += title_y_plus;
140         }
141 
142         if (checkbox_P.checked) {
143             // Потенциальная энергия
144             ctx.strokeStyle = "#0000ff";
145             ctx.lineWidth = 1;
146             ctx.beginPath();
147             ctx.moveTo(0, h - data_P[0] / data_K[0] * h);
148             for (var i = 1; i < data_P.length; i++) {
149                 ctx.lineTo(i / (data_P.length - 1) * w, h - data_P[i] / data_K[0] * h);
150             }
151             ctx.stroke();
152 
153             ctx.textAlign = "center";
154             ctx.textBaseline = "top";
155             ctx.fillStyle = "#0000ff";
156             ctx.fillText("П", w - 24, title_y);
157             title_y += title_y_plus;
158         }
159 
160         if (checkbox_E.checked) {
161             // Полная энергия
162             ctx.strokeStyle = "#880088";
163             ctx.lineWidth = 2;
164             ctx.beginPath();
165             ctx.moveTo(0, h - data_E[0] / 2 / data_K[0] * h);
166             for (var i = 1; i < data_E.length; i++) {
167                 ctx.lineTo(i / (data_E.length - 1) * w, h - data_E[i] / 2 / data_K[0] * h);
168             }
169             ctx.stroke();
170 
171             ctx.textAlign = "center";
172             ctx.textBaseline = "top";
173             ctx.fillStyle = "#880088";
174             ctx.fillText("E/2", w - 24, title_y);
175             title_y += title_y_plus;
176         }
177 
178     }
179 }

Файл "Lang.js" 

 1 strings = {
 2     span_kin_energy:{
 3         field:"innerHTML",
 4         en:"Kinetic energy",
 5         ru:"Кинетическая энергия"
 6     }, span_pot_energy:{
 7         field:"innerHTML",
 8         en:"Potential energy",
 9         ru:"Потенциальная энергия"
10     }, span_full_energy:{
11         field:"innerHTML",
12         en:"Full energy",
13         ru:"Полная энергия"
14     }, button_start:{
15         field:"value",
16         en:"Start",
17         ru:"Старт"
18     }, span_progress_txt:{
19         field:"innerHTML",
20         en:"Progress: ",
21         ru:"Прогресс: "
22     }, abbr_speed:{
23         field:"title",
24         en:"The calculation of this speed includes the time for processing interface and drawing the intermediate states of the system",
25         ru:"Расчет данной скорости включает в себя время на обработку интерфейса и прорисовку промежуточных состояний системы"
26     }, span_txt_nubmer_of_particles:{
27         field:"innerHTML",
28         en:"Number of particles",
29         ru:"Количество частиц"
30     }, span_txt_calc_time:{
31         field:"innerHTML",
32         en:"Calculation time",
33         ru:"Время расчета"
34     }, span_txt_calc_speed:{
35         field:"innerHTML",
36         en:"Calculation speed",
37         ru:"Скорость расчета"
38     }, span_txt_ns_particle_step:{
39         field:"innerHTML",
40         en:"ns/(particle&#8901;step)",
41         ru:"нс/(частица&#8901;шаг)"
42     }
43 };
44 
45 function set_lang(lang){
46     for (var s in strings) {
47         document.getElementById(s)[strings[s].field] = strings[s][lang];
48     }
49 }

Файл "Bessel_fluctuations.html" 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Bessel fluctuations</title>
    <script src="Bessel_fluctuations.js"></script>
    <script src="Lang/Lang.js"></script>
    <style>
        table.outer td, table.outer tr {border: 1px solid #ddd; 	padding-right: 10px; padding-left: 5px}
        table.inner td, table.inner tr {border: 0}
    </style>
</head>
<body>
    <canvas id="BF_canvas" width="1000" height="500" style="border:1px solid #000000;"></canvas><br>

    <table class="outer" style="border-collapse: collapse; width:1002px">
        <tr>
            <td style="width: 300px">
                <input type="checkbox" id="checkbox_K" checked/><font color="#ff0000" size="5"><B>—</B></font> <span id="span_kin_energy"></span> <br>
                <input type="checkbox" id="checkbox_P" checked/><font color="#0000ff" size="5"><B>—</B></font> <span id="span_pot_energy"></span> <br>
                <input type="checkbox" id="checkbox_E" checked/><font color="#880088" size="5"><B>—</B></font> <span id="span_full_energy"></span> <br>
            </td><td>
                <input type="button" id="button_start" style="background:#fb4;border-radius: 5px;color:#000; font-weight: bold;"/><br>
                <input type="image" src="Lang/RU.png" onclick="set_lang('ru')"/>
                <input type="image" src="Lang/GB.png" onclick="set_lang('en')"/><br>
                <div id="div_container_progress" style="display: none;">
                    <span id="span_progress_txt"></span><span id="span_progress"></span>
                    <div id="container_bar" style="width:200px; height:20px; border:1px solid black;">
                        <div id="progress_bar" style="width:10%;background-color: orange; height:20px;"></div>
                    </div>
                </div>

                <div id="div_calc_speed" style="display: none">
                    <abbr id="abbr_speed" style="border-bottom: 1px dotted black;" title="Данная скорость включает в себя время на обработку интерфейса и прорисовку промежуточных состояний системы">
                        <span id="span_txt_calc_speed"></span> <span id="span_time_calc"></span> <span id="span_txt_ns_particle_step"></span>
                    </abbr>
                </div>

            </td><td  style="width: 300px">
                <table class="inner">
                    <tr>
                        <td><span id="span_txt_nubmer_of_particles"></span></td>
                        <td><input type="number" id="N_number" step="1" style="width: 70px;"/></td>
                    </tr>
                    <tr>
                        <td><span id="span_txt_calc_time"></span></td>
                        <td><input type="number" id="T_number" step="1" style="width: 70px;"/> t0</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <script>set_lang("ru")</script>
</body>
</html>
Источник — «http://tm.spbstu.ru/?title=Колебания_энергий_в_одномерном_кристалле&oldid=36950»