<!-- Fisher–Yates shuffle -->
<div class="row">
  
  <div class="wrap"></div>
  <div class="info">
    <p>
      目前取得的随機數為:<span class="randomIndex"></span>
    </p>
    <p>
      等待交换的位置為:<span class="index">19</span>
    </p>
  </div>
</div>
.wrap {
  width: 330px;
  height: 250px;
  position: relative;
  float: left;
}

.bar {
  position: absolute;
  bottom: 0;
  margin: 5px;
  width: 10px;
  /*height: 100px;*/
  background-color: rgb(29, 72, 51);
  transition: 1s ease;
}

.info {
  float: left;
  margin-top: 120px;
}

.bar2 {
  position: absolute;
  bottom: 0;
  margin: 5px;
  height: 10px;
  background-color: red;
  transition: 1s ease;
}
    /**
     * Fisher–Yates shuffle
     */
    speed = document.getElementById("speed");    
    Array.prototype.shuffle = function() {

      var input = this;

      setTimeout(function() {

        (function() {
          var arr = input,
            len = arr.length;

          (function doProcess() {
            if (len--) {
              /* do something with arr[len] */
              // debugger
              var randomIndex = Math.floor(Math.random() * (len + 1));

              document.querySelector('.randomIndex').innerHTML = randomIndex;
              document.querySelector('.index').innerHTML = len;

              var itemAtIndex = input[randomIndex];

              input[randomIndex] = input[len];
              input[len] = itemAtIndex;

              swap(randomIndex, len);

              // console.log(len);
              setTimeout(doProcess, 500);
            }
          })();
        })();
      }, 500);
      return input;
    };

    var arr = [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
    ];

    render(arr);

    arr.shuffle()

    /**
     * 渲染
     */
    function render(arr) {
      var wrap = document.querySelector('.wrap');
      for (var i = 0; i < arr.length; i++) {
        wrap.insertAdjacentHTML('beforeend', '<div class="bar2" style="bottom:' + (arr[i]+1) * 12  + 'px;width:' + (i+1) * 15 + 'px" pos="' + i + '"></div>');
      }
    }

    function swap(i, j) {

      //console.log(i, j);
      var iDiv = document.querySelector('.wrap [pos="' + i + '"]');
      var jDiv = document.querySelector('.wrap [pos="' + j + '"]');

      var iWidth = iDiv.style.width;
      var jWidth = jDiv.style.width;

      iDiv.style.width = jWidth;
      jDiv.style.width = iWidth;

      iDiv.setAttribute('pos', j);
      jDiv.setAttribute('pos', i);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.