原生js 实现冒泡排序动画展示

陌上阳光明媚

已于 2023-06-14 16:47:19 修改

阅读量291

点赞数

文章标签： javascript html5 css

于 2023-06-14 16:44:29 首次发布

本文链接：https://blog.csdn.net/qq_38389990/article/details/131210198

版权

一、使用原生js + html + css 实现每隔1s动态排序一次，黑色边框，交换时，需要交换的边框为红色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>测试</title>
    <link rel="stylesheet" href="/base.css" />
    <style>
      #bar_container{
        width: 100%;
        height: 100%;
        display: flex;
      }
      #bar_container > .bar{
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #000;
        border: 1px solid #000;
        margin: 0 5px;
        /* background-color: aqua; */
        transition: border 0.3s ease-in-out;
      }
    </style>
    <script>
    </script>
  </head>
  <body>
    <div id="container">
      <div id="bar_container"></div>
      <button id="sort_btn">开始排序</button>
    </div>
    <script>
      let arr = [8,3,7,1]
      let len = arr.length
      let bar_container = document.getElementById('bar_container')
      let btn_div = document.getElementById('sort_btn')
      function createChildrenDiv(arr){
        for(let i = 0; i<arr.length; i++){
          const bar_div = document.createElement('div')
          bar_div.classList = 'bar'
          // bar_div.style.height = arr[i] * 10 + 'px'
          bar_div.innerHTML = arr[i]
          bar_container.appendChild(bar_div)
        }
      }
      document.addEventListener('DOMContentLoaded',function() {
        createChildrenDiv(arr)
      })
      function sleep(ms){
        return new Promise((resolve, reject) => {
          setTimeout(resolve, ms)
        })
      }
      async function animationFun(arr){
        let bars_div = document.getElementsByClassName('bar')
        for(let i = 0; i < len - 1; i++){
          for(let j = 0; j<(len - 1 - i); j++){
            if(arr[j] > arr[j + 1]){
              for (let k = 0; k < bars_div.length; k++) {
                if (k !== j && k !== (j + 1)) {
                  // bars_div[k].style.backgroundColor = 'aqua'
                  bars_div[k].style.border = '1px solid #000'
                }
              }
              [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
              // bars_div[j].style.height = arr[j] * 10 + 'px'
              // bars_div[j].style.backgroundColor = 'lightgreen'
              // bars_div[j + 1].style.height = arr[j + 1] * 10 + 'px'
              // bars_div[j + 1].style.backgroundColor = 'lightgreen'
              bars_div[j].innerHTML = arr[j]
              bars_div[j].style.border = '1px solid red'
              bars_div[j + 1].innerHTML = arr[j + 1]
              bars_div[j + 1].style.border = '1px solid red'
              await sleep(1000)
            }
          }
          // await sleep(1000)
        }
        bar_container.innerHTML = ''
        createChildrenDiv(arr)
        return arr
      }
      btn_div.addEventListener('click', function() {
        animationFun(arr)
      })

    </script>
  </body>
</html>

gif动态效果图：

二、使用原生js + html + css，实现动态排序，每隔模块高度与arr[i]对应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>测试</title>
    <link rel="stylesheet" href="/base.css" />
    <style>
      #bar_container{
        width: 100%;
        height: 100%;
        display: flex;
      }
      #bar_container > .bar{
        width: 30px;
        /* height: 30px; */
        /* line-height: 30px; */
        /* text-align: center; */
        /* color: #000; */
        border: 1px solid #000;
        margin: 0 5px;
        background-color: aqua;
        transition: height 0.3s ease-in-out;
      }
    </style>
    <script>
    </script>
  </head>
  <body>
    <div id="container">
      <div id="bar_container"></div>
      <button id="sort_btn">开始排序</button>
    </div>
    <script>
      let arr = [8,3,7,1]
      let len = arr.length
      let bar_container = document.getElementById('bar_container')
      let btn_div = document.getElementById('sort_btn')
      function createChildrenDiv(arr){
        for(let i = 0; i<arr.length; i++){
          const bar_div = document.createElement('div')
          bar_div.classList = 'bar'
          bar_div.style.height = arr[i] * 10 + 'px'
          // bar_div.innerHTML = arr[i]
          bar_container.appendChild(bar_div)
        }
      }
      document.addEventListener('DOMContentLoaded',function() {
        createChildrenDiv(arr)
      })
      function sleep(ms){
        return new Promise((resolve, reject) => {
          setTimeout(resolve, ms)
        })
      }
      async function animationFun(arr){
        let bars_div = document.getElementsByClassName('bar')
        for(let i = 0; i < len - 1; i++){
          for(let j = 0; j<(len - 1 - i); j++){
            if(arr[j] > arr[j + 1]){
              for (let k = 0; k < bars_div.length; k++) {
                if (k !== j && k !== (j + 1)) {
                  bars_div[k].style.backgroundColor = 'aqua'
                  // bars_div[k].style.border = '1px solid #000'
                }
              }
              [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
              bars_div[j].style.height = arr[j] * 10 + 'px'
              bars_div[j].style.backgroundColor = 'lightgreen'
              bars_div[j + 1].style.height = arr[j + 1] * 10 + 'px'
              bars_div[j + 1].style.backgroundColor = 'lightgreen'
              // bars_div[j].innerHTML = arr[j]
              // bars_div[j].style.border = '1px solid red'
              // bars_div[j + 1].innerHTML = arr[j + 1]
              // bars_div[j + 1].style.border = '1px solid red'
              await sleep(1000)
            }
          }
          // await sleep(1000)
        }
        bar_container.innerHTML = ''
        createChildrenDiv(arr)
        return arr
      }
      btn_div.addEventListener('click', function() {
        animationFun(arr)
      })

    </script>
  </body>
</html>

gif动态效果图：