<!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 排序算法动态演示”中，我们重点关注的是计算机科学中的核心算法——排序算法。排序算法是数据处理和计算机科学的基础，它主要用于整理无序的数据集合，使其按照特定规则（如升序或降序）排列。在这...
本软件是由资深算法研究者精心编写的，旨在通过动态展示排序算法的过程，帮助用户深入理解各种排序算法的工作原理，并简化测试与分析流程。 一、排序算法的重要性 排序是数据处理的基础操作，无论是数据库查询优化...
快速排序是基于“分区”操作的排序，选取一个基准元素，将数组分为两部分，然后对这两部分分别进行排序，总时间复杂度也是O(n log n)。 **3. 性能比较** 实验结果显示，快速排序在比较次数和平均运行时间上都表现...
5. 算法流程：文中详细介绍了具体的芯片排序算法流程，例如简单排序实现法的算法步骤、参数设置以及排序效果展示。这些算法流程是实现芯片产品排序的核心技术内容。 6. 硬件开发与电气控制：由于ABB机器人及工作站...
通过分析这些源代码，开发者和学生可以深入研究如何在MFC环境中实现排序算法的动态演示，以及如何设计用户友好的图形界面。这个项目不仅是一个实用的工具，也是学习和实践MFC、排序算法和GUI编程的理想实例。
总结来说，这个项目展示了如何在Android平台上实现仿Zaker的拖拽排序功能，它结合了GridView的拖放操作和ViewPager的页面切换，提供了一种灵活、动态的数据展示方式。通过对源码的学习和实践，开发者可以掌握更多...
总的来说，这个"带排序功能的Flash图片展示"项目展示了Flash的强大功能，包括动态内容加载、音频处理、用户交互以及动画效果的实现。尽管现在HTML5和其他现代技术已经逐渐取代了Flash，但了解并研究这样的项目仍然有...
这种方法不仅深化了首尾排序算法的应用范围，也为“程序设计”与“数据结构”课程的融合、教学改革和教育创新提供了重要的研究案例。 首尾排序算法是一种基本的排序方法，其核心思想是在排序过程中，从数据序列的...
在可视化展示中，这种直观的动态过程能够帮助学习者更好地理解和掌握算法的工作原理。 Qt是一个跨平台的应用程序开发框架，广泛用于创建图形用户界面（GUI）应用程序。使用Qt，我们可以构建一个窗口，显示排序过程...
同时，教师也可以通过演示系统解释算法的优化过程，展示不同排序算法的优缺点和适用场景。这样的教学方式有利于提高学生的实践能力和解决问题的能力。 总之，"数据结构实验教学中排序算法的动态演示"是一个重要课题...
本实验旨在通过对两种经典排序算法——快速排序和归并排序的研究与实现，深入理解它们的基本原理、时间复杂度，并通过编程实践比较这两种算法在不同数据规模下的性能表现。 #### 二、快速排序 **1. 基本思想** ...
在PB应用中，数据窗口经常被用于数据的展示和交互，而通用排序功能则是数据窗口的一个关键特性，允许用户根据特定需求对数据进行升序或降序排列。 1. **数据窗口的排序方式** - **内置排序**：PB数据窗口提供了...
无论是冒泡排序的简单实现，快速排序的高效性，还是通过汉诺塔问题学习递归，都能在不同的场景下发挥重要作用。而排序模型图则为学习和教学提供了直观的辅助工具。通过深入研究和实践这些算法，开发者能更好地应对...
### 数据结构：交换排序-冒泡排序实验指导 ...此外，实验还鼓励学生对比其他排序算法，如快速排序、插入排序等，分析它们在不同场景下的适用性和性能差异，为进一步研究和实际应用奠定坚实的基础。
动态排序指示箭头通常指的是在排序过程中，用于直观展示元素移动情况的图形化表示。这通常是教育或教学工具的一部分，帮助用户理解各种排序算法的工作原理。 首先，我们来了解一下什么是排序。排序是计算机科学中最...