代码：
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>
当然，通过上述方式实现太过于繁琐，目前由于技术有限，只能通过该方式实现。
原文地址：https://www.cnblogs.com/g177w/p/8413121.html
时间： 2024-11-09 14:17:43