Visualización de clasificación de cubos usando Javascript

La GUI (interfaz gráfica de usuario) ayuda a comprender mejor que los programas. En este artículo, visualizaremos la ordenación de cubos usando JavaScript. Veremos cómo se almacenan los elementos en cubos y luego cómo se recorren los cubos para obtener la array ordenada final. También visualizaremos la complejidad temporal de Bucket Sort.

Referirse:

Acercarse:

Primero, generaremos una array aleatoria usando la función Math.random() .
Se utiliza un color diferente para indicar qué elemento se está atravesando .
Cada elemento atravesado se arroja en un Cubo adecuado .
Estos cubos se ordenan mediante la ordenación por inserción .
Además, estos cubos se recorren para obtener la array ordenada final.
Dado que el algoritmo realiza la operación muy rápido, se ha utilizado la función setTimeout() para ralentizar el proceso.
Se puede generar una nueva array presionando la tecla «Ctrl + R» .
La clasificación se realiza usando la función BucketSort() usando Buckets.

Ejemplo:

Antes de ordenar

Después de ordenar

A continuación se muestra el programa para visualizar el algoritmo de clasificación de cubos .

índice.html


<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <br />
    <p class="header">Bucket Sort</p>

    <div id="array"></div>
    <br />
    <br />

    <div style="display: flex; justify-content: space-evenly">
        <div class="bucket">
            <div id="one" class="bucket2"></div>
            <br />
            <h3 style="text-align: center">[1-5]</h3>
        </div>

        <div class="bucket">
            <div id="two" class="bucket2"></div>
            <br />
            <h3 style="text-align: center">[6-10]</h3>
        </div>

        <div class="bucket">
            <div id="three" class="bucket2"></div>
            <br />
            <h3 style="text-align: center">[11-15]</h3>
        </div>
        
        <div class="bucket">
            <div id="four" class="bucket2"></div>
            <br />
            <h3 style="text-align: center">[16-20]</h3>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta