js排序

js排序
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        .view{

            min-width: 1200px;

            position: relative;

        }

        .start{

            text-align: center;

            margin-top: 200px;

        }

        #result{

            display: block;

            line-height: 30px;

            width: 400px;

            margin:40px auto;

            text-align: center;

        }

        th{width: 200px;}

        th,td{height: 40px;}

        .beforeSort,.afterSort{

            width: 300px;

            height: 400px;

            position: absolute;

            left: 20px;

            border: 1px solid;

            overflow: auto;

            word-wrap: break-word;

        }

        .afterSort{

            left: auto;

            right: 20px;

        }

    </style>

    <title>排序算法</title>

</head>

<body>

    <div class="view">

        <div class="start">

            测试数据量:<input type="number" id="maxNum" value="1000">

            <button>开始</button>

        </div>

        <div class="beforeSort">排序前:<p></p></div>

        <div class="afterSort">排序后:<p></p></div>

        <table id="result" border="1" cellpadding="1" cellspacing="1">

            <th>算法</th><th>耗时</th>

            <tr id="bubble"><td>冒泡排序</td><td>等待...</td></tr>

            <tr id="insert"><td>插入排序</td><td>等待...</td></tr>

            <tr id="quick"><td>快速排序</td><td>等待...</td></tr>

            <tr id="select"><td>选择排序</td><td>等待...</td></tr>

            <tr id="shell"><td>希尔排序</td><td>等待...</td></tr>

            <tr id="self"><td>数组sort函数排序</td><td>等待...</td></tr>

        </table>

    </div>



    <script>

        var bs = document.querySelector(".beforeSort p"),

            as = document.querySelector(".afterSort p"),

            mn = document.querySelector("#maxNum"),

            btn = document.querySelector(".start button"),

            bubble = document.querySelector("#bubble td:nth-child(2)"),

            insert = document.querySelector("#insert td:nth-child(2)"),

            quick = document.querySelector("#quick td:nth-child(2)"),

            select = document.querySelector("#select td:nth-child(2)"),

            shell = document.querySelector("#shell td:nth-child(2)"),

            self = document.querySelector("#self td:nth-child(2)"),

            canclick = true;





        var allSort = {

            bubbleSort:function(array){

                var end = array.length-1;

                while(end>0){

                    for(var i=0;i<end;i++){

                        if(array[i]>array[i+1]){

                            var md = array[i+1];

                            array[i+1] = array[i];

                            array[i] = md;

                        }

                    }

                    end--;

                }

            },

            insertSort:function(array){

                for(var i=0;i<array.length;i++){

                    var a = i,b = i+1;



                    if(array[a]>array[b]){

                        var j = b-1,ayb = array[b];

                        while(ayb<array[j]){

                            array[j+1] = array[j]

                            j--;

                        }



                        array[j+1] = ayb;

                    }

                }

            },



            quickSort:function(array , start , end){

                //key是分割线

                var i=start;j = end,key = array[start];

                while(i<j){

                    while(i<j){

                        if(array[j]<=key&&array[j]<array[i]){    //j->i方向的遍历,如果比key小且比array[i]小,交换数据

                            var md = array[i];

                            array[i] = array[j];

                            array[j] = md;

                            break;

                        }

                        j--;

                    }

                    while(i<j){

                        if(array[i]>=key&&array[i]>array[j]){    //i->j方向的遍历,如果比key大且比array[j]大,交换数据

                            var md = array[i];

                            array[i] = array[j];

                            array[j] = md;

                            break;

                        }

                        i++;

                    }

                }

                if(i-start>1){            //对key左边的数据进行递归排序

                    this.quickSort(array , start , i-1)

                }

                if(end-i>1){            //对key右边的数据进行递归排序

                    this.quickSort(array , i+1 , end)

                }

            },



            selectSort:function(array){

                var i = 0;    //无序区最小指针



                while(i<array.length){

                    var index = 0 , min = null;  //index为当前遍历到的地址,min存放最小值

                    for(var j=i;j<array.length;j++){

                        if(array[j]<min||min===null){

                            min = array[j];

                            index = j;

                        }

                    }



                    if(array[i]!==min){            //提高排序稳定性,如果两个元素值相同则不交换

                        var md = array[i];

                        array[i] = array[index];

                        array[index] = md;

                    }

                    i++;

                }

            },



            shellSort:function(array , d){

                var d = d||10;

                while(d>=1){

                    sort(array , d);

                    d = Math.floor(d/2)

                }



                function sort(array , d){

                    var h = array.length/d;

                    for(var i=0;i<d;i++){

                        for(var j=0;j<h;j++){

                            var a = i+j*d , b=a+d;

                            

                            if(array[a]>array[b]){

                                var g = a,ayb = array[b];

                                while(ayb<array[g]){

                                    array[g+d] = array[g]

                                    g-=d;

                                }

                                array[g+d] = ayb;

                            }

                        }

                    }

                }

            },



            selfSort:function(array){

                array.sort(function(a , b){

                    return a-b;

                })

            }

        }



        btn.onclick = function(){

            if(!canclick) return false;



            canclick = false;

            bubble.innerHTML = "等待中..."

            insert.innerHTML = "等待中..."

            quick.innerHTML = "等待中..."

            select.innerHTML = "等待中..."

            shell.innerHTML = "等待中..."

            self.innerHTML = "等待中..."

            bs.innerHTML = "";

            as.innerHTML = "";



            var maxNum = parseInt(mn.value)||0,

                array = [];



            for(var i=0;i<maxNum;i++){

                array.push(parseInt(Math.random()*maxNum));

            }



            bs.innerHTML = array.join(",");

            

            loopSort("bubble" , array , function(){

                loopSort("insert" , array , function(){

                    loopSort("quick" , array , function(){

                        loopSort("select" , array , function(){

                            loopSort("shell" , array , function(){

                                loopSort("self" , array , function(){

                                    canclick = true;

                                })

                            })

                        })

                    })

                })

            })

        }



        function loopSort(sort , array , callback){

            var sortArray = Array.prototype.slice.call(array , 0);

            window[sort].innerHTML = "计算中...";



            setTimeout(function(){

                var time1 = new Date();

                if(sort==="quick"){

                    allSort[sort+"Sort"](sortArray,0,sortArray.length-1);

                }else{

                    allSort[sort+"Sort"](sortArray);

                }

                var time2 = new Date();

                window[sort].innerHTML = (time2-time1)+"毫秒";

                as.innerHTML = sort+"的结果:"+sortArray.join(",")

                

                callback();

            },10)

        }

    </script>

</body>

</html>
View Code

 

转:

http://www.cnblogs.com/axes/p/3657009.html

 

 

你可能感兴趣的:(js)