這是IFE基礎(chǔ)JavaScript練習(xí)（二），實(shí)現(xiàn)冒泡排序的可視化，用高度表示數(shù)字的大小，然后可視化的進(jìn)行排序（由于冒泡排序比較簡單，我就先從冒泡排序開始）

效果圖如下

冒泡排序

什么是冒泡排序

冒泡排序是一種簡單的交換類排序方法。基本思想是：從頭開始掃描待排序數(shù)組，按順序比較相鄰兩元素的大小。在第一趟排序中，從第一個(gè)數(shù)開始，比較其與后一位元素的大小，如果是逆序，就交換順序，再對(duì)下一位元素開始操作。然后第二趟的時(shí)候?qū)η皀-1個(gè)進(jìn)行操作（因?yàn)樽詈笠晃灰呀?jīng)是最大的了）

具體來說，比如

原始數(shù)組
[13, 46, 25, 39, 30]

第一次排序
[13, 46, 25, 39, 30] （從第一位開始比較是否逆序，如果是則交換位置）
[13, 46, 25, 39, 30] （逆序，交換位置，繼續(xù)比較）
[13, 25, 46, 39, 30] （逆序，交換位置，繼續(xù)比較）
[13, 25, 39, 46, 30] （逆序，交換位置，繼續(xù)比較）
[13, 25, 39, 30, 46] （第一次完成）

第二次排序
[13,** 25**, 39, 30, 46]
[13, 25, 39, 30, 46]
[13, 25, 39, 30, 46] （逆序，交換順序）
[13, 25, 30, 39, 46] （第二次完成，注意最后一位不再進(jìn)行比較）

算法實(shí)現(xiàn)

var sort = function (arr) {
    for (var k = 0; k < arr.length; k++) {
        for (var j = 0; j < arr.length - k - 1; j++) {
            if (arr[j] > arr[j + 1]) {
               var temp = arr[j];
               arr[j] = arr[j + 1];
               arr[j + 1] = temp;
             }
         }
    }
}

接下來是可視化

我們要用高度來表示數(shù)組元素的大小，可以這樣

function printf() {
        wrap.innerHTML = "";  //清空上次數(shù)據(jù)
        for (var i = 0; i < arr.length; i++) {
            var div = document.createElement("div");
            div.setAttribute("class", "count"); //設(shè)置class方便寫樣式
            div.innerHTML = arr[i];
            wrap.appendChild(div);
            div.style.height = (5 * arr[i]) + "px"; //設(shè)置高度
            div.style.left = (i * 35) + "px"; //設(shè)置絕對(duì)定位的位置
        }
    }

我們?cè)赾ss里給它們絕對(duì)定位，然后遍歷數(shù)組進(jìn)行輸出，根據(jù)大小設(shè)置高度。如果和我一樣有輸入和輸出的按鈕可以給按鈕綁定這個(gè)事件。如果只有一個(gè)輸入框的話，可以給輸入框綁定失焦事件，注意對(duì)數(shù)據(jù)正確性做驗(yàn)證。

現(xiàn)在就變成這樣了

怎么讓它動(dòng)起來呢

思路：用數(shù)組記錄每趟排序后的狀態(tài)，定時(shí)根據(jù)狀態(tài)數(shù)組更新DOM，這樣看起來就像動(dòng)畫一樣

var sort = document.getElementById("sort");
    sort.onclick = function () {
        if (arr.length === 0) {
            alert("還沒有輸入數(shù)字哦！")
        } else {
            var domArr = [].slice.call(document.getElementsByClassName("count"));
            var state = [];
            var sort = function (arr) {
                for (var k = 0; k < arr.length; k++) {
                    for (var j = 0; j < arr.length - k - 1; j++) {
                        if (arr[j] > arr[j + 1]) {
                            var temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                            state.push(JSON.parse(JSON.stringify(arr)));
                        }
                    }
                }
            }

            sort(arr);
            var draw = function () {
                var bar, numArr;
                numArr = state.shift() || [];
                var q = 0;
                for (bar in domArr) {
                    if (numArr[bar] !== undefined) {
                        domArr[bar].style.height = (5 * parseInt(numArr[bar])) + "px";
                        domArr[bar].style.left = (q * 35) + "px";
                        domArr[bar].innerHTML = numArr[bar];
                        q++;
                    }
                }
            }
            setInterval(draw, 200);
        }
    }

ok啦，源碼在這里