js冒泡排序从小到大排序，代码与动画演示
冒泡排序是一种简单直观的排序算法，它通过重复地遍历待排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。遍历数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小（或越大）的元素会经由交换慢慢“浮”到数列的顶端。
冒泡排序算法的步骤可以简单描述如下：
1. 比较相邻的元素。如果第一个比第二个大（小），就交换它们两个。
2. 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
3. 针对所有的元素重复以上的步骤，除了最后一个。
4. 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
javascript
function bubbleSort(arr) {
var n = arr.length;
var swapped;
do {
swapped = false;
for (var i = 1; i < n; i++) {
if (arr[i - 1] > arr[i]) {
// 交换两个元素
var temp = arr[i - 1];
arr[i - 1] = arr[i];
arr[i] = temp;
swapped = true;
}
}
// 每次遍历后，最大的元素已经被放置在正确的位置
n--;
} while (swapped);
return arr;
}
// 测试冒泡排序函数
var numbers = [64, 34, 25, 12, 22, 11, 90];
console.log("原始数组: " + numbers);
bubbleSort(numbers);
console.log("排序后的数组: " + numbers);
html
.bar {
width: 20px;
margin: 5px;
background-color: blue;
display: inline-block;
position: relative;
}
.bar::after {
content: attr(data-value);
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
color: black;
}
// 初始化数组
var numbers = [64, 34, 25, 12, 22, 11, 90];
function createBars() {
var container = document.getElementById('array-container');
container.innerHTML = ''; // 清空容器
numbers.forEach(function(value) {
var bar = document.createElement('div');
bar.classList.add('bar');
bar.style.height = value + 'px';
bar.setAttribute('data-value', value);
container.appendChild(bar);
});
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function bubbleSortAnimation() {
var n = numbers.length;
var swapped;
do {
swapped = false;
for (var i = 1; i < n; i++) {
// 高亮显示当前比较的两个元素
var bar1 = document.querySelectorAll('.bar')[i - 1];
var bar2 = document.querySelectorAll('.bar')[i];
bar1.style.backgroundColor = 'red';
bar2.style.backgroundColor = 'red';
await sleep(500);
if (numbers[i - 1] > numbers[i]) {
// 交换两个元素
var temp = numbers[i - 1];
numbers[i - 1] = numbers[i];
numbers[i] = temp;
// 更新动画
bar1.style.height = numbers[i - 1] + 'px';
bar1.setAttribute('data-value', numbers[i - 1]);
bar2.style.height = numbers[i] + 'px';
bar2.setAttribute('data-value', numbers[i]);
swapped = true;
}
// 恢复颜色
bar1.style.backgroundColor = 'blue';
bar2.style.backgroundColor = 'blue';
}
n--;
} while (swapped);
}
createBars();
bubbleSortAnimation();
在这个动画中，每个元素用一根柱子表示，柱子的高度代表元素的值。排序过程中，比较的两个元素会变成红色，交换后柱子的高度和数值也会相应更新。通过这种方式，我们可以直观地看到冒泡排序的工作过程。
