哥是玩程序的

缺乏、安全感 2022-03-20 03:58 153阅读 0赞

**以下文章来自：酷壳** [**http://CoolShell.cn**][http_CoolShell.cn]

《[哥是玩程序的][Link 1]》，《[一个Windows 3.1的Web网站][Windows 3.1_Web]》，《[又一个Javascript试验田 ][Javascript_]》

下面一组有趣的Web示例，这些示例使用Web的一些很“土”控件做出一些很有趣的玩意儿。原来，编程是可以用来玩的，看看这些玩程序的人搞出的这些有意思的玩意，简直是玩得太有意思了。不过，请注意，这些东西只能使用Chrome打开，不然，你看不到相关的效果。

**用滚动条做的时间**

[http://toki-woki.net/p/scroll-clock/][http_toki-woki.net_p_scroll-clock]，下面的抓图只显示了时和分，后面还有不停跳动的秒。可以在IE，Fireforx和Chrome中查看。

![用滚动条做的时间][scroll_timer-300x162.jpg]

**用CheckBox做成一个水滴效果**

[http://the389.com/works/drops/][http_the389.com_works_drops]，这个示例的整个页面由Checkbox构成，你用鼠标点一下其中一个CheckBox，你会看到一个巨大的水滴滴了下去。Chrome中效果更好。

![用checkbox做的雨滴效果][checkbox]

**一个用滚动条做的扭动效果**

[http://the389.com/works/shake/][http_the389.com_works_shake]，页面打开你可以看到一排滚动条，用鼠标快速地横向滑动，你会看到滚动条开始跟着你的鼠标扭动。太BT了。请使用Chrome查看。

![一个可以扭曲的滚动条][shake-300x255.jpg]

**用CheckBox做的一个音阶**

[http://the389.com/works/tenori/][http_the389.com_works_tenori]，这个效果还是只能用Chrome查看。随机地点一下其中的Checkbox，于是程序会根据你所点的顺序开始演奏一些“滴滴嘟嘟”的声音，很有意思。

![用CheckBox作的音阶][CheckBox]

**用滚动条做的一个波浪效果**

[http://the389.com/works/scrollbars/][http_the389.com_works_scrollbars]，还是用鼠标触发，把鼠标放在这一排滚动条中上下移动，你会发现滚动条会跟着你的鼠标形成波浪的效果。还是只能在Chrome中查看。

[![用滚动条做的波形][wave-300x194.jpg]][http_toki-woki.net_p_scroll-clock]

the389.com这个网站成了这些乱七八糟的小玩意的试验地，上面还有其它一些这些类似的小玩意。

看来，这样的人并不在少数，这不，我又发现了一个，这回这个好像更有技术含量一些，下面是其试验程序的列表：

[http://www.andrew-hoyer.com/experiments][http_www.andrew-hoyer.com_experiments]

<table style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px"> 
 <tbody> 
 <tr> 
 <td><a href="http://www.andrew-hoyer.com/experiments/sudoku" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow"> <img src="http://www.andrew-hoyer.com/images/experiments/SudokuThumb.jpg?1265581473" alt="Bacon and Eggs Thumbnail" style="border:none"> </a></td> 
 <td><a href="http://www.andrew-hoyer.com/experiments/sudoku" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow">Simple Sudoku Solver</a>&nbsp;这是一个“数独游戏”，其在你游戏的过程中可以在空格处提示你可能的数字。 &nbsp; February 2010 </td> 
 </tr> 
 <tr> 
 <td><a href="http://www.andrew-hoyer.com/experiments/cloth" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow"> <img src="http://www.andrew-hoyer.com/images/experiments/ClothThumb.jpg?1250545758" alt="Bacon and Eggs Thumbnail" style="border:none"> </a></td> 
 <td><a href="http://www.andrew-hoyer.com/experiments/cloth" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow">Cloth Simulation</a>&nbsp;这是一个极端的布料仿真程序。使用鼠标拖曳，按着g键拖曳可以把布悬挂起来。 &nbsp; August 2009 </td> 
 </tr> 
 </tbody> 
</table>

<table style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px"> 
 <tbody> 
 <tr> 
 <td><a href="http://www.andrew-hoyer.com/experiments/numbers" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow"> <img src="http://www.andrew-hoyer.com/images/experiments/NumbersThumb.jpg?1247627086" alt="Bacon and Eggs Thumbnail" style="border:none"> </a></td> 
 <td><a href="http://www.andrew-hoyer.com/experiments/numbers" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow">Numbers to Words</a>&nbsp;这是一个把阿拉伯数字变成英文说明的演示。 &nbsp; June 2009 </td> 
 </tr> 
 <tr> 
 <td><a href="http://www.andrew-hoyer.com/experiments/particle_system" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow"> <img src="http://www.andrew-hoyer.com/images/experiments/ParticleSystemThumb.jpg?1247626980" alt="Bacon and Eggs Thumbnail" style="border:none"> </a></td> 
 <td><a href="http://www.andrew-hoyer.com/experiments/particle_system" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow">N-Bodies Particle System</a>&nbsp;可以模拟物理学上的原子核与电子圆周运动的的样子。 &nbsp; April 2009 </td> 
 </tr> 
 <tr> 
 <td><a href="http://www.andrew-hoyer.com/experiments/quantum_cryptography" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow"> <img src="http://www.andrew-hoyer.com/images/experiments/QuantumThumb.jpg?1247626989" alt="Bacon and Eggs Thumbnail" style="border:none"> </a></td> 
 <td><a href="http://www.andrew-hoyer.com/experiments/quantum_cryptography" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow">Quantum Cryptography</a>&nbsp;一篇文章介绍了什么叫“量子加密”。 &nbsp; March 2009 </td> 
 </tr> 
 <tr> 
 <td><a href="http://www.andrew-hoyer.com/experiments/dripsessions" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow"> <img src="http://www.andrew-hoyer.com/images/experiments/DripSessionsThumb.jpg?1247627110" alt="Bacon and Eggs Thumbnail" style="border:none"> </a></td> 
 <td><a href="http://www.andrew-hoyer.com/experiments/dripsessions" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow">Drip Sessions</a>&nbsp;一个流淌的效果。 &nbsp; February 2009 </td> 
 </tr> 
 <tr> 
 <td><a href="http://www.andrew-hoyer.com/experiments/robotarm" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow"> <img src="http://www.andrew-hoyer.com/images/experiments/RoboticArmThumb.jpg?1247627096" alt="Bacon and Eggs Thumbnail" style="border:none"> </a></td> 
 <td><a href="http://www.andrew-hoyer.com/experiments/robotarm" style="color:rgb(51,102,153); text-decoration:none" rel="nofollow">Robotic Arm</a>&nbsp;一个机械手臂的演示程序。 &nbsp; December 2008 </td> 
 </tr> 
 </tbody> 
</table>

下面这个更BT，请大家围观下面这个网站吧。

[**http://www.michaelv.org/**][http_www.michaelv.org]

打开这个网站，你会看到N年前DOS时代的Windows 3.1的界面，居然还可以扫雷，呵呵。真应了那句话——“只要是可以被Javascript实现的应用或程序，最终都会被Javascript所实现”。另，关于其它Web上更为疯狂的程序，可以查看本站的[这篇文章][Link 1]。还有这个[在线的IDE][IDE]。下面是win3.1的截图：

[![一个Windows3.1的web网站][Windows3.1_web]][Windows3.1_web]

呵呵，不要迷恋哥，哥只是玩程序。

另外，在Chrome的试验田，你还可以看到很多这样的东西，甚至更弦的东西。只不过，Chrome试验田的那些小玩意看着不够“土”，所以效果不够好。呵呵。  
[http://www.chromeexperiments.com/][http_www.chromeexperiments.com]

[http_CoolShell.cn]: http://coolshell.cn/
[Link 1]: http://coolshell.cn/?p=1932
[Windows 3.1_Web]: http://coolshell.cn/?p=2065
[Javascript_]: http://coolshell.cn/?p=2276
[http_toki-woki.net_p_scroll-clock]: http://toki-woki.net/p/scroll-clock/
[scroll_timer-300x162.jpg]: http://coolshell.cn/wp-content/uploads/2009/12/scroll_timer-300x162.jpg
[http_the389.com_works_drops]: http://the389.com/works/drops/
[checkbox]: http://coolshell.cn/wp-content/uploads/2009/12/rain_drop.jpg
[http_the389.com_works_shake]: http://the389.com/works/shake/
[shake-300x255.jpg]: http://coolshell.cn/wp-content/uploads/2009/12/shake-300x255.jpg
[http_the389.com_works_tenori]: http://the389.com/works/tenori/
[CheckBox]: http://coolshell.cn/wp-content/uploads/2009/12/tenori-274x300.jpg
[http_the389.com_works_scrollbars]: http://the389.com/works/scrollbars/
[wave-300x194.jpg]: http://coolshell.cn/wp-content/uploads/2009/12/wave-300x194.jpg
[http_www.andrew-hoyer.com_experiments]: http://www.andrew-hoyer.com/experiments
[http_www.michaelv.org]: http://www.michaelv.org/
[IDE]: http://coolshell.cn/?p=1883
[Windows3.1_web]: http://coolshell.cn/wp-content/uploads/2010/01/Win32web.jpg
[http_www.chromeexperiments.com]: http://www.chromeexperiments.com/