<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:ELEMENT>
<html>
<head>
<title>sort</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
margin:0px 0px 0px 90px;
}
div{
color:#afafaf;
font-family:微软雅黑;
font-weight:bold;
}
#screen{
position:absolute;
width:1100px;
height:500px;
border:solid 1px #cfcfcf;
}
#butt{
position:absolute;
top:510px;
}
</style>
</head>
<body>
<div id="screen"></div>
<div id="butt">
<button onclick="init()">初始化</button>
<button onclick="bubble_sort()">冒泡</button>
<button onclick="cocktail_sort();">双向冒泡</button>
<button onclick="selection_sort();">选择</button>
<button onclick="doQuickSort(0,99);">快速</button>
<button onclick="stoogeSort();">stooge</button>
</div>
</body>
</html>
<script type="text/javascript">
var speed = 10;
var aNums = new Array();
window.onload = function() {
var oFrag = document.createDocumentFragment();
for(var i = 0;i < 100;i++){
aNums[i] = Math.ceil(Math.random() * 500);
}
for(var i = 0;i < aNums.length;i++){
var oDiv = document.createElement("div");
oDiv.id = i;
with(oDiv.style){
position = "absolute";
width = "10px";
height = aNums[i] + "px";
top = 500 - aNums[i] + "px";
left = i * 10 + i * 1 + "px";
border = "solid 1px #7a9aff";
backgroundColor = "#cfefff";
}
oDiv.innerHTML = aNums[i];
oFrag.appendChild(oDiv);
}
document.getElementById("screen").appendChild(oFrag);
}
function init() {
window.location.reload();
}
//view
function setView(a,b) {
var oA = document.getElementById(a);
var oB = document.getElementById(b);
with(oA.style) {
height = aNums[a] + "px";
top = 500 - aNums[a] + "px";
}
oA.innerHTML = aNums[a];
with(oB.style) {
height = aNums[b] + "px";
top = 500 - aNums[b] + "px";
}
oB.innerHTML = aNums[b];
}
//冒泡排序
function bubble_sort() {
var temp = 0;
var i = -1;
var timer_1 = window.setInterval(function(){
if(i < aNums.length) {
var j = 0;
var timer_2 = window.setInterval(function(){
if(j < aNums.length - i){
if(aNums[j] > aNums[j + 1]){
temp = aNums[j];
aNums[j] = aNums[j + 1];
aNums[j + 1] = temp;
setView(j,j + 1);
}
j++;
} else {
window.clearInterval(timer_2);
}
},speed);
i++;
} else {
window.clearInterval(timer_1);
}
},speed * (100 - i));
}
//双向冒泡排序
function cocktail_sort(){
var temp = 0;
var i = -1;
var timer_1 = window.setInterval(function(){
if(i < aNums.length / 2) {
var j = 0;
var timer_2 = window.setInterval(function(){
if(j < aNums.length / 2){
if(aNums[j] > aNums[j + 1]){
temp = aNums[j];
aNums[j] = aNums[j + 1];
aNums[j + 1] = temp;
setView(j,j + 1);
}
if(aNums[99 - j - 1] > aNums[99 - j]){
temp = aNums[99 - j - 1];
aNums[99 - j - 1] = aNums[99 - j];
aNums[99 - j] = temp;
setView(99 - j - 1,99 - j);
}
j++;
} else {
window.clearInterval(timer_2);
}
},speed);
i++;
} else {
window.clearInterval(timer_1);
}
},speed * (100 - i));
}
//选择排序
function selection_sort(){
var i = 0;
var temp = 0;
var timer = window.setInterval(function(){
if(i < aNums.length - 1) {
//找出最小的，放到前面
var index = 0;
var tempNum = aNums[i];
for(var j = i;j < aNums.length - 1;j++){
if(tempNum > aNums[j + 1]){
tempNum = aNums[j + 1];
index = j + 1;
}
}
if(index == 0)index = i;
temp = aNums[i];
aNums[i] = aNums[index];
aNums[index] = temp;
setView(i,index);
i++;
} else {
window.clearInterval(timer);
}
},speed * 10);
}
//快速排序 参数: 数组起始位置
function doQuickSort(low,height) {
var timer;
if(low < height){
var result = quick_sort(low,height);
timer = window.setInterval(function(){
doQuickSort(low,result - 1);
doQuickSort(result + 1,height);
},speed * 50);
}
window.setTimeout(function(){
window.clearInterval(timer);
},speed * 50);
}
function quick_sort(low,height) {
var key = aNums[low];
while(low < height) {
while(low < height && aNums[height] >= key){
height--;
}
aNums[low] = aNums[height];
aNums[height] = key;
setView(low,height);
while(low < height && aNums[low] <= key){
low++;
}
aNums[height] = aNums[low];
aNums[low] = key;
setView(low,height);
}
return low;
}
//Stooge-sort
function stoogeSort() {
doQuickSort(0,66);
window.setTimeout(function(){
doQuickSort(33,99);
},5000);
window.setTimeout(function(){
doQuickSort(0,66);
},10000);
}
</script>
View Code
