使用JavaScript来可视化砖排序

使用JavaScript来可视化砖排序

这基本上是冒泡排序的变种。该算法分为两个阶段-奇数阶段和偶数阶段。在奇数阶段,我们对奇索引元素执行冒泡排序,在偶数阶段,我们对偶索引元素执行冒泡排序。

图形用户界面(GUI) 比程序更容易理解。在本文中,我们将使用JavaScript来可视化砖排序。

先决条件:

  • Brick Sort。
  • JavaScript promises。
  • 基本的HTML、CSS和JavaScript
  • JavaScript async/await函数。

    方法:

  • 首先,我们将使用Math.random()函数生成一个随机数组。

  • 不同的颜色用于表示哪些元素是未排序的(天蓝色),哪些是已比较的(红色)和已排序的(浅绿色)。
  • 可以通过按下“Ctrl+R”键来生成新数组。
  • 按钮“砖排序”使用选择排序算法对元素进行排序。
  • 最后,元素被排序。

以下是上述方法的实现。

HTML

//filename: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>
JavaScript

CSS

/*filename: 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;
}
JavaScript

JavaScript

//filename: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
            let value1 = parseInt(bars[i].childNodes[0].innerHTML);
 
            // Assigning value of i+1th bar into value2
            let 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
                let temp1 = (bars[i].style.height);
                let 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
            let value3 = parseInt(bars[i].childNodes[0].innerHTML);
 
            // Assigning value of i+1th bar into value4
            let 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
                let temp3 = (bars[i].style.height);
                let 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";
}
JavaScript

输出:

使用JavaScript来可视化砖排序

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册