JavaScript模拟冒泡排序

  JavaScript模拟冒泡排序排序过程,冒泡排序模拟过程效果

JavaScript模拟冒泡排序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript模拟冒泡排序</title>
<style type="text/css">
div div{width: 10px;background-color: red;display: inline-block;margin-right: 1px;text-align: center;line-height: 30px;}
#show {width: 500px;height: 300px;margin-left: auto;margin-right: auto;margin-top: 50px;}
</style>
</head>
<body>
<div id="dvBtn"><input type="button" value="冒泡升序" onclick="sort(document.getElementById('show').getElementsByTagName('div'),true)">
 <input type="button" value="冒泡降序" onclick="sort(document.getElementById('show').getElementsByTagName('div'),false)">
 <input type="button" value="打乱顺序" onclick="sortRnd()"></div>
<div id="show">
<div style="height: 80px; background-color: red;"></div>
<div style="height: 100px; background-color: red;"></div>
<div style="height: 40px; background-color: red;"></div>
<div style="height: 60px; background-color: red;"></div>
<div style="height: 120px; background-color: red;"></div>
<div style="height: 20px;"></div>
<div style="height: 200px; background-color: red;"></div>
</div>
<script type="text/javascript">
    function sortRnd() {//打乱排序
        var show = document.getElementById('show'), divs = show.getElementsByTagName('div'), l = divs.length;
        for (var i = 0; i < l; i++) show.appendChild(divs[Math.round(Math.random() * l)]);
    }
    function disabledButton(disabled) {
        var btn = document.getElementById('dvBtn').getElementsByTagName('input');
        for (var i = 0; i < btn.length; i++) btn[i].disabled = disabled
    }
    function plusIJ(arr, isAsc) {
        arr.j++;
        if (arr.j < arr.length - 1 - arr.i) sort(arr, isAsc, true);//继续冒泡
        else {
            arr.i++; arr.j = 0;
            if (arr.i < arr.length) sort(arr, isAsc, true);//继续冒泡
            else {
                alert('排序结束!')
                arr.i = arr.j = undefined;
                disabledButton(false);
            }
        }
    }
        //冒泡排序 从小到大
    function sort(arr, isAsc, isFor) {
        if (!isFor) { arr.i = arr.j = 0; disabledButton(true);}
        if ((isAsc && parseInt(arr[arr.j].style.height) > parseInt(arr[arr.j + 1].style.height))
            || (!isAsc && parseInt(arr[arr.j].style.height) < parseInt(arr[arr.j + 1].style.height))) {
            arr[arr.j].style.backgroundColor = "#999";
            arr[arr.j + 1].style.backgroundColor = "#999";
            setTimeout(function () {
                var c = arr[arr.j + (isAsc ? 0 : 1)].style.height;
                arr[arr.j + (isAsc ? 0 : 1)].style.height = arr[arr.j + (isAsc ? 1 : 0)].style.height;
                arr[arr.j + (isAsc ? 1 : 0)].style.height = c;
                arr[arr.j].style.backgroundColor = arr[arr.j + 1].style.backgroundColor = "red";
                plusIJ(arr, isAsc);
            }, 1000);//1s后交换
        }
        else plusIJ(arr, isAsc);
    }
</script>
</body>
</html>

 


原创文章,转载请注明出处:JavaScript模拟冒泡排序
评论(0)Web开发网
阅读(55)喜欢(0)不喜欢(0)JavaScript/Ajax