Hbomb的博客

来自于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

标签：canvas, JavaScript

02月

25日

前端细节：跨浏览器点击界面按钮复制内容到剪贴板

类归于：做东西 Hbomb 写于 15:53

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

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

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

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的剪切板的版本，代码如下：

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就是采用了这个方法。

标签：clipboard, JavaScript, 跨浏览器

02月

22日

YohoAdSence广告墙

类归于：做东西 Hbomb 写于 09:58

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

标签：adsence, yoho

02月

22日

Javascript（Jscript）通过ActiveX来操作 Excel

类归于：做东西 Hbomb 写于 09:47

偶家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可见的

首先看下读取操作：

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文件

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;