刘钢的博客 – 我是UED

好多服务器端或CDN都会对CSS、JS和图片这些静态的内容设置缓存，到了IE这里又会在本地做一个缓存。所以当我们更新了CSS文件之后，常常会出现客户端没有更新，导致显示出现问题。之前我一直使用时间戳参数的方法来解决：

但是在最近做的项目中发现一个比较奇怪的问题，服务器端做了gzip压缩，到客户端第一次解压的时候没问题，第二次访问的时候ie从cache里读文件就出问题了，只能读出前面大约一两千个字节。在两台win2000+ie6的机子上重现了这个问题，XP的还没有发现。

最终的解决方案是在时间戳参数后面再加上一个.css结尾，也就是这么写：

<link rel="stylesheet" type="text/css"   href="common.css?time=20100801.css" />

然后就一切正常了…

大概IE在从缓存里读文件的时候还得对文件扩展名做一个判断，所以这么加一下它就认了。

当然js也可以用这种方法

<script language="JavaScript" src="/flash/duilian.js?time=New Date()"></script>

从玉伯那里转来的，Goole非常NB
用 google docs 打开 pdf 文件，选中文本：

表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！

google 太强悍了，好在前端代码都是开源的，下面简单分析下。

首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：

<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04'00'"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

有了这份数据，就可以根据选区得到对应的文本。

接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。

通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：

n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

只要注释掉上面的代码，Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索，在 HTML 里，发现了秘密：

到此真相大白：当用户按下 Ctrl + C 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 Ctrl + C 的效果是一样了。

强悍的 google, 技术创新无处不在！

注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！

真的很荣幸，这次参加了webrebuild的大会，也非常遗憾，上次没有参加

说真的，这次的收获非常大，几位嘉宾演讲的主题和内容，都让我受益颇多

感谢为这次会议奔波劳累的工作人员，你们辛苦了

嘉宾分享的内容（转自崔凯的博客）：

• data on the web Klaus Birkenbihl（W3C | 翻译：安琪）
• 建立前端开发团队 蒋定宇（D-Link 台湾）
• 谈谈HTML5和CSS3 谢子斌（Opera 马来西亚）
• 网页性能优化之路 范俊豪（腾讯 深圳）
• 前端基础架构 张克军（豆瓣 北京）
• 从浏览器渲染看标准的重要性 梁璟彪（腾讯 深圳）

以上为几位嘉宾分享的PPT，一个小细节：克军的PPT经验是html+css+js做的……前端无敌！

具体的我还在吸收中……

希望以后能有更多的前端会议推动整个前端行业的发展

感谢Blueidea的Zerolone同学为我们提供了W3C Javascript 最新Chm版哦：）

确实很好，支持索引，可以方便的离线查询了
下载

http://code.google.com/p/mootoolstools/downloads/list

Demo：http://www.iamued.com/demo/jisuan.html

核心代码

 <script>
  function js(){
	var jine=parseInt(document.getElementById("je").value);//每注金额
	var jiangjin=parseInt(document.getElementById("jj").value);//每注奖金
	var num=parseInt(document.getElementById("num").value);//计算期数
	var win=parseInt(document.getElementById("win").value);//保证利润数
	var content=document.getElementById("content");//输出容器
	var countmoney=0;//累计总投入
	var janci=jiangjin-jine;//每注利润值
	for(var i=1;i<=num;i++){
		//计算倍数
		var beishu=Math.ceil((countmoney+win)/janci);
		//累计投入金额
		countmoney=(countmoney+(beishu*jine));
		//本期奖金
		var nowjiangjin=(beishu*jiangjin);

		content.innerHTML=content.innerHTML+"第"+i+"期&nbsp需购买："+beishu+"注&nbsp;本期奖金："+nowjiangjin+"&nbsp;总投入:"+countmoney+"&nbsp;净利润:"+(nowjiangjin-countmoney)+"<br>";
	}
  }
  </script>

看具体效果的请去 Demo：http://www.iamued.com/demo/jisuan.html

还有一个C#软件版本的 直接放出下载地址吧 http://www.iamued.com/demo/jisuan.exe

就这么简单的一个算法 折腾了我半天 愁