Visualización de clasificación por inserción usando JavaScript

La clasificación por inserción es un algoritmo de clasificación simple en el que los valores de la parte sin clasificar se seleccionan y colocan en la posición correcta en la parte ordenada.

Para saber más al respecto. Consulte Clasificación por inserción .

Un algoritmo como el Ordenamiento por Inserción se puede entender fácilmente visualizando en lugar de códigos largos. En este artículo, el visualizador de clasificación por inserción se implementa mediante HTML, CSS y JavaScript.

Requisitos previos:

Acercarse:

  • El botón Generar nueva array genera una array de valores aleatorios utilizando la función Math.random() y una barra correspondiente a ese valor en términos de altura.
  • Se utilizan diferentes colores para indicar qué elementos no están ordenados (azul cielo), comparados (azul oscuro) y ordenados (verde claro).
  • Ordenar por inserción de botones ordena los elementos usando el algoritmo de ordenación por selección.
  • Finalmente, se ordenan los elementos.

Ejemplos:

  • Haga clic en el botón Generar nueva array para generar una nueva array aleatoria.
  • Haga clic en el botón Ordenar selección  para realizar la visualización.

HTML

<!DOCTYPE html>
<html lang="en">
    
  <!-- head -->
  <head>
     
    <!-- linking style.css -->
    <link href="style.css" rel="stylesheet" />
  </head>
  
  <!-- body -->
  <body>
    <section class="head">Insertion Sort</section>
    <section class="data-container"></section>
    <section id="ele"></section>
    <div style="margin: auto; width: fit-content;">
  
     <!-- "Generate New Array" button -->
   <button  class="btn1" 
           onclick="generate()" id="Button1" >
     Generate New Array</button>   
     
   <!-- "Insertion Sort" button -->
   <button class="btn2" 
           onclick="InsertionSort(),disable()" 
           id="Button2" >
     Insertion Sort</button>
    </div>     
  </body>
  
  <!-- linking index.js -->
  <script src="index.js"></script>
</html>

CSS

.mySlides {
  display: none;
}
  
body {
  background-color: rgb(255, 235, 211);
  font-family: Verdana, sans-serif;
}
  
.head {
  margin-top: 20px;
  margin-right: 20vw;
  margin-left: 20vw;
  text-align: center;
  font-size: 30px;
  background-color: #6f459e;
  color: white;
  border-radius:19px;
  font-weight: bolder;
}
  
.data-container {
  width: 600px;
  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;
}
.btn1
{
padding: 12px;
font-weight: bolder; 
background-color: #6f459e; 
border-radius: 10px; 
color: white; 
font-size: 16px; 
border: white; 
margin-top: 1vw;
margin-right: 1vw;
}
.btn2
{
padding: 12px; 
font-weight: bolder; 
background-color: #6f459e; 
border-radius: 10px; 
color: white; 
font-size: 16px; 
border: white
}
#ele{
  text-align: center;
  height: 35px;
}

Javascript

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 "Insertion Sort"
  async function InsertionSort(delay = 600) {
  let bars = document.querySelectorAll(".bar");
  
  // Provide lightgreen colour to 0th bar
  bars[0].style.backgroundColor = " rgb(49, 226, 13)";
  for (var i = 1; i < bars.length; i += 1) {
  
    // Assign i-1 to j
    var j = i - 1;
  
    // To store the integer value of ith bar to key 
    var key = 
    parseInt(bars[i].childNodes[0].innerHTML);
  
    // To store the ith bar height to height
    var height = bars[i].style.height;
     
    // For selecting section having id "ele"
    var barval=document.getElementById("ele")
  
    // For dynamically Updating the selected element
      barval.innerHTML=
      `<h3>Element Selected is :${key}</h3>`;
  
    //Provide darkblue color to the ith bar 
    bars[i].style.backgroundColor = "darkblue";
      
    // To pause the execution of code for 600 milliseconds
    await new Promise((resolve) =>
    setTimeout(() => {
      resolve();
    }, 600)
  );
  
    // For placing selected element at its correct position 
    while (j >= 0 && parseInt(bars[j].childNodes[0].innerHTML) > key) {
        
      // Provide darkblue color to the jth bar
      bars[j].style.backgroundColor = "darkblue";
        
      // For placing jth element over (j+1)th element
      bars[j + 1].style.height = bars[j].style.height;
      bars[j + 1].childNodes[0].innerText = 
      bars[j].childNodes[0].innerText;
  
      // Assign j-1 to j
      j = j - 1;
  
      // To pause the execution of code for 600 milliseconds
      await new Promise((resolve) =>
        setTimeout(() => {
          resolve();
        }, 600)
      );
        
      // Provide lightgreen color to the sorted part
      for(var k=i;k>=0;k--){
        bars[k].style.backgroundColor = " rgb(49, 226, 13)";
      }
    }
  
    // Placing the selected element to its correct position
    bars[j + 1].style.height = height;
    bars[j + 1].childNodes[0].innerHTML = key;
       
    // To pause the execution of code for 600 milliseconds
    await new Promise((resolve) =>
      setTimeout(() => {
        resolve();
      }, 600)
    );
      
    // Provide light green color to the ith bar
    bars[i].style.backgroundColor = " rgb(49, 226, 13)";
  }
  
  barval.innerHTML="<h3>Sorted!!!</h3>";
    
  // To enable the button 
  // "Generate New Array" after final(sorted)
  document.getElementById("Button1")
  .disabled = false;
  document.getElementById("Button1")
  .style.backgroundColor = "#6f459e";
  
  // To enable the button 
  // "Insertion 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 "Generate New Array"
  document.getElementById("Button1")
  .disabled = true;
  document.getElementById("Button1")
  .style.backgroundColor = "#d8b6ff";
  
  // To disable the button "Insertion Sort"
  document.getElementById("Button2")
  .disabled = true;
  document.getElementById("Button2")
  .style.backgroundColor = "#d8b6ff";  
}

Producción:

Publicación traducida automáticamente

Artículo escrito por shivammahajancse y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *