您现在的位置是：首页 > 文章详情
JavaScript ~ 排序算法（选择排序）

日期：2019-09-30点击：487收藏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="style/flex.css">
    <style>
        body{

        }
        #sort{
            width: 1200px;
            height: auto;
            background: #FFFFFF;
            color: #606060;
            position: relative;
        }
        #title{
            width: 100%;
            height: 60px;
            background: #9dc4d4;
            color: #FFFFFF;
            font-size: 28px;
        }
        #nav{
            width: 100%;
            height: 60px;
            background: #ff6600;
        }
        .nav_item{
            width: 70px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
        }
        #show-sort{
            background: #EEEEEE;
            width: 1200px;
            height: 300px;
        }
        .sort-item{
            margin-left: 15px;
            width: 30px;
        }
        #reset{
            position: fixed;
            top: 30px;
            right: 30px;
            height: 42px;
            line-height: 42px;
            width: 120px;
            background: #2492ff;
            border-radius: 5px;
            text-align: center;
            color: #FFFFFF;
            cursor: pointer;
        }
    </style>
</head>
<body class="r-n-c-fs">
    <div id="sort" class="c-n-fs-fs">
        <div id="reset" onclick="SortCount(20)">产生随机数据</div>
        <div id="title" class="r-n-c-c">
            排序算法
        </div>
        <div id="nav" class="r-n-c-c">
            <div class="nav_item" onclick="SortOne()">冒泡排序</div>
            <div class="nav_item" onclick="SortTwo()">选择排序</div>
            <div class="nav_item">快速排序</div>
            <div class="nav_item">希尔排序</div>
            <div class="nav_item">归并排序</div>
            <div class="nav_item">基数排序</div>
            <div class="nav_item">堆排序</div>
        </div>
        <div id="show-sort" class="r-n-fs-fe"></div>

    </div>
</body>
<script>
    let countList = [];
    let docFrag = document.createDocumentFragment();
    let domEle = document.getElementById("show-sort");
    domEle.style.width = "1200px";
    let renderWidth = domEle.style.width;
    SortCount(25);

    /**
     * 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，
     * 如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，
     * 也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
     * */
    function SortOne(){
        /**
         * 遍历目标元素的所有子元素，将所有子元素移动到createDocumentFragment对象中
         * */
        for (let e of Array.from(domEle.children)){
            // console.log(e);
            docFrag.appendChild(e);
        }
        let fragContent = Array.from(docFrag.children);
        /**
         * 在createDocumentFragment对象的children属性中取出所有子元素
         *     比较相邻的元素。如果第一个比第二个大，就交换它们两个；
             对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；
             针对所有的元素重复以上的步骤，除了最后一个；
             重复步骤1~3，直到排序完成。
         * */

        /*
        * 循环元素个数减一次（第一轮比较的总次数）
        * */
        for(let i = 0;i < countList.length-1;i++){
            /*
            * 每一轮比较都会将最大的数提升到最后的位置，所以每进行一轮比较，这一轮比较的最大值都会冒泡到最后位置
            * 下一轮比较的总次数就不用考虑上一轮比较的最后一个值，所以循环一轮比较次数减一更加优化。
            * */
            for (let j = 1;j < countList.length-i;j++) {
                if (countList[j-1]>countList[j]){
                    [countList[j],countList[j-1]] = [countList[j-1],countList[j]];
                    [fragContent[j],fragContent[j-1]] = [fragContent[j-1],fragContent[j]]
                }
            }
        }
        for (let e of fragContent){
            domEle.appendChild(e);
        }
        console.log(countList);
        console.log(fragContent);
    }



    /**
     * 选择排序(Selection-sort)是一种简单直观的排序算法。
     * 它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，
     * 然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
     * 以此类推，直到所有元素均排序完毕。
     * */
    function SortTwo() {

        /**
         * 遍历目标元素的所有子元素，将所有子元素移动到createDocumentFragment对象中
         * */
        for (let e of Array.from(domEle.children)){
            // console.log(e);
            docFrag.appendChild(e);
        }
        let fragContent = Array.from(docFrag.children);
        /**
         * 在createDocumentFragment对象的children属性中取出所有子元素
         *     比较相邻的元素。如果第一个比第二个大，就交换它们两个；
         对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；
         针对所有的元素重复以上的步骤，除了最后一个；
         重复步骤1~3，直到排序完成。
         * */

        /*
        * 循环元素个数减一次（第一轮比较的总次数）
        * */
        let min = 0;
        console.log(countList);
        for(let i = 0;i < countList.length-1;i++){
            /*
            * 每一轮比较都会将最小的数提升到最前的位置，所以每进行一轮比较，这一轮比较的最小值都会被选择到最后前位置
            * 下一轮比较的总次数就不用考虑上一轮比较的最前一个值，所以循环一轮比较开始基数加一。
            * */

            for (let j = i+1;j < countList.length;j++) {
                if (countList[j] < countList[i]) {
                    [countList[i],countList[j]] = [countList[j],countList[i]];
                    [fragContent[i],fragContent[j]] = [fragContent[j],fragContent[i]];
                }
            }
        }
        for (let e of fragContent){
            domEle.appendChild(e);
        }
    }
    function selectionSort(arr) {
        var len = arr.length;
        var minIndex, temp;
        for (var i = 0; i < len - 1; i++) {
            minIndex = i;
            for (var j = i + 1; j < len; j++) {
                if (arr[j] < arr[minIndex]) {     // 寻找最小的数
                    minIndex = j;                 // 将最小数的索引保存
                }
            }
            temp = arr[i];
            arr[i] = arr[minIndex];
            arr[minIndex] = temp;
        }
        return arr;
    }


    function SortCount(numberCount) {
        let baseItem = document.getElementsByClassName("sort-item");
        let baseCount = baseItem.length;
        let count = baseCount + numberCount;
        let rWidth = parseInt(renderWidth);
        let modelWidth = (rWidth-(rWidth/count)*0.3)/count;
        if (baseCount!==0){
            for (let item of baseItem){
                item.style.width = modelWidth*0.7+"px";
                item.style.marginLeft = modelWidth*0.3+"px";
            }
        }
        for (let i = 0;i<numberCount;i++){
            let tempEle = document.createElement("div");
            let size = numberCreate(300);
            tempEle.className = "sort-item";
            tempEle.dataset.size = size+"";
            tempEle.style.width = modelWidth*0.7+"px";
            tempEle.style.height = size+"px";
            tempEle.style.marginLeft = modelWidth*0.3+"px";
            tempEle.style.backgroundColor = colorCreate();
            domEle.appendChild(tempEle);
            countList.push(size);
        }
    }
    function colorCreate() {
        let color = "";
        let str_item = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
        for (let i = 0;i<6;i++){
            color += str_item[Math.floor(Math.random()*16)];
        }

        return "#"+color;
    }
    function numberCreate(limitTop) {
        return Math.floor(Math.random() * limitTop);
    }




</script>
</html>
原文链接：https://yq.aliyun.com/articles/719902
关注公众号
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。