<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < > </ > < type="text/css" rel="stylesheet" href="style/flex.css"> <style> body{ } #sort{ width: 1200px; height: auto; background: #FFFFFF; color: #606060; position: relative; } # { 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" ="SortCount(20)">产生随机数据</div> <div id=" " class="r-n-c-c"> 排序算法 </div> <div id="nav" class="r-n-c-c"> <div class="nav_item" ="SortOne()">冒泡排序</div> <div class="nav_item" ="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>< > 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 Item = document.getElementsByClassName("sort-item"); let Count = Item.length; let count = Count + numberCount; let rWidth = parseInt(renderWidth); let modelWidth = (rWidth-(rWidth/count)*0.3)/count; if ( Count!==0){ for (let item of Item){ 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); }</ ></html>
