js模拟冒泡排序动态图（1轮）
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>123</title> 6 </head> 7 <style> 8 .div1{ 9 width:80px; 10 height:45px; 11 border:2px solid red; 12 display:none; 13 float:left; 14 background:gray; 15 font-size:30px; 16 text-align:center; 17 padding-top:5px; 18 position:absolute; 19 top:-80px; 20 } 21 .divs{ 22 width:80px; 23 height:45px; 24 border:2px solid red; 25 float:left; 26 font-size:30px; 27 text-align:center; 28 vertical-align:center; 29 padding-top:5px; 30 } 31 </style> 32 <script type="text/javascript" src='jquery-1.8.3.js'></script> 33 <script type="text/javascript" > 34 /*改变css属性的四种方式： 35 1.obj.classname 36 2.obj.style.cssText 37 3.obj.setAttribute(oldclassname,newclassname) 38 4。更改外联css文件obj.setAttribute(hrefname,cssname) 39 */ 40 /*$(document).ready(function(){ 41 $("#b1").click(function(){ 42 alert('123'); 43 }); 44 });*/ 45 46 function f1(){ 47 var block1=document.getElementById("id1"); 48 var block2=document.getElementById("id2"); 49 /*var block3=document.getElementById("id3"); 50 var block4=document.getElementById("id4"); 51 var block5=document.getElementById("id5"); 52 var block6=document.getElementById("id6"); 53 for(var i=0;i<6;i++) 54 { 55 //block1.style.cssText='background:gray;position:absolute;top:-100px;'; 56 var b1num=document.getElementById("id"+(i+1)+'').innerHTML; 57 var b2num=document.getElementById("id"+(i+2)+'').innerHTML; 58 if (parseInt(b1num)<parseInt(b2num)){ 59 var left = 100+80; 60 block1.style.cssText='float:none;background:gray;position:absolute;left:90px;top:-100px;'; 61 } 62 }*/ 63 var b1num=document.getElementById("id1").innerHTML; 64 var b2num=document.getElementById("id2").innerHTML; 65 block2.style.cssText="background:yellow"; 66 } 67 function f2(){ 68 var block1=document.getElementById("id1"); 69 var block2=document.getElementById("id2"); 70 var block3=document.getElementById("id3"); 71 block3.style.cssText="background:yellow"; 72 block2.style.cssText="background:silver"; 73 } 74 function f3(){ 75 var block3=document.getElementById("id3"); 76 var block4=document.getElementById("id4"); 77 block4.style.cssText="background:yellow"; 78 block3.style.cssText="background:silver"; 79 } 80 function f4(){ 81 var block5=document.getElementById("id5"); 82 var block4=document.getElementById("id4"); 83 var b1num=document.getElementById("id1").innerHTML; 84 var b4num=document.getElementById("id4").innerHTML; 85 block5.style.cssText="background:yellow"; 86 block4.style.cssText="background:silver"; 87 } 88 function f5(){ 89 var block6=document.getElementById("id6"); 90 var block5=document.getElementById("id5"); 91 block6.style.cssText="background:yellow"; 92 block5.style.cssText="background:silver"; 93 } 94 function f6(){ 95 var block1=document.getElementById("id1"); 96 var block6=document.getElementById("id6"); 97 var block5=document.getElementById("id5"); 98 var block7=document.getElementById("id7"); 99 var t=block7.innerHTML; 100 block7.innerHTML=block6.innerHTML; 101 block6.innerHTML=t; 102 block6.style.cssText="background:silver"; 103 } 104 function f7(){ 105 var block7=document.getElementById("id7"); 106 var block1=document.getElementById("id1"); 107 block1.style.cssText='background:silver'; 108 block1.innerHTML=block7.innerHTML; 109 block7.style.cssText="display:none"; 110 } 111 function f(){ 112 var block7=document.getElementById("id7"); 113 var block1=document.getElementById("id1"); 114 block1.style.cssText="background:white"; 115 block7.style.cssText="display:block"; 116 block7.innerHTML=block1.innerHTML; 117 block1.innerHTML=" "; 118 } 119 function test(){ 120 var count = 0; 121 //var bt=document.getElementById('id1'); 122 //alert(bt); 123 $('#b1').live('click',function(){ 124 count++; 125 //alert(count); 126 switch (count){ 127 case 1: 128 f(); 129 break; 130 case 2: 131 f1(); 132 break; 133 case 3: 134 f2(); 135 break; 136 case 4: 137 f3(); 138 break; 139 case 5: 140 f4(); 141 break; 142 case 6: 143 f5(); 144 break; 145 case 7: 146 f6(); 147 break; 148 case 8: 149 f7(); 150 break; 151 default: 152 break; 153 } 154 }); 155 } 156 test(); 157 </script> 158 <body > 159 <!--canvas画布--> 160 <canvas style="border:1px solid red;margin-left:;100px" margin-left="200px" width="800px" height="400px" id='dialog1'></canvas> 161 <!--排序元素--> 162 <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> 163 <!--操作按钮--> 164 <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> 165 </body> 166 </html>
当然，通过上述方式实现太过于繁琐，目前由于技术有限，只能通过该方式实现。
