JavaScript界面演示快速排序

最新推荐文章于 2024-04-12 19:46:07 发布

●杨毅

最新推荐文章于 2024-04-12 19:46:07 发布

阅读量640

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cnm_1314/article/details/51211410

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客探讨如何使用JavaScript实现快速排序，并展示交互式的界面效果。重点在于在处理DOM元素时，如何同步更新数组和界面元素的位置。

摘要由CSDN通过智能技术生成

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

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

注意: 如果把一条一条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" οnclick="startInitDiv()"><span>初始化</span></button>
			</div>
			<div class="buttonDiv" id="buttonDiv2" style="display: none;">
				<button class="button" id="start"  οnclick="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;
}

●杨毅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript界面演示快速排序

不管用什么语言，思想都一样做这个首先的会快速排序，这里不解释了，只是走出页面效果注意: 如果把一条一条div放入数组，那么div交换位置的时候，注意数组的处理，需要保存左面或右边的left值，一边下次while的left定位html 初始化开始先沾出来数组
复制链接

扫一扫