API tools faq
paste
Advertisement
MarrKoo

Example MUX (ai generated)

MarrKoo
Feb 26th, 2025
209
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Интерактивный Мультиплексор</title>
  7.     <style>
  8.         body {
  9.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  10.             margin: 0;
  11.             padding: 20px;
  12.             background-color: #f0f2f5;
  13.             color: #333;
  14.             display: flex;
  15.             flex-direction: column;
  16.             align-items: center;
  17.         }
  18.        
  19.         h1 {
  20.             color: #2c3e50;
  21.             margin-bottom: 30px;
  22.         }
  23.        
  24.         .container {
  25.             display: flex;
  26.             flex-wrap: wrap;
  27.             justify-content: center;
  28.             gap: 40px;
  29.             max-width: 1000px;
  30.         }
  31.        
  32.         .multiplexer {
  33.             background-color: #fff;
  34.             border-radius: 10px;
  35.             box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  36.             padding: 20px;
  37.             display: flex;
  38.             flex-direction: column;
  39.             align-items: center;
  40.             width: 350px;
  41.         }
  42.        
  43.         .controls {
  44.             display: flex;
  45.             flex-direction: column;
  46.             gap: 15px;
  47.             width: 100%;
  48.             margin-bottom: 30px;
  49.         }
  50.        
  51.         .control-group {
  52.             display: flex;
  53.             justify-content: space-between;
  54.             align-items: center;
  55.         }
  56.        
  57.         .control-label {
  58.             font-weight: bold;
  59.             font-size: 18px;
  60.         }
  61.        
  62.         .switch {
  63.             position: relative;
  64.             display: inline-block;
  65.             width: 60px;
  66.             height: 34px;
  67.         }
  68.        
  69.         .switch input {
  70.             opacity: 0;
  71.             width: 0;
  72.             height: 0;
  73.         }
  74.        
  75.         .slider {
  76.             position: absolute;
  77.             cursor: pointer;
  78.             top: 0;
  79.             left: 0;
  80.             right: 0;
  81.             bottom: 0;
  82.             background-color: #ccc;
  83.             transition: .4s;
  84.             border-radius: 34px;
  85.         }
  86.        
  87.         .slider:before {
  88.             position: absolute;
  89.             content: "";
  90.             height: 26px;
  91.             width: 26px;
  92.             left: 4px;
  93.             bottom: 4px;
  94.             background-color: white;
  95.             transition: .4s;
  96.             border-radius: 50%;
  97.         }
  98.        
  99.         input:checked + .slider {
  100.             background-color: #2196F3;
  101.         }
  102.        
  103.         input:checked + .slider:before {
  104.             transform: translateX(26px);
  105.         }
  106.        
  107.         .visualization {
  108.             background-color: #2c3e50;
  109.             border-radius: 10px;
  110.             padding: 20px;
  111.             color: white;
  112.             width: 100%;
  113.             position: relative;
  114.         }
  115.        
  116.         .mux-diagram {
  117.             position: relative;
  118.             height: 320px;
  119.             margin-top: 20px;
  120.         }
  121.        
  122.         .mux-body {
  123.             position: absolute;
  124.             width: 120px;
  125.             height: 200px;
  126.             background-color: #3498db;
  127.             border-radius: 10px;
  128.             left: 50%;
  129.             top: 50%;
  130.             transform: translate(-50%, -50%);
  131.             display: flex;
  132.             justify-content: center;
  133.             align-items: center;
  134.             font-weight: bold;
  135.             color: white;
  136.             border: 2px solid #2980b9;
  137.         }
  138.        
  139.         .input-line {
  140.             position: absolute;
  141.             height: 2px;
  142.             background-color: #ccc;
  143.         }
  144.        
  145.         .input-line.active {
  146.             background-color: #2ecc71;
  147.             box-shadow: 0 0 5px #2ecc71;
  148.         }
  149.        
  150.         .input-label {
  151.             position: absolute;
  152.             left: 10px;
  153.             font-weight: bold;
  154.         }
  155.        
  156.         .output-line {
  157.             position: absolute;
  158.             width: 100px;
  159.             height: 2px;
  160.             background-color: #ccc;
  161.             right: 10px;
  162.             top: 50%;
  163.         }
  164.        
  165.         .output-line.active {
  166.             background-color: #e74c3c;
  167.             box-shadow: 0 0 5px #e74c3c;
  168.         }
  169.        
  170.         .output-value {
  171.             position: absolute;
  172.             right: 10px;
  173.             top: 42%;
  174.             font-weight: bold;
  175.         }
  176.        
  177.         .control-line {
  178.             position: absolute;
  179.             height: 2px;
  180.             background-color: #f39c12;
  181.             box-shadow: 0 0 5px #f39c12;
  182.         }
  183.        
  184.         .control-value {
  185.             position: absolute;
  186.             font-weight: bold;
  187.             color: #f39c12;
  188.         }
  189.        
  190.         .truth-table {
  191.             margin-top: 30px;
  192.             border-collapse: collapse;
  193.             width: 100%;
  194.         }
  195.        
  196.         .truth-table th, .truth-table td {
  197.             border: 1px solid #ddd;
  198.             padding: 8px;
  199.             text-align: center;
  200.         }
  201.        
  202.         .truth-table th {
  203.             background-color: #34495e;
  204.             color: white;
  205.         }
  206.        
  207.         .truth-table tr.active {
  208.             background-color: rgba(46, 204, 113, 0.2);
  209.             font-weight: bold;
  210.         }
  211.     </style>
  212. </head>
  213. <body>
  214.     <h1>Интерактивный Мультиплексор</h1>
  215.    
  216.     <div class="container">
  217.         <div class="multiplexer">
  218.             <div class="controls">
  219.                 <h2>Управление</h2>
  220.                
  221.                 <div class="control-group">
  222.                     <span class="control-label">Управляющий вход X:</span>
  223.                     <label class="switch">
  224.                         <input type="checkbox" id="controlX">
  225.                         <span class="slider"></span>
  226.                     </label>
  227.                     <span id="xValue">0</span>
  228.                 </div>
  229.                
  230.                 <div class="control-group">
  231.                     <span class="control-label">Управляющий вход Y:</span>
  232.                     <label class="switch">
  233.                         <input type="checkbox" id="controlY">
  234.                         <span class="slider"></span>
  235.                     </label>
  236.                     <span id="yValue">0</span>
  237.                 </div>
  238.                
  239.                 <h3>Логические входы:</h3>
  240.                
  241.                 <div class="control-group">
  242.                     <span class="control-label">Вход A:</span>
  243.                     <label class="switch">
  244.                         <input type="checkbox" id="inputA">
  245.                         <span class="slider"></span>
  246.                     </label>
  247.                     <span id="aValue">0</span>
  248.                 </div>
  249.                
  250.                 <div class="control-group">
  251.                     <span class="control-label">Вход B:</span>
  252.                     <label class="switch">
  253.                         <input type="checkbox" id="inputB">
  254.                         <span class="slider"></span>
  255.                     </label>
  256.                     <span id="bValue">0</span>
  257.                 </div>
  258.                
  259.                 <div class="control-group">
  260.                     <span class="control-label">Вход C:</span>
  261.                     <label class="switch">
  262.                         <input type="checkbox" id="inputC">
  263.                         <span class="slider"></span>
  264.                     </label>
  265.                     <span id="cValue">0</span>
  266.                 </div>
  267.                
  268.                 <div class="control-group">
  269.                     <span class="control-label">Вход D:</span>
  270.                     <label class="switch">
  271.                         <input type="checkbox" id="inputD">
  272.                         <span class="slider"></span>
  273.                     </label>
  274.                     <span id="dValue">0</span>
  275.                 </div>
  276.             </div>
  277.            
  278.             <div class="visualization">
  279.                 <h2>Визуализация</h2>
  280.                
  281.                 <div class="mux-diagram">
  282.                     <div class="input-line a-line" style="width: 100px; left: 40px; top: 60px;"></div>
  283.                     <div class="input-label" style="top: 50px;">A</div>
  284.                    
  285.                     <div class="input-line b-line" style="width: 100px; left: 40px; top: 100px;"></div>
  286.                     <div class="input-label" style="top: 90px;">B</div>
  287.                    
  288.                     <div class="input-line c-line" style="width: 100px; left: 40px; top: 140px;"></div>
  289.                     <div class="input-label" style="top: 130px;">C</div>
  290.                    
  291.                     <div class="input-line d-line" style="width: 100px; left: 40px; top: 180px;"></div>
  292.                     <div class="input-label" style="top: 170px;">D</div>
  293.                    
  294.                     <div class="control-line x-line" style="width: 80px; left: 120px; top: 230px;"></div>
  295.                     <div class="control-value x-control-value" style="left: 50px; top: 220px;">X = 0</div>
  296.                    
  297.                     <div class="control-line y-line" style="width: 80px; left: 120px; top: 260px;"></div>
  298.                     <div class="control-value y-control-value" style="left: 50px; top: 250px;">Y = 0</div>
  299.                    
  300.                     <div class="mux-body">MUX</div>
  301.                    
  302.                     <div class="output-line"></div>
  303.                     <div class="output-value">Выход: A</div>
  304.                 </div>
  305.             </div>
  306.         </div>
  307.        
  308.         <div class="truth-table-container">
  309.             <h2>Таблица истинности</h2>
  310.             <table class="truth-table">
  311.                 <thead>
  312.                     <tr>
  313.                         <th>X</th>
  314.                         <th>Y</th>
  315.                         <th>Выбранный вход</th>
  316.                         <th>Выход</th>
  317.                     </tr>
  318.                 </thead>
  319.                 <tbody>
  320.                     <tr id="row00" class="active">
  321.                         <td>0</td>
  322.                         <td>0</td>
  323.                         <td>A</td>
  324.                         <td id="out00">0</td>
  325.                     </tr>
  326.                     <tr id="row10">
  327.                         <td>1</td>
  328.                         <td>0</td>
  329.                         <td>B</td>
  330.                         <td id="out10">0</td>
  331.                     </tr>
  332.                     <tr id="row01">
  333.                         <td>0</td>
  334.                         <td>1</td>
  335.                         <td>C</td>
  336.                         <td id="out01">0</td>
  337.                     </tr>
  338.                     <tr id="row11">
  339.                         <td>1</td>
  340.                         <td>1</td>
  341.                         <td>D</td>
  342.                         <td id="out11">0</td>
  343.                     </tr>
  344.                 </tbody>
  345.             </table>
  346.            
  347.             <div style="margin-top: 30px;">
  348.                 <h3>Текущее состояние:</h3>
  349.                 <p id="currentState">X=0, Y=0 выбирает вход A. Значение на выходе: 0</p>
  350.             </div>
  351.         </div>
  352.     </div>
  353.    
  354.     <script>
  355.         // Получаем элементы управления
  356.         const controlX = document.getElementById('controlX');
  357.         const controlY = document.getElementById('controlY');
  358.         const inputA = document.getElementById('inputA');
  359.         const inputB = document.getElementById('inputB');
  360.         const inputC = document.getElementById('inputC');
  361.         const inputD = document.getElementById('inputD');
  362.        
  363.         // Получаем элементы для отображения значений
  364.         const xValue = document.getElementById('xValue');
  365.         const yValue = document.getElementById('yValue');
  366.         const aValue = document.getElementById('aValue');
  367.         const bValue = document.getElementById('bValue');
  368.         const cValue = document.getElementById('cValue');
  369.         const dValue = document.getElementById('dValue');
  370.        
  371.         // Получаем элементы визуализации
  372.         const aLine = document.querySelector('.a-line');
  373.         const bLine = document.querySelector('.b-line');
  374.         const cLine = document.querySelector('.c-line');
  375.         const dLine = document.querySelector('.d-line');
  376.         const xLine = document.querySelector('.x-line');
  377.         const yLine = document.querySelector('.y-line');
  378.         const outputLine = document.querySelector('.output-line');
  379.         const outputValue = document.querySelector('.output-value');
  380.         const xControlValue = document.querySelector('.x-control-value');
  381.         const yControlValue = document.querySelector('.y-control-value');
  382.        
  383.         // Получаем элементы таблицы
  384.         const out00 = document.getElementById('out00');
  385.         const out10 = document.getElementById('out10');
  386.         const out01 = document.getElementById('out01');
  387.         const out11 = document.getElementById('out11');
  388.         const currentState = document.getElementById('currentState');
  389.         const rows = {
  390.             '00': document.getElementById('row00'),
  391.             '10': document.getElementById('row10'),
  392.             '01': document.getElementById('row01'),
  393.             '11': document.getElementById('row11')
  394.         };
  395.        
  396.         // Функция обновления состояния мультиплексора
  397.         function updateMultiplexer() {
  398.             // Получаем значения управляющих входов
  399.             const x = controlX.checked ? 1 : 0;
  400.             const y = controlY.checked ? 1 : 0;
  401.            
  402.             // Получаем значения логических входов
  403.             const a = inputA.checked ? 1 : 0;
  404.             const b = inputB.checked ? 1 : 0;
  405.             const c = inputC.checked ? 1 : 0;
  406.             const d = inputD.checked ? 1 : 0;
  407.            
  408.             // Обновляем отображение значений
  409.             xValue.textContent = x;
  410.             yValue.textContent = y;
  411.             aValue.textContent = a;
  412.             bValue.textContent = b;
  413.             cValue.textContent = c;
  414.             dValue.textContent = d;
  415.            
  416.             // Обновляем управляющие линии
  417.             xControlValue.textContent = `X = ${x}`;
  418.             yControlValue.textContent = `Y = ${y}`;
  419.            
  420.             // Обновляем активность входных линий
  421.             aLine.classList.toggle('active', inputA.checked);
  422.             bLine.classList.toggle('active', inputB.checked);
  423.             cLine.classList.toggle('active', inputC.checked);
  424.             dLine.classList.toggle('active', inputD.checked);
  425.            
  426.             // Определяем активный вход и выход
  427.             let activeInput;
  428.             let outputVal;
  429.            
  430.             if (x === 0 && y === 0) {
  431.                activeInput = 'A';
  432.                 outputVal = a;
  433.             } else if (x === 1 && y === 0) {
  434.                activeInput = 'B';
  435.                 outputVal = b;
  436.             } else if (x === 0 && y === 1) {
  437.                activeInput = 'C';
  438.                 outputVal = c;
  439.             } else {
  440.                 activeInput = 'D';
  441.                 outputVal = d;
  442.             }
  443.            
  444.             // Обновляем выходную линию и значение
  445.             outputLine.classList.toggle('active', outputVal === 1);
  446.             outputValue.textContent = `Выход: ${outputVal}`;
  447.            
  448.             // Обновляем таблицу
  449.             out00.textContent = a;
  450.             out10.textContent = b;
  451.             out01.textContent = c;
  452.             out11.textContent = d;
  453.            
  454.             // Обновляем активную строку в таблице
  455.             Object.keys(rows).forEach(key => {
  456.                 rows[key].classList.remove('active');
  457.             });
  458.             rows[`${x}${y}`].classList.add('active');
  459.            
  460.             // Обновляем текущее состояние
  461.             currentState.textContent = `X=${x}, Y=${y} выбирает вход ${activeInput}. Значение на выходе: ${outputVal}`;
  462.         }
  463.        
  464.         // Добавляем обработчики событий
  465.         controlX.addEventListener('change', updateMultiplexer);
  466.         controlY.addEventListener('change', updateMultiplexer);
  467.         inputA.addEventListener('change', updateMultiplexer);
  468.         inputB.addEventListener('change', updateMultiplexer);
  469.         inputC.addEventListener('change', updateMultiplexer);
  470.         inputD.addEventListener('change', updateMultiplexer);
  471.        
  472.         // Инициализируем состояние мультиплексора
  473.         updateMultiplexer();
  474.     </script>
  475. </body>
  476. </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!