API tools faq
paste
Advertisement
Konark

Laba3-v2

Konark
Nov 3rd, 2016
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Лабораторная №2 - Нечеткая логика - Спесивец В.</title>
  6.     <style>
  7.         body {
  8.             background: url(http://adobe-master.ru/wp-content/uploads/2014/06/fon-lvl-script.jpg);
  9.         }
  10.        
  11.         .content {
  12.             margin: 0 auto;
  13.             width: 700px;
  14.             height: 610px;
  15.             background-color: #fff;
  16.             margin: 0 auto;
  17.             padding-top: 10px;
  18.             padding-bottom: 10px;
  19.         }
  20.  
  21.         .input-inf {
  22.             width: 300px;
  23.             height: 150px;
  24.             border: dashed 1px;
  25.             margin: 0 auto;
  26.             text-align: center;
  27.  
  28.         }
  29.  
  30.         .result-inf {
  31.             width: 300px;
  32.             height: 90px;
  33.             border: dashed 1px;
  34.             margin: 0 auto;
  35.             text-align: center;
  36.         }
  37.  
  38.         .result-x {
  39.             padding-top: 10px;
  40.             width: 300px;
  41.             height: 150px;
  42.             border: dashed 1px;
  43.             margin: 0 auto;
  44.             text-align: center;
  45.         }
  46.  
  47.         .answer_a {
  48.             width: 233px;
  49.             height: 150px;
  50.             float:left;
  51.         }
  52.  
  53.         .answer_b {
  54.             width: 233px;
  55.             height: 150px;
  56.             float:left;
  57.         }
  58.  
  59.         .answer_c {
  60.             width: 233px;
  61.             height: 150px;
  62.             float:left;
  63.            
  64.         }
  65.  
  66.         .answers {
  67.             padding-left: 25px;
  68.             padding-right: 25px;
  69.             padding-top: 10px;
  70.             width: 700px;
  71.             height: 150px;
  72.            
  73.  
  74.         }
  75.  
  76.         canvas {
  77.             display: block;
  78.             margin: 0 auto;
  79.             border: solid 1px;
  80.     }
  81.     </style>
  82. </head>
  83. <body onload="graph()">
  84.     <div class="content">
  85.     <form id="calc" name="calc">
  86.         <div class="input-inf">
  87.             <p>Нечеткое число А:</p>
  88.             <input type="text" size="3" id="a1" name="a1"> <input type="text" size="3" id="a2" name="a2"> <input type="text" size="3" id="a3" name="a3">
  89.             <p>Нечеткое число B:</p>
  90.             <input type="text" size="3" id="b1" name="b1"> <input type="text" size="3" id="b2" name="b2"> <input type="text" size="3" id="b3" name="b3">
  91.         </div>
  92.         <div class="result-inf">
  93.             <p>Результат:</p>
  94.             <input type="text" size="3" id="c1" name="c1" readonly> <input type="text" size="3" id="c2" name="c2" readonly> <input type="text" size="3" id="c3" name="c3" readonly>
  95.         </div>
  96.         <div class="result-x">
  97.             Значение Х: <input type="text" size="3" id="x1" name="x1" readonly> <input type="button" id="search" name="search" onclick="search_x()" disabled="1" value="Найти">
  98.             <p id="ax_1">μА(х):</p>
  99.             <p id="bx_1">μB(х):</p>
  100.             <p id="cx_1">μC(х):</p>
  101.         </div>
  102.         <div class="answers">
  103.             <div class="answer_a">
  104.                 <p>μА(α):</p>
  105.                 <p id="ax" class="ax"></p>
  106.             </div>
  107.             <div class="answer_b">
  108.                 <p>μB(α):</p>
  109.                 <p id="bx" class="bx"></p>
  110.             </div>
  111.             <div class="andwer_c">
  112.                 <p>μC(α):</p>
  113.                 <p id="cx" class="cx"></p>
  114.             </div>
  115.         </div><br/>
  116.         <center><input type="button" onclick="calculating()" value="Обчислить" > <input type="button" onclick="clearConv()" value="Очистить график"></center>
  117.         </form>
  118.     </div>
  119.  
  120. <canvas id="canv" width="700px" height="400px"></canvas>
  121.     <script type="text/javascript">
  122.         function graph(){
  123.             canvas = document.getElementById("canv");
  124.             context = canvas.getContext("2d");
  125.             context.beginPath();
  126.             context.moveTo(0,370);
  127.             context.lineTo(700, 370);
  128.             context.moveTo(350,0);
  129.             context.lineTo(350, 700);
  130.             context.moveTo(0,100);
  131.             context.lineTo(700, 100);
  132.             context.strokeText("1", 352, 93);
  133.             context.strokeText("0", 352, 380);
  134.             context.strokeStyle = "#000000";
  135.             context.fillStyle = "#9ACD32";
  136.             context.fillRect(0, 0, 10, 10);
  137.             context.fillStyle = "#FF8C00";
  138.             context.fillRect(10, 0, 10, 10);
  139.             context.fillStyle = "#FF0000";
  140.             context.fillRect(20, 0, 10, 10);
  141.             context.strokeStyle = "#000000";
  142.             context.strokeText("A", 2, 8);
  143.             context.strokeText("B", 12, 8);
  144.             context.strokeText("C", 22, 8);
  145.             context.stroke();
  146.         }
  147.  
  148.         function clearConv(){
  149.             canvas.width = canvas.width;
  150.             graph();
  151.         }
  152.  
  153.         function paint(){
  154.             //a
  155.             context.strokeStyle = "#000000";
  156.             res_graph_a1 = 350 + (a1*10);
  157.             context.strokeText(a1, res_graph_a1, 380);
  158.             res_graph_a2 = 350 + (a2*10);
  159.             context.strokeText(a2, res_graph_a2, 380);
  160.             res_graph_a3 = 350 + (a3*10);
  161.             context.strokeText(a3, res_graph_a3, 380);
  162.             average_a = ((res_graph_a1+res_graph_a3)/2);
  163.             context.beginPath();
  164.             context.moveTo(res_graph_a1, 370);
  165.             context.lineTo(average_a, 100);
  166.             context.moveTo(average_a, 100);
  167.             context.lineTo(res_graph_a3, 370);
  168.             context.strokeStyle = "#9ACD32";
  169.             context.stroke();
  170.        
  171.             //b
  172.            
  173.             context.strokeStyle = "#000000";
  174.             res_graph_b1 = 350 + (b1*10);
  175.             context.strokeText(b1, res_graph_b1, 380);
  176.             res_graph_b2 = 350 + (b2*10);
  177.             context.strokeText(b2, res_graph_b2, 380);
  178.             res_graph_b3 = 350 + (b3*10);
  179.             context.strokeText(b3, res_graph_b3, 380);
  180.             average_b = ((res_graph_b1+res_graph_b3)/2);
  181.             context.beginPath();
  182.             context.moveTo(res_graph_b1, 370);
  183.             context.lineTo(average_b, 100);
  184.             context.moveTo(average_b, 100);
  185.             context.lineTo(res_graph_b3, 370);
  186.             context.strokeStyle = "#FF8C00";
  187.             context.stroke();
  188.             //c
  189.             context.strokeStyle = "#000000";
  190.             res_graph_c1 = 350 + (c1*10);
  191.             context.strokeText(c1, res_graph_c1, 380);
  192.             res_graph_c2 = 350 + (c2*10);
  193.             context.strokeText(c2, res_graph_c2, 380);
  194.             res_graph_c3 = 350 + (c3*10);
  195.             context.strokeText(c3, res_graph_c3, 380);
  196.             average_c = ((res_graph_c1+res_graph_c3)/2);
  197.             context.beginPath();
  198.             context.moveTo(res_graph_c1, 370);
  199.             context.lineTo(average_c, 100);
  200.             context.moveTo(average_c, 100);
  201.             context.lineTo(res_graph_c3, 370);
  202.             context.strokeStyle = "#FF0000";
  203.             context.stroke();
  204.         }
  205.  
  206.         function search_x(){
  207.             x = parseFloat(document.getElementById("x1").value);
  208.             var a_text2 = document.getElementById("ax_1");
  209.             var b_text2 = document.getElementById("bx_1");
  210.             var c_text2 = document.getElementById("cx_1");
  211.             var result;
  212.             //Ax
  213.             if (x < a1 || x > a3){
  214.                 a_text2.innerHTML = "μА(х): 0";
  215.             }else if (x >= a1 && x <= a2){
  216.                 result = ((x - a1) / (a2 - a1));
  217.                 a_text2.innerHTML = "μА(х): " + result.toFixed(2);
  218.             }else if (x > a2 && x <= a3){
  219.                 result = ((a3 - x) / (a3 - a2));
  220.                 a_text2.innerHTML = "μА(х): " + result.toFixed(2);
  221.             }else{
  222.                 alert("Ошибка");
  223.             }
  224.             //Bx
  225.             if (x < b1 || x > b3){
  226.                 b_text2.innerHTML = "μB(х): 0";
  227.             }else if (x >= b1 && x <= b2){
  228.                 result = ((x - b1) / (b2 - b1));
  229.                 b_text2.innerHTML = "μB(х): " + result.toFixed(2);
  230.             }else if (x > b2 && x <= b3){
  231.                 result = ((b3 - x) / (b3 - b2));
  232.                 b_text2.innerHTML = "μB(х): " + result.toFixed(2);
  233.             }else{
  234.                 alert("Ошибка");
  235.             }
  236.             //Cx
  237.             if (x < c1 || x > c3){
  238.                 c_text2.innerHTML = "μC(х): 0";
  239.             }else if (x >= c1 && x <= c2){
  240.                 result = ((x - c1) / (c2 - c1));
  241.                 c_text2.innerHTML = "μC(х): " + result.toFixed(2);
  242.             }else if (x > c2 && x <= c3){
  243.                 result = ((c3 - x) / (c3 - c2));
  244.                 c_text2.innerHTML = "μC(х): " + result.toFixed(2);
  245.             }else{
  246.                 alert("Ошибка");
  247.             }
  248.             var res_x = 350 + (x*10);
  249.             context.strokeText(x, res_x, 380);
  250.             context.moveTo(res_x, 370);
  251.             context.lineTo(res_x, 100);
  252.             context.stroke();
  253.         }
  254.  
  255.         function calculating(){
  256.             a1 = parseFloat(document.getElementById("a1").value);
  257.             a2 = parseFloat(document.getElementById("a2").value);
  258.             a3 = parseFloat(document.getElementById("a3").value);
  259.             b1 = parseFloat(document.getElementById("b1").value);
  260.             b2 = parseFloat(document.getElementById("b2").value);
  261.             b3 = parseFloat(document.getElementById("b3").value);
  262.             if ((a2 < a1 && a3 < a1) || a2 < a1 || a3 < a1 || (b2 < b1 && b2 < b1) || b2 < b1 || b3 < b1){
  263.                 alert("Введите корректные данные");
  264.             } else if (a2 > a3 || b2 > b3){
  265.                 alert("Введите корректные данные");
  266.             }else{
  267.                 c1 = a1 + b1;
  268.                 c2 = a2 + b2;
  269.                 c3 = a3 + b3;
  270.                 document.getElementById("c1").value = c1;
  271.                 document.getElementById("c2").value = c2;
  272.                 document.getElementById("c3").value = c3;
  273.                 document.calc.x1.readOnly = false;
  274.                 document.calc.search.disabled = 0;
  275.                 var a_text = document.getElementById("ax");
  276.                 var b_text = document.getElementById("bx");
  277.                 var c_text = document.getElementById("cx");
  278.                 a_text.innerHTML = "0, при Х < " + a1 + " или X > " + a3 + "<br/>(x - " + a1 + ")/" + (a2-a1) + " при " + a1 +
  279.                 " <= х <= " + a2 + "<br/><br/>А(α) = [ " + a1 + " + α" + (a2-a1) + ", " + a3 + " - α" + (a3-a2) + " ]";
  280.                 b_text.innerHTML = "0, при Х < " + b1 + " или X > " + b3 + "<br/>(x - " + b1 + ")/" + (b2-b1) + " при " + b1 +
  281.                 " <= х <= " + b2 + "<br/><br/>А(α) = [ " + b1 + " + α" + (b2-b1) + ", " + b3 + " - α" + (b3-b2) + " ]";
  282.                 c_text.innerHTML = "0, при Х < " + c1 + " или X > " + c3 + "<br/>(x - " + c1 + ")/" + (c2-c1) + " при " + c1 +
  283.                 " <= х <= " + c2 + "<br/><br/>А(α) = [ " + c1 + " + α" + (c2-c1) + ", " + c3 + " - α" + (c3-c2) + " ]";
  284.                 paint();
  285.             }
  286.         }
  287.     </script>
  288. </body>
  289. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!