promise_protogenesis v1.0.7

jQuery动画

内容介绍

 jQuery动画实现排序

1. 用匿名函数来使用

   (function () {

   })()

• js

---

class SortList {}

 arrHis = [];
    speed=100;//设置秒数
    array = [
        66, 78, 90, 22, 64, 18, 86, 32, 19, 60, 28, 24, 23, 17, 67, 82, 57, 89,
        33, 11, 76, 43, 79, 5, 42, 99, 14, 95, 68, 51, 4, 77, 91, 83, 27, 21, 84,
        72, 8, 30, 71, 52, 20, 94, 80, 29, 81, 26, 39, 53,
      ];//输入的数组
      //排序后的数组
      sortRes=[];
    constructor() {
        this.init();//初始化函数
    }
    init() {
        this.addEvent();
    }
    createArray(arrLength){
        let tempArr = [];
        for (let i = 0; i < arrLength; i++) {
          tempArr.push(Math.floor(Math.random() * 100));
        }
        this.array = tempArr;
        $('textarea[name="arr"]').val(`[${tempArr}]`);
    }
           
    bubbleSortDom(arr, j) {
        var html = "",
          item = "",
          len = arr.length,
          i;     
        for (i = 0; i < len; i++) {
          if (i == j + 1 || i == j) {
            item = `<li class="sort_li"><span class="sort_span sort_span_blue" style="height: ${arr[i]}%"></span></li>`;
          } else {
            item = `<li class="sort_li"><span class="sort_span" style="height:${arr[i]}%"></span></li>`;
          }
          html = html + item;
        }
  
        document.querySelector(".sort_ul").innerHTML = html;
      }
    //执行第四步
    animation() {
        var arrHis = this.arrHis;
        this.timer = setInterval(() => {
          if (arrHis.length > 0) {
            this.bubbleSortDom(arrHis[0][0], arrHis[0][1]);//请输入
            arrHis.shift();
          } else {
            clearInterval(this.timer);
          }
        }, this.speed);
      }
    //执行
    pushHis(...arg){
        console.log(arg);
        this.arrHis.push(arg);
    }
    //执行的第一步    
    bubbleSort(array){
        for (let i = 0; i <  array.length; i++){
            for (let j = i+1; j <  array.length; j++){
                if(array[i]>array[j]){
                    var temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                    this.pushHis(array.slice(), j);//2.步存入数组*********1
                }
            }
        }
        return array;
    }
    //点击加速或者减速
    speedDown() {
        this.speed += 100;
        clearInterval(this.timer);
        this.animation();
      }
      speedUp() {
        if (this.speed <= 100) {
          console.log("不能再快了！");
          return;
        }
        this.speed -= 100;
        clearInterval(this.timer);
        this.animation();
      }
    //设置点击事件
    addEvent() {
        $("form").click((e) => {
            const target = e.target;//获取target事件
            console.log(target.id);
            if (target.type == "button") {
                switch (target.id) {
                    case "createArr":
                        const arrLength = $('input[name="arrLen"]').val();
                        this.createArray(arrLength);
                        break;
                    case "speedDown":
                        this.speedDown();
                        break;
                    case "speedUp":
                        this.speedUp();
                        break;
                    case "bubble":
                        this.sortRes= this.bubbleSort(this.array);
                        this.animation();
                        break;
                    default:
                        break;
                }
            }
        })
    }
}

new SortList()

• HTML

<link rel="stylesheet" href="./sort.css" />

  form {
    font-size: 12px;
  }
  .form-group {
    margin-bottom: 10px;
  }
  .num-input {
    width: 600px;
  }


<div>

  <form>

    <div class="form-group">
      <label for="arrLen">数组长度：</label>
      <input name="arrLen" class="form-control" value="50" />
      <input value="生成数组" id="createArr" type="button" />
    </div>
    <div class="form-group">
      <label for="arr">数组：</label
      ><textarea name="arr" class="form-control num-input" rows="5">
      </textarea>
    </div>
    <div class="form-group">
      <label for="speed">速度：</label>
      <input id="speedDown" value="减慢" class="" type="button" />
      <input id="speedUp" value="加快" class="" type="button" />
    </div>

    <div class="form-group sortBtn">
      <label for="arr">排序方式：</label>
      <input id="bubble" value="冒泡排序" class="" type="button"/>
    </div>
  </form>
  <ul class="sort_ul" id="sort-wraper"></ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="index.js"></script>

• CSS

ul, li { list-style: none; margin: 0; padding: 0; } inputtype="button" { cursor: pointer; } .sort_ul {

border: 7px solid rgb(18, 255, 235); height: 359px; width: 687px; } .sort_li { float: left; width: 10px; height: 100%; margin-right: 3px; position: relative; } .sort_span { width: 100%; display: block; height: 50%; background: rgb(183, 236, 9); } .sort_span_blue { background-image: linear-gradient(36deg,red,pink); } .sort_span_green { background: rgb(0, 0, 0); } .sort_span_tag { background: red; } .sort_span_in { width: 100%; display: block; background: red; position: absolute; top: 0; }

.sorting_btn { background-color: green; color: #fff; border: 1px solid green; }