您的位置：首页 > Web前端 > JavaScript

JavaScript界面演示快速排序

2016-04-21 18:05 741 查看

不管用什么语言，思想都一样

做这个首先的会快速排序，这里不解释了，只是走出页面效果

注意: 如果把一条一条div放入数组，那么div交换位置的时候，注意数组的处理，需要保存左面或右边的left值，一边下次while的left定位

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sort.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="divMain right" id="right">
<div class="buttonDiv" id="buttonDiv">
<button class="button" onclick="startInitDiv()"><span>初始化</span></button>
</div>
<div class="buttonDiv" id="buttonDiv2" style="display: none;">
<button class="button" id="start"  onclick="startQuickSort()"><span>开始</span></button>
</div>
</div>
</body>
</html>

先沾出来数组中是整数的快速排序代码

<script type="text/javascript">

var arr = [];
arr.push(14);
arr.push(21);
arr.push(5);
arr.push(67);
arr.push(100);
arr.push(63);
arr.push(1);
arr.push(8);
arr.push(45);
arr.push(43);
arr.push(32);
arr.push(29);
arr.push(12);
arr.push(3);
arr.push(66);
arr.push(41);
arr.push(5);
arr.push(1);
arr.push(67);
arr.push(99);
console.log(arr.join(","))
quickSort(arr, 0, arr.length-1);
console.log(arr.join(","))
function quickSort(arr, start, end) {
if(start >= end)
return false;

var i = start,
j = end;

var temp = arr[i];
while(i < j) {
while(i < j && arr[j] > temp) j = j - 1;
if(i < j)
arr[i++] = arr[j];

while(i < j && arr[i] < temp) i = i + 1;
if(i < j)
arr[j--] = arr[i];

}

arr[i] = temp;
console.log('exec quickSort   start:'+start+ ' middle:'+ i +' end:'+end);
quickSort(arr, start, i-1);
quickSort(arr, i+1, end);
}

</script>

var frame = {};
var divFrame = {};
$(function() {
/*排序的div*/
divFrame._width = "5";
divFrame.width = "5px";

/*面板*/
frame.obj = $("#right");
frame.width = $("#right").width();
frame.height = $("#right").height();
frame.divNumber = parseInt(frame.width / divFrame._width);
});

var content={};
function startInitDiv() {
$("#buttonDiv").hide();
var divArr = [];
var spanArr = [];
var num = frame.divNumber;
initDiv(0,num,divArr,spanArr);
}

/*初始化div条条*/
function initDiv(i, num, divArr,spanArr) {
if(i >= num) {
$("#buttonDiv2").show();
content.divs=divArr;
content.spans=spanArr;
content.length = divArr.length;
return null;
}

var div = document.createElement("div");
$(div).attr("class","newDiv");
$(div).attr("id","div"+i);
$(div).css("width",divFrame.width);
$(div).css("height",getRandomHeight(frame.height, 1) + "px");
$(div).css("left", i * divFrame._width + "px");
frame.obj.append(div);
divArr.push(div);

setTimeout(function(){
initDiv(i+1, num, divArr,spanArr);
}, 1);
}

function startQuickSort() {
quickSort(content, 0, content.length-1);
}
function quickSort(cont, start, end) {
if(start >= end)  {
$("#start").html("完成");
return false;
}
var i = start,
j = end;

var divs = cont.divs,
spans = cont.spans;
var temp = divs[i];
$(temp).css("opacity","0.1");
$(temp).css("filter","Alpha(opacity=10)");
divs[i] = $(divs[i]).position().left+"px";

A(cont, i, j, temp, start, end);
}
function rightToLeft(cont, i, j, temp, start, end) {
/*结束*/
var divs = cont.divs;
if(i < j && $(divs[j]).height() > $(temp).height()) {
setTimeout(function(){
j = j - 1;
rightToLeft(cont, i, j, temp, start, end);
}, 10);
} else {
if(i < j) {
var l = $(divs[j]).position().left+"px";
$(divs[j]).css("left", divs[i]);
divs[i] = divs[j];
divs[j] = l;
i = i + 1;
}
leftToRight(cont, i, j, temp, start, end);
}
}

/*注意这里 需要整明白循环过程*/
function leftToRight(cont, i, j, temp, start, end) {
/*结束*/
var divs = cont.divs;
if(i < j && $(divs[i]).height() < $(temp).height()) {
setTimeout(function(){
i = i + 1;
leftToRight(cont, i, j, temp, start, end);
}, 10);
} else {
if(i < j) {
var r = $(divs[i]).position().left+"px";
$(divs[i]).css("left", divs[j]);
divs[j] = divs[i];
divs[i] = r;
j = j - 1;
}
A(cont, i, j, temp, start, end);
}
}
function A (cont, i, j, temp, start, end) {
var divs = cont.divs;
if(i < j) {
setTimeout(function() {
rightToLeft(cont, i, j, temp, start, end);
}, 10);
} else {
/*本段循环结束*/
$(temp).css("opacity","1");
$(temp).css("filter","Alpha(opacity=100)");
$(temp).css("left", divs[i]);
divs[i] = temp;
quickSort(cont, start, i-1);
quickSort(cont, i+1, end);
}
}

.right {
position: relative;
width: 100%;
}

.divMain {
height: 700px;
background-color: #666666;
border-radius: 5px;
box-shadow: 10px 10px 20px 10px;
display: inline-block;
}

.button {
display: inline-block;
border-radius: 5px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
width: 100px;
height: 40px;
transition: 0.5s;
cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}

.button:active {
background-color: #4CAF50;
border: 2px solid #e7e7e7;
transition: 0.1s;
}

.buttonDiv {
position: absolute;
margin-left: 45%;
margin-top: 600px
}
#buttonDiv2 {
position: absolute;
z-index: 9999;
margin-left: 45%;
margin-top: 600px
}

.newDiv{
position: absolute;
border: solid 1px #000000;
background-color: gainsboro;
border-radius: 5px;
bottom: 0px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript界面演示 快速排序

JavaScript界面演示快速排序