http://www.chromeexperiments.com/

在chrome的Google的JavaScript引擎（V8）下，js的执行效率不再是瓶颈了，一些超炫的显示的及时演算，已是游刃有余了，这个站点展示了，2D，3D的显示的demo或者是小游戏或小应用。

之前一直是使用，在加载时，在应用的URL里加字符串“？aa=xxx”，在IE下貌似没有问题，但是FF，chrome,等浏览器没法动态相应Javascript修改该字符串。所以最后的解决办法是采用，flash回调Javascript方法获取信息。
呵呵，吸取教训。

来自于Incredible JavaScript+Canvas 3D demos from Japan! 的报道。
主要使用了JavaScript+Canvas实现了3D 的及时演算，真的很惊人的多边形显示，在chrome上显示的非常完美，但是在safari和firefox显示还是比较卡的。
演示＃ 1 ： 3D贴图映射物理计算
您可以点击画布，使其摇晃。

http://gyu.que.jp/jscloth/

演示 #2: 面向对象的Hatsune Miku 3D 人物

可以拖拽场景，变化观察角度，点击人物，人物会挥动下手中的大蒜

http://gyu.que.jp/jscloth/miku.html

演示 #3: 3D iPod touch 的材质环境反射

可以在材质上反射周围环境的颜色

http://gyu.que.jp/jscloth/touch.html

在YOHO!Adsence时，需要一个功能，就是复制内容到剪贴板，通常我们使用的复制到剪贴板的方法就是，采用：

1

 window.clipboardData.setData("Text", txt);

很不幸的是这个复制到剪贴板的方法，只是用于IE，而且如果是IE6新版本，或者IE7会弹出是否允许访问剪贴板的提示，这样一来用户体验就很不好了。特别对于那些非IE用户。于是，我在网上找了下，发现了以下跨浏览器实现的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

copyToClipboard = function(txt)
{
  if(window.clipboardData)
  {
     window.clipboardData.clearData();
     window.clipboardData.setData(”Text”, txt);
  }
  else if(navigator.userAgent.indexOf(”Opera”) != -1)
  {
    window.location = txt;
  }
  else if (window.netscape)
  {
    try
    {
      netscape.security.PrivilegeManager.enablePrivilege(”UniversalXPConnect”);
    }
    catch (e)
    {
      alert(”您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试”);
      return false;
    }
    var clip = Components.classes[’@mozilla.org/widget/clipboard;1′].createInstance(Components.interfaces.nsIClipboard);
    if (!clip)
      return;
    var trans = Components.classes[’@mozilla.org/widget/transferable;1′].createInstance(Components.interfaces.nsITransferable);
    if (!trans)
      return;
    trans.addDataFlavor(’text/unicode’);
    var str = new Object();
    var len = new Object();
    var str = Components.classes[”@mozilla.org/supports-string;1″].createInstance(Components.interfaces.nsISupportsString);
    var copytext = txt;
    str.data = copytext;
    trans.setTransferData(”text/unicode”,str,copytext.length*2);
    var clipid = Components.interfaces.nsIClipboard;
    if (!clip)
      return false;
    clip.setData(trans,null,clipid.kGlobalClipboard);
  }
}

