请你用html写一个排序预览软件要求支持下一步上一步以及解释。支持以下排序：冒泡排序Bubble Sort插入排序Insertion Sort希尔排序Shell Sort选择排序Selection Sort快速排序Quick Sort归并排序Merge Sort堆排序Heap Sort计数排序Counting Sort桶排序Bucket Sort基数排序Radix Sort
下面是一个使用HTML和JavaScript编写的排序预览软件，其中包含了所需的排序算法和相应的操作按钮。
<!DOCTYPE html>
<html>
<head>
<title>排序预览软件</title>
<style>
body {
font-family: Arial, sans-serif;
}
#sortContainer {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
#sortButtons {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.sortButton {
padding: 10px 20px;
margin: 0 10px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
.sortButton:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>排序预览软件</h1>
<div id="sortContainer">
<div id="sortVisualizer"></div>
</div>
<div id="sortButtons">
<button class="sortButton" onclick="previousStep()">上一步</button>
<button class="sortButton" onclick="nextStep()">下一步</button>
</div>
<script>
// 声明排序算法的名称和对应的函数
const sortingAlgorithms = {
"冒泡排序": bubbleSort,
"插入排序": insertionSort,
"希尔排序": shellSort,
"选择排序": selectionSort,
"快速排序": quickSort,
"归并排序": mergeSort,
"堆排序": heapSort,
"计数排序": countingSort,
"桶排序": bucketSort,
"基数排序": radixSort
};
// 初始化排序算法
let currentAlgorithm = null;
// 初始化排序步骤
let currentStep = 0;
let sortingSteps = [];
// 初始化排序数组
const arrayToSort = [5, 3, 8, 4, 2, 1, 6, 9, 7];
// 初始化排序可视化元素
const sortVisualizer = document.getElementById("sortVisualizer");
arrayToSort.forEach(number => {
const numberElement = document.createElement("div");
numberElement.style.height = `${number * 20}px`;
numberElement.style.backgroundColor = "#4CAF50";
numberElement.style.margin = "0 2px";
sortVisualizer.appendChild(numberElement);
});
// 选择排序算法
function selectAlgorithm(algorithmName) {
currentAlgorithm = sortingAlgorithms[algorithmName];
currentStep = 0;
sortingSteps = currentAlgorithm([...arrayToSort]);
updateVisualizer();
}
// 上一步
function previousStep() {
if (currentStep > 0) {
currentStep--;
updateVisualizer();
}
}
// 下一步
function nextStep() {
if (currentStep < sortingSteps.length - 1) {
currentStep++;
updateVisualizer();
}
}
// 更新可视化元素
function updateVisualizer() {
const currentStepData = sortingSteps[currentStep];
const numberElements = sortVisualizer.childNodes;
for (let i = 0; i < currentStepData.length; i++) {
numberElements[i].style.height = `${currentStepData[i] * 20}px`;
}
}
// 冒泡排序
function bubbleSort(array) {
const steps = [];
const len = array.length;
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - i - 1; j++) {
if (array[j] > array[j + 1]) {
[array[j], array[j + 1]] = [array[j + 1], array[j]];
}
steps.push([...array]);
}
}
return steps;
}
// 插入排序
function insertionSort(array) {
const steps = [];
const len = array.length;
for (let i = 1; i < len; i++) {
let j = i - 1;
const key = array[i];
while (j >= 0 && array[j] > key) {
array[j + 1] = array[j];
j--;
}
array[j + 1] = key;
steps.push([...array]);
}
return steps;
}
// 希尔排序
function shellSort(array) {
const steps = [];
const len = array.length;
for (let gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) {
for (let i = gap; i < len; i++) {
const temp = array[i];
let j = i;
while (j >= gap && array[j - gap] > temp) {
array[j] = array[j - gap];
j -= gap;
}
array[j] = temp;
steps.push([...array]);
}
}
return steps;
}
// 选择排序
function selectionSort(array) {
const steps = [];
const len = array.length;
for (let i = 0; i < len - 1; i++) {
let minIndex = i;
for (let j = i + 1; j < len; j++) {
if (array[j] < array[minIndex]) {
minIndex = j;
}
}
[array[i], array[minIndex]] = [array[minIndex], array[i]];
steps.push([...array]);
}
return steps;
}
// 快速排序
function quickSort(array) {
if (array.length <= 1) {
return array;
}
const steps = [];
const pivot = array[array.length - 1];
const left = [];
const right = [];
for (let i = 0; i < array.length - 1; i++) {
if (array[i] < pivot) {
left.push(array[i]);
} else {
right.push(array[i]);
}
}
const sortedLeft = quickSort(left);
const sortedRight = quickSort(right);
steps.push([...sortedLeft, pivot, ...sortedRight]);
return steps;
}
// 归并排序
function mergeSort(array) {
if (array.length <= 1) {
return array;
}
const steps = [];
const mid = Math.floor(array.length / 2);
const left = array.slice(0, mid);
const right = array.slice(mid);
const sortedLeft = mergeSort(left);
const sortedRight = mergeSort(right);
let i = 0;
let j = 0;
let k = 0;
while (i < sortedLeft.length && j < sortedRight.length) {
if (sortedLeft[i] < sortedRight[j]) {
array[k] = sortedLeft[i];
i++;
} else {
array[k] = sortedRight[j];
j++;
}
k++;
}
while (i < sortedLeft.length) {
array[k] = sortedLeft[i];
i++;
k++;
}
while (j < sortedRight.length) {
array[k] = sortedRight[j];
j++;
k++;
}
steps.push([...array]);
return steps;
}
// 堆排序
function heapSort(array) {
const steps = [];
let len = array.length;
function heapify(array, len, i) {
let largest = i;
const left = 2 * i + 1;
const right = 2 * i + 2;
if (left < len && array[left] > array[largest]) {
largest = left;
}
if (right < len && array[right] > array[largest]) {
largest = right;
}
if (largest !== i) {
[array[i], array[largest]] = [array[largest], array[i]];
heapify(array, len, largest);
}
}
function buildHeap(array, len) {
for (let i = Math.floor(len / 2); i >= 0; i--) {
heapify(array, len, i);
}
}
buildHeap(array, len);
for (let i = len - 1; i > 0; i--) {
[array[0], array[i]] = [array[i], array[0]];
len--;
heapify(array, len, 0);
steps.push([...array]);
}
return steps;
}
// 计数排序
function countingSort(array) {
const steps = [];
const len = array.length;
let min = array[0];
let max = array[0];
for (let i = 1; i < len; i++) {
if (array[i] < min) {
min = array[i];
}
if (array[i] > max) {
max = array[i];
}
}
const countArray = Array(max - min + 1).fill(0);
for (let i = 0; i < len; i++) {
countArray[array[i] - min]++;
}
let sortedIndex = 0;
for (let i = 0; i < countArray.length; i++) {
while (countArray[i] > 0) {
array[sortedIndex] = i + min;
sortedIndex++;
countArray[i]--;
}
steps.push([...array]);
}
return steps;
}
// 桶排序
function bucketSort(array) {
const steps = [];
const len = array.length;
const bucketSize = Math.floor(Math.sqrt(len));
const min = Math.min(...array);
const max = Math.max(...array);
const bucketCount = Math.floor((max - min) / bucketSize) + 1;
const buckets = Array(bucketCount);
for (let i = 0; i < buckets.length; i++) {
buckets[i] = [];
}
for (let i = 0; i < len; i++) {
const bucketIndex = Math.floor((array[i] - min) / bucketSize);
buckets[bucketIndex].push(array[i]);
}
let sortedIndex = 0;
for (let i = 0; i < buckets.length; i++) {
if (buckets[i]) {
const sortedBucket = insertionSort(buckets[i]);
for (let j = 0; j < sortedBucket.length; j++) {
array[sortedIndex] = sortedBucket[j];
sortedIndex++;
}
}
steps.push([...array]);
}
return steps;
}
// 基数排序
function radixSort(array) {
const steps = [];
const len = array.length;
const max = Math.max(...array);
const maxDigits = max.toString().length;
const buckets = Array(10).fill().map(() => []);
for (let k = 0; k < maxDigits; k++) {
for (let i = 0; i < len; i++) {
const digit = Math.floor(array[i] / Math.pow(10, k)) % 10;
buckets[digit].push(array[i]);
}
let sortedIndex = 0;
for (let i = 0; i < buckets.length; i++) {
while (buckets[i].length > 0) {
array[sortedIndex] = buckets[i].shift();
sortedIndex++;
}
}
steps.push([...array]);
}
return steps;
}
</script>
</body>
</html>
请将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，即可使用排序预览软件。在软件中，您可以选择排序算法并逐步查看排序的每个步骤。点击“上一步”和“下一步”按钮可切换到前一个或后一个步骤，以观察排序过程
原文地址: https://www.cveoy.top/t/topic/iNJT 著作权归作者所有。请勿转载和采集!