使用JavaScript进行冒泡排序可视化(1)

📌 相关文章

📜 使用JavaScript进行冒泡排序可视化(1)

📅 最后修改于: 2023-12-03 14:49:48.419000 🧑 作者: Mango

使用 JavaScript 进行冒泡排序可视化

介绍

冒泡排序是一种基本排序算法，它的思想是比较相邻的元素，如果前一个元素大于后一个元素，则交换它们的位置。这样一轮比较之后，最大的元素会“冒泡”到数组的末尾。接着再对剩下的元素进行比较，依此类推，直到整个数组都被排序。

在本文中，我们将介绍如何使用 JavaScript 实现冒泡排序，并利用 HTML、CSS 和 JavaScript 技术，为冒泡排序添加可视化动画效果。

显示排序过程的框架

在开始实现冒泡排序之前，我们需要先准备一些 HTML、CSS 和 JavaScript 的代码，用于显示排序过程。

首先，我们需要一个文本输入框，以便用户输入需要排序的数组。

<label>请输入需要排序的数组：</label>
<input type="text" id="input">

其次，我们需要添加一个按钮，当用户点击该按钮时，程序会开始进行冒泡排序和动画渲染。

<button onclick="sort()">排序</button>

最后，我们需要在页面中添加一个 div 元素，用于显示排序结果，并为其设置样式。

<div id="result"></div>

<style>
  #result {
    width: 400px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
  }
  .bar {
    height: 10px;
    margin: 0px 1px;
  }
</style>

在样式中，我们设置了一个名为“result”的 div 元素，该元素的宽度为 400 像素，高度为 300 像素，边框为 1 像素，背景颜色为灰色，且其内部元素采用弹性布局方式排列，最后设置了一个“overflow:hidden”属性，使该元素的溢出部分被隐藏。此外，我们还为每个柱形元素设置了一个高度和一个边距。

冒泡排序算法实现

接下来，我们将用 Javascript 实现冒泡排序。

首先，我们需要获取用户在文本输入框中输入的数组，并将其转换为一个数字数组。

let numbers = document.getElementById('input').value.split(',').map(Number);

接下来，我们需要编写一个“bubbleSort”函数来执行冒泡排序。在这个函数中，我们需要使用两个嵌套的 for 循环，比较相邻元素的大小并交换它们的位置。同时，我们需要在每次交换位置后，调用一个名为“draw”的函数来重新渲染 div 元素中的柱形元素，以便用户能够观察排序的过程。

function bubbleSort(numbers) {
  let len = numbers.length;

  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      if (numbers[j] > numbers[j + 1]) {
        let temp = numbers[j];
        numbers[j] = numbers[j + 1];
        numbers[j + 1] = temp;
        draw(j, j + 1);
      }
    }
  }

  return numbers;
}

最后，在“draw”函数中，我们需要获取 result 元素并创建一堆 div 元素来表示排序结果。该函数将根据排序结果设置每个柱形元素的高度，并根据当前元素的索引设置其背景颜色。由于我们将“draw”函数包含在“bubbleSort”函数中，所以每次对数组进行排序时，就会重新绘制“result”元素。

function draw(index1, index2) {
  let numbers = document.getElementById('input').value.split(',').map(Number);
  let result = document.getElementById('result');
  result.innerHTML = '';

  for (let i = 0; i < numbers.length; i++) {
    let color = null;
    if (i === index1) {
      color = 'red';
    } else if (i === index2) {
      color = 'red';
    } else {
      color = 'blue';
    }
    let bar = document.createElement('div');
    bar.classList.add('bar');
    bar.style.backgroundColor = color;
    bar.style.width = '10px';
    bar.style.height = `${numbers[i] * 10}px`;
    result.appendChild(bar);
  }
}

完整代码

最后，我们将 JavaScript、HTML 和 CSS 代码合并并添加必要的注释。请注意，此处所示的代码中包括了一些额外的 JavaScript 代码，用于防止用户输入非法数组。如果我们不进行这种验证，程序会崩溃。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>冒泡排序可视化</title>
    <style>
      label {
        font-size: 20px;
      }
      input {
        width: 100%;
        padding: 5px;
        font-size: 16px;
      }
      button {
        margin-top: 10px;
        padding: 5px 10px;
        border-radius: 5px;
        border: none;
        background-color: #0095ff;
        color: white;
        font-size: 16px;
        cursor: pointer;
      }
      button:hover {
        background-color: #006ab8;
      }
      #result {
        width: 400px;
        height: 300px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        overflow: hidden;
      }
      .bar {
        height: 10px;
        margin: 0px 1px;
      }
    </style>
  </head>
  <body>
    <label>请输入需要排序的数组：</label>
    <input type="text" id="input">
    <button onclick="sort()">排序</button>
    <div id="result"></div>

    <script>
      function sort() {
        // 获取用户输入的数组并进行验证
        let input = document.getElementById('input').value;

        if (!input) {
          alert('请输入需要排序的数组！');
          return;
        }

        let numbers = input.split(',').map(Number);

        if (numbers.includes(NaN) || numbers.length === 0) {
          alert('请输入正确的数组格式！');
          return;
        }

        // 调用 bubbleSort 函数并返回排序结果
        let sortedNumbers = bubbleSort(numbers);

        console.log(sortedNumbers);
      }

      function bubbleSort(numbers) {
        let len = numbers.length;

        for (let i = 0; i < len - 1; i++) {
          for (let j = 0; j < len - i - 1; j++) {
            if (numbers[j] > numbers[j + 1]) {
              let temp = numbers[j];
              numbers[j] = numbers[j + 1];
              numbers[j + 1] = temp;
              draw(j, j + 1);
            }
          }
        }

        return numbers;
      }

      function draw(index1, index2) {
        let numbers = document.getElementById('input').value.split(',').map(Number);
        let result = document.getElementById('result');
        result.innerHTML = '';

        for (let i = 0; i < numbers.length; i++) {
          let color = null;
          if (i === index1) {
            color = 'red';
          } else if (i === index2) {
            color = 'red';
          } else {
            color = 'blue';
          }
          let bar = document.createElement('div');
          bar.classList.add('bar');
          bar.style.backgroundColor = color;
          bar.style.width = '10px';
          bar.style.height = `${numbers[i] * 10}px`;
          result.appendChild(bar);
        }
      }
    </script>
  </body>
</html>

现在，你可以在浏览器中打开这个 HTML 文件并开始使用它了。在输入框中输入一个数字数组，然后单击“排序”按钮，即可在排序期间观察到可视化效果。