<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排序动态展示</title>
<style>
#sortbox,sortbox_quick{
position:relative;
height:200px;
margin-top:10px;
}
.tow{
position:absolute;
bottom:0px;
width:10px;
background-color:green;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#show{
font:14px/100% Arial;
position:absolute;
top:5px;
right:5px;
font-weight:bold;
color:#feeef5;
cursor:pointer;
border:solid 1px #d2729e;
background:#f895c2;
background:-webkit-gradient(linear,left top,left bottom,from(#feb1d3),to(#f171ab));
background:-moz-linear-gradient(top,#feb1d3,#f171ab);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');
padding:3px 9px;
-webkit-border-radius:.5em;
-moz-border-radius:.5em;
border-radius:.5em;
box-shadow:0 1px 2px rgba(0,0,0,.2);
text-shadow:0 1px 1px rgba(0,0,0,.3)
}
</style>
</head>
<body>
<div id="sortbox">
</div>
<div id="sortbox_quick">
</div>
<div id="show">
show
</div>
<script>
var Dom = {
get:function(id){
return document.getElementById(id);
}
}
var Sort = {
randomArray:(function(){
// 随即生成1到100的打乱的数组，这个算法是跟JK学习的，也算是一种洗牌算法，感觉不错，谢谢JK
var i,
len = 100,
oldsource = new Array(len);
for(i=0;i < len ;i++){
var random = Math.floor(Math.random()*(i+0.9999));
oldsource[i] = oldsource[random];
oldsource[random] = i+1;
}
return oldsource;
}()),
bubbleArray:[],
init:function(){
var sourcearray = this.randomArray,
html = [],
html_quick = [];
for(var i = 0 , len = sourcearray.length ; i < len ; i ++){
html.push('<div id="tow'+i+'" class="tow" style="left:'+(10+1)*i+'px;height:'+2*sourcearray[i]+'px"></div>');
html_quick.push('<div id="tow_quick'+i+'" class="tow" style="left:'+(10+1)*i+'px;height:'+2*sourcearray[i]+'px"></div>');
}
Dom.get("sortbox").innerHTML = html.join("");
Dom.get("sortbox_quick").innerHTML = html_quick.join("");
Dom.get("show").onclick = function(){Sort.show()};
},
bubbleSort:function(array){
var clonearray = array;
var i = 0, len = clonearray.length,
j, d,anim=[];
for(; i<len; i++){
for(j=0; j<len; j++){
if(clonearray[i] < clonearray[j]){
d = clonearray[j];
clonearray[j] = clonearray[i];
clonearray[i] = d;
if( i != j)
anim.push([i,j]);
}
}
}
return anim;
},
quickSort:function(array){
//完全按照这种算法的说明写的，之前看到的这种代码实际上经过了一些小的修改，然后我改回来之后也方便了之后的动态展示
var i = 0;
var j = array.length - 1;
var anim = [];
var keyi = null,tt = null;
var Sort = function(i, j){
// 结束条件
if(i == j ){ return };
var key = array[i];
keyi = i;
var stepi = i; // 记录开始位置
var stepj = j; // 记录结束位置
while(j > i){
// j <<-------------- 向前查找
if(array[j] >= key){
j--;
}else{
array[i] = array[j];
var oldj = j;
array[j] = key;
keyi = j;
anim.push([i,j]);
//i++ ------------>>向后查找
while(j > ++i){
if(array[i] > key){
array[j] = array[i];
array[i] = key;
keyi = i;
//array[i] = key;
anim.push([j,i]);
break;
}
}
}
}
// 如果第一个取出的 key 是最小的数
if(stepi == i){
Sort(++i, stepj);
return ;
}
// 递归
Sort(stepi, i);
Sort(j, stepj);
}
Sort(i, j);
return anim;
},
show:function(){
var anim = this.bubbleSort((function(){
var a = [];
for(var i = 0 ; i < Sort.randomArray.length ; i++){
a.push(Sort.randomArray[i]);
}
return a;
})()),
anim_quick = this.quickSort(Sort.randomArray);
//for(var i = 0 , len = anim.length ; i < len ;){
var i = 0,
j = 0;
var tt = setInterval(function(){
if(anim_quick[j]){
var tmp = parseInt(Dom.get("tow_quick"+anim_quick[j][0]).style.height);
Dom.get("tow_quick"+anim_quick[j][0]).style.height = parseInt(Dom.get("tow_quick"+anim_quick[j][1]).style.height)+"px";
Dom.get("tow_quick"+anim_quick[j][1]).style.height = tmp+"px";
//console.log(i);
j++;
}else{
clearInterval(tt);
}
},10);
var t = setInterval(function(){
if(anim[i]){
var tmp = parseInt(Dom.get("tow"+anim[i][0]).style.height);
Dom.get("tow"+anim[i][0]).style.height = parseInt(Dom.get("tow"+anim[i][1]).style.height)+"px";
Dom.get("tow"+anim[i][1]).style.height = tmp+"px";
//console.log(i);
i++;
}else{
clearInterval(t);
}
},10);
//}
}
}
Sort.init();
</script>
</body>
</html>
分享到：
相关推荐
这个“冒泡排序演示”可能包含了一个VB工程，其中包含了具体的代码实现，展示了如何在实际应用中使用冒泡排序。通过分析和运行这个示例，你可以更深入地理解VB中的数组操作和循环结构，以及如何利用这些基础知识来...
在本实验“实验2 排序算法动态演示”中，我们重点关注的是计算机科学中的核心算法——排序算法。排序算法是数据处理和计算机科学的基础，它主要用于整理无序的数据集合，使其按照特定规则（如升序或降序）排列。在这...
本软件是由资深算法研究者精心编写的，旨在通过动态展示排序算法的过程，帮助用户深入理解各种排序算法的工作原理，并简化测试与分析流程。 一、排序算法的重要性 排序是数据处理的基础操作，无论是数据库查询优化...
5. 算法流程：文中详细介绍了具体的芯片排序算法流程，例如简单排序实现法的算法步骤、参数设置以及排序效果展示。这些算法流程是实现芯片产品排序的核心技术内容。 6. 硬件开发与电气控制：由于ABB机器人及工作站...
快速排序是基于“分区”操作的排序，选取一个基准元素，将数组分为两部分，然后对这两部分分别进行排序，总时间复杂度也是O(n log n)。 **3. 性能比较** 实验结果显示，快速排序在比较次数和平均运行时间上都表现...
通过分析这些源代码，开发者和学生可以深入研究如何在MFC环境中实现排序算法的动态演示，以及如何设计用户友好的图形界面。这个项目不仅是一个实用的工具，也是学习和实践MFC、排序算法和GUI编程的理想实例。
总结来说，这个项目展示了如何在Android平台上实现仿Zaker的拖拽排序功能，它结合了GridView的拖放操作和ViewPager的页面切换，提供了一种灵活、动态的数据展示方式。通过对源码的学习和实践，开发者可以掌握更多...
总的来说，这个"带排序功能的Flash图片展示"项目展示了Flash的强大功能，包括动态内容加载、音频处理、用户交互以及动画效果的实现。尽管现在HTML5和其他现代技术已经逐渐取代了Flash，但了解并研究这样的项目仍然有...
这种方法不仅深化了首尾排序算法的应用范围，也为“程序设计”与“数据结构”课程的融合、教学改革和教育创新提供了重要的研究案例。 首尾排序算法是一种基本的排序方法，其核心思想是在排序过程中，从数据序列的...
总结以上内容，本课程通过Java语言为载体，深入浅出地展示了九种排序算法的原理与实现，并通过动态演示的方式，帮助学习者在实践中学习和理解这些排序算法，进一步提高编程实践能力和解决实际问题的能力。...
在可视化展示中，这种直观的动态过程能够帮助学习者更好地理解和掌握算法的工作原理。 Qt是一个跨平台的应用程序开发框架，广泛用于创建图形用户界面（GUI）应用程序。使用Qt，我们可以构建一个窗口，显示排序过程...
源代码文件中将详细地展示每种排序算法的Java实现，以及动态演示界面的设计与实现。通过动态演示，学习者可以清晰地看到每一种排序算法在排序过程中的每一步操作，从而更深入地理解算法的每一步变化。 该项目是一个...
同时，教师也可以通过演示系统解释算法的优化过程，展示不同排序算法的优缺点和适用场景。这样的教学方式有利于提高学生的实践能力和解决问题的能力。 总之，"数据结构实验教学中排序算法的动态演示"是一个重要课题...
本实验旨在通过对两种经典排序算法——快速排序和归并排序的研究与实现，深入理解它们的基本原理、时间复杂度，并通过编程实践比较这两种算法在不同数据规模下的性能表现。 #### 二、快速排序 **1. 基本思想** ...
在PB应用中，数据窗口经常被用于数据的展示和交互，而通用排序功能则是数据窗口的一个关键特性，允许用户根据特定需求对数据进行升序或降序排列。 1. **数据窗口的排序方式** - **内置排序**：PB数据窗口提供了...
使用场景及目标：旨在帮助使用者更好地掌握排序算法的应用场景和选择依据，特别是在处理大数据集的情况下，能够理解快速排序为什么被广泛应用于现代程序之中，同时也提醒读者关注潜在的风险点以便做出更好的算法决策...