太棒的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>
bubble.html
时间： 2024-11-14 11:47:57