但是这个办法，并不完美，在chrome和Safari下没法实现复制，而且在firefox下，修改fierfox配置才能支持该功能。所以采用纯JavaScript是无法完成该项任务，浏览器对于复制到剪切板出于安全考虑，都比较谨慎的给实现该功能设置了障碍。于是我继续寻找解决方案，之后看到了一个JavaScript借助flash的剪切板的版本，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function copy(inElement) 
{
  if (inElement.createTextRange) 
  {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
      range.execCommand('Copy');
  }
 else
 {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) 
    {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

as3的官方参考：

setClipboard () 方法

public static function setClipboard(string:String):void

语言版本 : ActionScript 3.0
Player 版本 : Flash Player 9

用指定的文本字符串替换剪贴板的内容。

注意：出于安全方面的考虑，您无法读取系统剪贴板的内容。 换句话说，不存在相应的 System.getClipboard() 方法。

参数

string:String — 要放置在系统剪贴板上的纯文本字符串，用于替换系统剪贴板上的当前内容（如果有）。

方法来源：http://www.jeffothy.com/weblog/clipboard-copy/

但是这个方法在fp9是可以适用的，但是在fp10之后，这个方法的由于fp10的安全机制的问题，导致不允许脚本去调用fp的as内部方法，于是这个方法在浏览器升级fp后，又是不可以通用了。这样就有了以下方法，人的聪明才知是无限的，既然fp10不允许外部脚本调as的内部方法，为何不反其道行之，采用内部方法调外部的内容能，于是就有了，之下的方法，原理是，在点击触发的dom结构上，蒙一层，这层是透明的flash，当用户点击这个dom结构时，其实同时也点击了这个flash，这样同样还是调setClipboard，而是内部事件触发的，这个方法zeroclipboard,这样就真真实现了跨浏览器的复制到剪贴板的功能。
测试页面如下：点击这里
现在YOHO!Adsense就是采用了这个方法。

通过3p/2w的努力YohoAdSence终于上线了，这个版本或许是beta版，欢迎大家多提意见什么的。
网站地址：yohoads.yoho.cn
我的博客做了一个广告墙页面：hbomb.name/wordpress/yoho-ad
别的不说了，大家去看看吧！

偶家mm最近被工作上n多excel数据表的操作弄烦了，看的我心里不是滋味，总想帮助下，但是我对excel的宏操作也是菜鸟，最后想来还是使用Javascript来处理逻辑，然后通过ActiveX来操作Excel，基本原理是这样的：读取excel->js处理->输出excel。
js处理这边我就不说了，因为不是本文关注的重点。主要看下通过ActiveX的Excel操作，我主要用到，Excel.Application这个对象。其实查看文档Excel的操作Application、Workbook、Worksheet、Range这几个对象，分别是:Application对象表示整个应用程序，Worksheet对象标示工作表，Workbook对象表示包含Worksheet对象的一个集合，Range则主要用于单元格抽象表示的对象，用于处理单个单元格或成组的单元格。
在Jscrīpt中，通过ActiveXObject对象来启用并返回Automation对象的引用。不管是什么操作首先创建一个ActiveXObject对象。

1
2

var xlsApp = new ActicveXObject(“Excel.Application”);
xlsApp .Visible = true;//使Excel可见的

首先看下读取操作：

1
2
3
4
5
6

var wb= xlsApp.Workbooks.open("C:\\temp.xls");//在本地打开一个xls文件。
var aSheet = wb.ActiveSheet;//获取当前的工作表，也可以选定打开哪个工作表，像：wb.Worksheets(1).select()
var rows=wb.aSheet .UsedRange.Cells.Rows.Count;//当前打开表的行数
var cols=wb.aSheet.UsedRange.Columns.Count;//当前打开表的列数
var value= oSheet.Cells(1,1).value;//获取第一行第一列的单元格的值
wb.close();//完成读取操作需要关闭当前的xls

写入Excel文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var xlBook = xlsApp.Workbooks.Add;//添加一个excel集（即一个xls文件）
var xlsheet = xlBook.Worksheets(1);//获取一个工作表
var rang = xlsheet.Cells(i,1).Value="xxx";//往工作表的单元格里添加值
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,6)).Interior.ColorIndex=5//设置单元格背景色为蓝色
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,6)).Font.ColorIndex=4;//设置字体色 
xlsheet.Rows(1).RowHeight = 25;//设置行高
xlsheet.Rows(1).Font.Size=14;//设置字体大小
xlsheet.Rows(1).Font.Name="黑体";//设置字体
xlsheet.Columns("A:D").ColumnWidth =18;//设置列宽
xlsheet.Columns(2).NumberFormatLocal="@";//设置显示字符而不是数字
 range.WrapText  =  true  ;//设置单元格内容自动换行
 range.HorizontalAlignment  =  Excel.XlHAlign.xlHAlignCenter;//设置单元格内容竖直堆砌方式
 range.VerticalAlignment=Excel.XlVAlign.xlVAlignCenter//设置单元格内容水平对齐方式
 range.WrapText  =  true;//设置单元格自动换行
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,4)).mergecells=true;//合并单元格
xls.UserControl = true;  //很重要,不能省略,不然会出问题 意思是Excel交由用户控制
//以下是回收内存
xls=null;
xlBook=null;
xlsheet=null;

