js模拟冒泡排序动态图(1轮)

Posted 海的味道

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

当然,通过上述方式实现太过于繁琐,目前由于技术有限,只能通过该方式实现。

以上是关于js模拟冒泡排序动态图(1轮)的主要内容,如果未能解决你的问题,请参考以下文章

Python冒泡排序

js冒泡排序

js中sort()方法冒泡排序模拟

javascript冒泡排序

js 冒泡排序

排序----冒泡排序