JavaScript ~ 排序算法(选择排序)-阿里云开发者社区

开发者社区> swyan> 正文

JavaScript ~ 排序算法(选择排序)

简介: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="style/flex.
+关注继续查看
<!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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript ~ 排序算法(选择排序)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="style/flex.
943 0
python实现选择排序算法
选择排序,简单而直观,其原理是把序列中的最小值或者最大值找出来放在起始位置,然后再从剩下的序列中找出极值放到起始位置之后,以此类推最后就完成排序。 完成这个过程大致思想:首先需要一个记录器,记录排序排到第几个位置了,然后在剩余的序列中找到极值下标,最后将记录器位置和极值位置元素交换,完成本次选择排序。
1203 0
javascript算法汇总(持续更新中)
1. 线性查找 1 doctype html> 2 3 4 5 线性查找 6 7 8 9 数组为:[2,4,6,23,53,545,65,3,24,5,3,6] 10 输入要查的值: 11 这个值在数...
693 0
Java调用Javascript、Python算法总结
Java调用Javascript、Python算法总结最近项目中经常需要将Javascript或者Python中的算法发布为服务,而发布Tomcat服务则需要在Java中调用这些算法,因此就不免要进行跨语言调用算法。
920 0
+关注
swyan
技术宅
39
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载