参考：

• http://www.blogjava.net/fool/archive/2006/06/27/55285.html
• http://www.itjj.net/softtest/tools/20080523/298118.html
• http://www.javaeye.com/topic/3529

最新版的NextGEN Gallery 1.10没有简体中文的包，所以我就汉化下，大家有需要可以从下面下载。e文水平一般，如有错误的地方请指正。

nggallery-zh_cn语言包下载

前一阵子，要给yoho.cn的logo加声音彩蛋，我就重新看了下页面加声音方法，之前也看过比较有趣的一些做法。

再加上文宾提供的yahoo的flash叫声，基本上有两种：

1. flash声音加载方式

先把声音文件导入flash，编译出连续播放的.swf文件。然后在页面里采用如下js代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//flash的HTML代码 var sound_str='<object width="0" height="0" data="xxx.swf" type="application/x-shockwave-flash"> <param name="id" value="wmsgsound" /> <param name="quality" value="high" /> <param name="loop" value="0" /><param name="src" value="xxx.swf" /> <param name="name" value="wmsgsound" /></object>';   //声音加载方法 function load_sound() { var sound = document.createElement("span"); sound.style.visibility = "hidden"; sound.innerHTML = yodel_str; document.body.appendChild(sound);//把flash的HTML代码插入上面的span内 }; //页面触发 document.getELementById("a").onclick=function() { load_sound(); }

这种方式，必须使用flash才行，还有注意flash的版本，不然IE的object标签会加载flash失败.

2. embed声音加载方式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//开始播放 function startWav(uri) { stopWav(); embedEl = document.createElement(”embed”); embedEl.setAttribute(”src”, uri); embedEl.setAttribute(”hidden”, true); embedEl.setAttribute(”autostart”, true); document.body.appendChild(embedEl); } //停止播放 function stopWav() { if (embedEl) document.body.removeChild(embedEl); embedEl = null; } //页面触发 document.getELementById("a").onclick=function() { startWav('a.wav'); }

这种方式，无需使用flash即可加载音频文件，但是用一个缺点，就是有时间的延迟，有一个加载音频文件的延迟，在

http://softwareas.com/offline-sound-no-flash-no-file 有趣的JavaScript实现的节拍器（没有使用插件）有解决方案，就是把音频文件转成页面的文本编码，但是我试了下，在ie下加载不成功。

所以最后采用flash的方式来做的。
现在点击www.yoho.cn的logo会有叫声了。

  最近有点忙,作前端,其实都是细枝末节的东西,鸡零狗碎的,最近,在大家的通力合作下,完成了有货购物的改版.大家有兴趣的可以去感受下新的有货购物体验.buy.yoho.cn购物车采用了Ajax方式,节省了用户访问的带宽和等待时间.

  另外,还有一个很cool的试衣的功能.大家有兴趣也可以去玩玩.

这个是简介

<canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。

<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。基于Gecko1.8的浏览器，例如Firefox 1.5，也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

<canvas>目前IE不支持，也是canvas推广不怎么样的原因，也许大家会和svg以及vml来比较，的确很像，但是仔细看过canvas渲染的图片，其实是png的位图，至少在火狐和Safari是一样的。

具体的教程：在https://developer.mozilla.org/cn/Canvas_tutorial上有，我就不转载了，关键是如何让IE也支持canvas，不热真的，用的人不会很多，至少现在是IE的天下，幸好，google有个项目让IE也支持canvas，而且只是应用一段js就可以了，就是这个http://excanvas.sourceforge.net/做了canvas的适配，看了下代码，主要用canvas的写法来适配成vml的实现。

完全遵循HTML5对于canvas的描述：

http://www.w3.org/TR/2008/WD-html5-20080122/#the-canvas