使用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
输出: