首页 > 代码库 > Windjs之冒泡排序过程展示
Windjs之冒泡排序过程展示
太棒的Windjs体验！写一个冒泡过程的展示，how？
先写个冒泡排序，坑爹的是我居然不会写...用惯了stl的今天连个冒泡都不会了也是醉了，写了蛮久居然发现写出来的是选择排序...纠结了蛮久还是给拼出来了...
but排序和画圆一样，都是一瞬间的事情，完全看不清中间bubble的过程。
怎么破 
再次祭出大杀器Windjs！from my point of view，Windjs就是能使得“线程”挂起的东西，跟vbs的sleep函数异曲同工；“挂起”后，不再执行任何js代码。按照老赵的话来说:"
在大部分平台上编写这样的程序并没有太大困难，只要在绘制出图形之后短暂地阻塞线程就行了。可惜，在JavaScript中我们只能“一蹴而就”，要暂停的话，只能使用setTimeout进行回调了。不过，这也正是Jscex的用武之地，用Jscex编写的代码需要“暂停”，只需要简单地调用sleep异步方法，一切都很直接。"
其实用setTimeout进行回调也是可以的，不过第二个参数的时间需要累积，很麻烦，不优雅，而for的继续执行会使代码出现各种坑爹结果...
so 如果想要用html5做动画或者特效，Windjs真的是个很好的辅助工具~
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="reset.css"> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title> </title> 7 <script src="jquery.js"></script> 8 <script src="wind-all-0.7.3.js"></script> 9 <style>10 span {border:1px solid red; width:40px; height:40px; position: absolute; text-align: center; line-height:40px}11 </style>12 <script>13 window.onload = function() {14 var run = eval(Wind.compile(‘async‘, function() {15 var from = [];16 var list = document.getElementsByTagName(‘span‘);17 for(var i = 0; i < list.length; i++) {18 list[i].style.left = 50 * i + ‘px‘;19 from[i] = i;20 }21 22 for(var i = 9; i >= 1; i--)23 for(var j = 0; j < i; j++) {24 var x = list[from[j]].innerHTML;25 var y = list[from[j + 1]].innerHTML;26 if(x > y) {27 $(‘span‘).eq(from[j]).animate({left:‘+=50px‘});28 $(‘span‘).eq(from[j + 1]).animate({left:‘-=50px‘});29 $await(Wind.Async.sleep(1000));30 var temp = from[j];31 from[j] = from[j + 1];32 from[j + 1] = temp;33 } else {34 $(‘span‘).eq(from[j]).css(‘borderColor‘, ‘green‘);35 $(‘span‘).eq(from[j + 1]).css(‘borderColor‘, ‘green‘);36 $await(Wind.Async.sleep(1000));37 $(‘span‘).eq(from[j]).css(‘borderColor‘, ‘red‘);38 $(‘span‘).eq(from[j + 1]).css(‘borderColor‘, ‘red‘);39 $await(Wind.Async.sleep(1000));40 }41 }42 })); 43 44 run().start();45 };46 </script>47 </head>48 <body>49 <span>9</span>50 <span>1</span>51 <span>3</span>52 <span>6</span>53 <span>4</span>54 <span>5</span>55 <span>2</span>56 <span>8</span>57 <span>7</span>58 <span>0</span>59 </body>60 </html>
Windjs之冒泡排序过程展示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。