<!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>