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

日期：2019-09-30点击：468收藏
<!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业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。