Esta es básicamente una variación de bubble-sort . Este algoritmo se divide en dos fases: la fase impar y la fase par. En la fase impar, realizamos una ordenación de burbuja en elementos indexados impares, y en la fase par, realizamos una ordenación de burbuja en elementos indexados pares.
Para saber más al respecto. Consulte Clasificación de ladrillos .
La GUI (interfaz gráfica de usuario) ayuda a comprender mejor que los programas. En este artículo, visualizaremos Brick Sort usando JavaScript.
Requisitos previos:
- Clasificación de ladrillos.
- Promesas de JavaScript .
- HTML básico , CSS y JavaScript .
- Función asincrónica/espera de JavaScript .
Acercarse:
- Primero, generaremos una array aleatoria usando la función Math.random() .
- Se utilizan diferentes colores para indicar qué elementos no están ordenados (azul cielo), comparados (rojo) y ordenados (verde claro).
- Se puede generar una nueva array presionando la tecla «Ctrl + R» .
- Button Brick Ordena los elementos usando el algoritmo de ordenación por selección.
- Finalmente, se ordenan los elementos.
A continuación se muestra la implementación del enfoque anterior.
index.html
<!DOCTYPE html> <html lang="en"> <!-- Head --> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!-- Title --> <title>Brick Sort Visualizer</title> <!-- Linking style.css --> <link href="style.css" rel="stylesheet" /> </head> <!-- Body --> <body> <section class="head"> Brick Sort Visualization </section> <section class="data-container"></section> <section id="ele"></section> <div style="margin: auto; width: fit-content"> <!-- "Brick Sort" button --> <button class="btn2" onclick="BrickSort(),disable()" id="Button2"> Brick Sort </button> </div> <!-- Linking script.js --> <script src="script.js"></script> </body> </html>
style.css
.mySlides { display: none; } body { background-color: rgb(0, 0, 0); font-family: Verdana, sans-serif; } .head { margin-top: 20px; margin-right: 20vw; margin-left: 20vw; text-align: center; font-size: 40px; background-color: #000000; color: white; font-weight: bolder; } .data-container { width: 600px; color: aliceblue; height: 364px; position: relative; margin: 0 auto; } .bar { width: 28px; position: absolute; left: 0; bottom: 0; background-color: rgb(0, 183, 255); transition: 0.2s all ease; } .bar__id { position: absolute; top: -24px; width: 100%; text-align: center; } .btn2 { padding: 12px; font-weight: bolder; background-color: white; border-radius: 10px; color: rgb(0, 0, 0); font-size: 16px; border: white; } #ele { text-align: center; height: 35px; }
script.js
const container = document.querySelector(".data-container"); // Function to generate bars function generatebars(num = 20) { // For loop to generate 20 bars for (let i = 0; i < num; i += 1) { // To generate random values from 1 to 100 const value = Math.floor(Math.random() * 100) + 1; // To create element "div" const bar = document.createElement("div"); // To add class "bar" to "div" bar.classList.add("bar"); // Provide height to the bar bar.style.height = `${value * 3}px`; // Translate the bar towards positive X axis bar.style.transform = `translateX(${i * 30}px)`; // To create element "label" const barLabel = document.createElement("label"); // To add class "bar_id" to "label" barLabel.classList.add("bar__id"); // Assign value to "label" barLabel.innerHTML = value; // Append "Label" to "div" bar.appendChild(barLabel); // Append "div" to "data-container div" container.appendChild(bar); } } // Asynchronous function to perform "Brick Sort" async function BrickSort(delay = 600) { let bars = document.querySelectorAll(".bar"); // Initialize isSorted with false let isSorted = false; while (!isSorted) { // set isSorted true isSorted = true; for (let i = 1; i <= 18; i = i + 2) { // Assigning value of ith bar into value1 var value1 = parseInt(bars[i].childNodes[0].innerHTML); // Assigning value of i+1th bar into value2 var value2 = parseInt(bars[i + 1].childNodes[0].innerHTML); if (value1 > value2) { // Provide red color to the ith bar bars[i].style.backgroundColor = "red"; // Provide red color to the i+1th bar bars[i + 1].style.backgroundColor = "red"; // Swap ith bar with (i+1)th bar var temp1 = (bars[i].style.height); var temp2 = (bars[i].childNodes[0].innerText); // To pause the execution of code for 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); // Swap pith bar with (i+1)th bar bars[i].style.height = (bars[i + 1].style.height); bars[i].childNodes[0].innerText = (bars[i + 1].childNodes[0].innerText); bars[i + 1].style.height = temp1; bars[i + 1].childNodes[0].innerText = temp2; isSorted = false; // To pause the execution of code for 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); // Provide skyblue color to the ith bar bars[i].style.backgroundColor = "rgb(0, 183, 255)"; // Provide skyblue color to the i+1th bar bars[i + 1].style.backgroundColor = "rgb(0, 183, 255)"; } } for (let i = 0; i <= 18; i = i + 2) { // Assigning value of ith bar into value3 var value3 = parseInt(bars[i].childNodes[0].innerHTML); // Assigning value of i+1th bar into value4 var value4 = parseInt(bars[i + 1].childNodes[0].innerHTML); if (value3 > value4) { // Provide red color to the ith bar bars[i].style.backgroundColor = "red"; // Provide red color to the i+1th bar bars[i + 1].style.backgroundColor = "red"; // Swap ith bar with (i+1)th bar var temp3 = (bars[i].style.height); var temp4 = (bars[i].childNodes[0].innerText); // To pause the execution of code for 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); // Swap ith bar with (i+1)th bar bars[i].style.height = (bars[i + 1].style.height); bars[i].childNodes[0].innerText = (bars[i + 1].childNodes[0].innerText); bars[i + 1].style.height = temp3; bars[i + 1].childNodes[0].innerText = temp4; isSorted = false; // To pause the execution of code for 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); // Provide skyblue color to the ith bar bars[i].style.backgroundColor = "rgb(0, 183, 255)"; // Provide skyblue color to the i+1th bar bars[i + 1].style.backgroundColor = "rgb(0, 183, 255)"; } // To pause the execution of code for 300 milliseconds new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); } // To pause the execution of code for 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); // Providing skyblue color for (var x = 0; x < 20; x++) { bars[x].style.backgroundColor = "rgb(0, 183, 255)"; } } // Providing lightgreen color for (var x = 0; x < 20; x++) { bars[x].style.backgroundColor = "rgb(49, 226, 13)"; } // To enable the button "Brick Sort" after final(sorted) document.getElementById("Button2").disabled = false; document.getElementById("Button2").style.backgroundColor = "#6f459e"; } // Call "generatebars()" function generatebars(); // Function to generate new random array function generate() { window.location.reload(); } // Function to disable the button function disable() { // To disable the button "Brick Sort" document.getElementById("Button2").disabled = true; document.getElementById("Button2").style.backgroundColor = "white"; }
Producción:
Publicación traducida automáticamente
Artículo escrito por pankaj2407 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA