代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<style>
.div1{
width:80px;
height:45px;
border:2px solid red;
display:none;
float:left;
background:gray;
font-size:30px;
text-align:center;
padding-top:5px;
position:absolute;
top:-80px;
}
.divs{
width:80px;
height:45px;
border:2px solid red;
float:left;
font-size:30px;
text-align:center;
vertical-align:center;
padding-top:5px;
}
</style>
<script type="text/javascript" src='jquery-1.8.3.js'></script>
<script type="text/javascript" >
/*改变css属性的四种方式：
1.obj.classname
2.obj.style.cssText
3.obj.setAttribute(oldclassname,newclassname)
4。更改外联css文件obj.setAttribute(hrefname,cssname)
*/
/*$(document).ready(function(){
$("#b1").click(function(){
alert('123');
});
});*/ function f1(){
var block1=document.getElementById("id1");
var block2=document.getElementById("id2");
/*var block3=document.getElementById("id3");
var block4=document.getElementById("id4");
var block5=document.getElementById("id5");
var block6=document.getElementById("id6");
for(var i=0;i<6;i++)
{
//block1.style.cssText='background:gray;position:absolute;top:-100px;';
var b1num=document.getElementById("id"+(i+1)+'').innerHTML;
var b2num=document.getElementById("id"+(i+2)+'').innerHTML;
if (parseInt(b1num)<parseInt(b2num)){
var left = 100+80;
block1.style.cssText='float:none;background:gray;position:absolute;left:90px;top:-100px;';
}
}*/
var b1num=document.getElementById("id1").innerHTML;
var b2num=document.getElementById("id2").innerHTML;
block2.style.cssText="background:yellow";
}
function f2(){
var block1=document.getElementById("id1");
var block2=document.getElementById("id2");
var block3=document.getElementById("id3");
block3.style.cssText="background:yellow";
block2.style.cssText="background:silver";
}
function f3(){
var block3=document.getElementById("id3");
var block4=document.getElementById("id4");
block4.style.cssText="background:yellow";
block3.style.cssText="background:silver";
}
function f4(){
var block5=document.getElementById("id5");
var block4=document.getElementById("id4");
var b1num=document.getElementById("id1").innerHTML;
var b4num=document.getElementById("id4").innerHTML;
block5.style.cssText="background:yellow";
block4.style.cssText="background:silver";
}
function f5(){
var block6=document.getElementById("id6");
var block5=document.getElementById("id5");
block6.style.cssText="background:yellow";
block5.style.cssText="background:silver";
}
function f6(){
var block1=document.getElementById("id1");
var block6=document.getElementById("id6");
var block5=document.getElementById("id5");
var block7=document.getElementById("id7");
var t=block7.innerHTML;
block7.innerHTML=block6.innerHTML;
block6.innerHTML=t;
block6.style.cssText="background:silver";
}
function f7(){
var block7=document.getElementById("id7");
var block1=document.getElementById("id1");
block1.style.cssText='background:silver';
block1.innerHTML=block7.innerHTML;
block7.style.cssText="display:none";
}
function f(){
var block7=document.getElementById("id7");
var block1=document.getElementById("id1");
block1.style.cssText="background:white";
block7.style.cssText="display:block";
block7.innerHTML=block1.innerHTML;
block1.innerHTML=" ";
}
function test(){
var count = 0;
//var bt=document.getElementById('id1');
//alert(bt);
$('#b1').live('click',function(){
count++;
//alert(count);
switch (count){
case 1:
f();
break;
case 2:
f1();
break;
case 3:
f2();
break;
case 4:
f3();
break;
case 5:
f4();
break;
case 6:
f5();
break;
case 7:
f6();
break;
case 8:
f7();
break;
default:
break;
}
});
}
test();
</script>
<body >
<!--canvas画布-->
<canvas style="border:1px solid red;margin-left:;100px" margin-left="200px" width="800px" height="400px" id='dialog1'></canvas>
<!--排序元素-->
<div style="border:1px solid green;width:482;background-color:silver;position:absolute;bottom:300px;left:60px;"><div class="divs" id="id1">2</div><div class="divs" id="id2">5</div><div class="divs" id="id3">3</div><div class="divs" id="id4">4</div><div class="divs" id="id5">6</div><div class="divs" id="id6">1</div><div class="div1" id="id7"></div></div>
<!--操作按钮-->
<div style="position:absolute;top:10px;left:100px;"><button id='b1' style='margin-left:50px;'>bubble_sort</button><button onclick="quicksort();" style='margin-left:50px;'>quick_sort</button><button onclick="stacklsort();" style='margin-left:50px;'>stack_sort</button></div>
</body>
</html>
当然，通过上述方式实现太过于繁琐，目前由于技术有限，只能通过该方式实现。